共计 1036 个字符,预计需要花费 3 分钟才能阅读完成。
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
的变动
正文完