element遮罩层/弹出框如何封装成组件

遮罩层组件封装

1.注册事件

 <div class="chart-wrapper" @click="openLineChartDataDialog()">

2.封装组件

在table 给 :visible.sync="show“

 <el-dialog title="机器人工况" width="50%" :visible.sync="show">

在data中定义show

 data() {
    return {
      show: false,
	}
}

在method中

  methods: {
    open() {
      this.show = true
    },
}

3.引入组件

尽量做到语义化明确

// 引入机器人工况弹出框
import clickBarChartDialog from '@/views/dashboardDialog/clickBarChartDialog'

4.调用组件

  openLineChartDataDialog() {
      this.$nextTick(() => {
        this.$refs.clicklineChartDataDialog.open()
      })
    },