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 #fff
到 box-shadow: 0 0 0 420px #fff
的变动