0.1.8 • Published 7 months ago
my-tomtaw-package v0.1.8
医网云自己封装的组件包(多个组件)
该组件主要是 封装了一些 常用的 公共组件 便于开发中使用 比如有: 查看图片组件、el-table表格显示组件、轮播图片组件、跟无缝滚动插件vue-semless-scroll插件有关的组件等
安装
npm install my-tomtaw-package
或者
yarn add my-tomtaw-package
使用 table 组件时
在 main.js 里面 需要
import myTomtawPackage from "my-tomtaw-package"
Vue.use(myTomtawPackage)
在vue 文件里面
// <simpleTable :propData="propData"></simpleTable>
// propData: [
// { prop: "user_name", label: "姓名", width: 100 },
// { prop: "nick_name", label: "昵称", width: 100 },
// ]
使用 查看图片组件watchImg 时
在vue 文件里面
import { beganShowWatchDialog } from "my-tomtaw-package"
// 传入3个参数 第一个是 图片列表; 第二个是当前图片的src; 第三个是当前的图片是第几张(索引)
beganShowWatchDialog(
[
{src:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'}
],
'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
1
)
使用 查看图片轮播组件mySwiper时
在 main.js 里面 需要
import myTomtawPackage from "my-tomtaw-package"
Vue.use(myTomtawPackage)
在vue 文件里面
//<mySwiper :list="list" :duration="3000" :autoPlay="true"/>
// list: [
// { id: 1, imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg' },
// { id: 2, imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg' },
// { id: 3, imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg' },
// { id: 4, imgUrl: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg' },
// { id: 5, imgUrl: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg' }
// ]
使用 无缝滚动seamlessScroll插件有关的组件时
在 main.js 里面 需要
import myTomtawPackage from "my-tomtaw-package"
Vue.use(myTomtawPackage)
在vue文件里面
1. chart图表 滚动组件:
<chartScroll></chartScroll>
2. 文本在div里面滚动组件:
<contentScroll></contentScroll>
3. 多个div 滚动组件
<divScroll></divScroll>
4. el-table表格 滚动组件
<tableScroll></tableScroll>
打印表格
在 main.js 里面 需要
import myTomtawPackage from "my-tomtaw-package"
Vue.use(myTomtawPackage)
在vue 文件里面
import { PrintHelper } from 'my-tomtaw-package'
html:
<span @click="printData" class="function-btn bg_e6 clr_ff">
<i class="iconfont icondayin pr5"></i>打印
</span>
js:
// 打印
printData() {
let id = ''
let title = ''
if (this.tabType === 1) {
id = '#workTable'
title = '服务机构开展情况'
this.openAll()
} else if (this.tabType === 2) {
id = '#applyTable'
title = '申请机构开展情况'
this.openAll()
}
this.$nextTick(() => {
const table = document.querySelector(id)
const date = `${this.searchData.implementation_start_time}~${this.searchData.implementation_end_time}`
const username = this.userName
new PrintHelper().table(table).prepend({
title,
date,
username
}).print()
})
},
导出表格
在 main.js 里面 需要
import myTomtawPackage from "my-tomtaw-package"
Vue.use(myTomtawPackage)
在vue 文件里面
import { exportExcelWithHeader } from 'my-tomtaw-package'
html:
<span @click="importTableData" class="function-btn bg_0a clr_ff mr15">
<i class="iconfont icondaochu pr5"></i>导出
</span>
<el-table border stripe width="100%" height="100%" ref="workTable"></el-table>
js:
importTableData () {
const exportTime = `开展时间:${this.searchData.implementation_start_time}~${this.searchData.implementation_end_time}`
const userName = `制表人:${this.userName}`
// 服务机构开展情况
exportExcelWithHeader(this.$refs.workTable.$el, '服务机构开展情况', {
title: '服务机构开展情况',
exportTime,
userName,
needTitle: true
})
},