医网云自己封装的组件包(多个组件)

该组件主要是 封装了一些 常用的 公共组件 便于开发中使用 比如有： 查看图片组件、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
      })
    },