download:Taro@3.3.3最新版本开发企业级出行我的项目

JSON to Excel for VUE3

在浏览器中将JSON格局数据以excel文件的模式下载。该组件是基于this thread 提出的解决方案。反对Vue3.2.25及以上版本应用

重要提醒! Microsoft Excel中的额定提醒

此组件中实现的办法应用HTML表绘制。在xls文件中,Microsoft Excel不再将HTML辨认为本机内容,因而在关上文件之前会显示正告音讯。excel的内容曾经完满出现,然而提示信息无奈防止,请不要在意!

Getting started
装置依赖:

npm install vue3-json-excel
在vue3的利用入口处有两种注册组件的形式:

import Vue from "vue"import {vue3JsonExcel} from "vue3-json-excel"Vue.component("vue3JsonExcel", vue3JsonExcel)

或者

import Vue from "vue"
import vue3JsonExcel from "vue3-json-excel"

Vue.use(vue3JsonExcel)
在template文件中间接应用即可

<vue3-json-excel :json-data="json_data">  Download Data</vue3-json-excel>

应用 box-shadow 实现

如果应用 box-shadow,代码大抵如下:

<div class="g-container">    <div class="g-item"></div></div>.g-container {    position: relative;    width: 400px;    height: 300px;    overflow: hidden;}.g-item {    position: absolute;    width: 48px;    height: 48px;    border-radius: 50%;    background: #fff;    top: 20px;    left: 20px;    box-shadow: 0 0 0 0 #fff;    transition: box-shadow .3s linear;        &:hover {        box-shadow: 0 0 0 420px #fff;    }}

外围就在于:

外层一个设置了 overflow: hideen 的遮罩
内层元素 hover 的时候,实现一个 box-shadow: 0 0 0 0 #fffbox-shadow: 0 0 0 420px #fff 的变动