vue + el-dialog 弹窗demo

点击按钮出现弹窗（组件写法）

 

父组件

<el-button @click="showTrackPlaybackDialog"> 打开弹窗 </el-button> 
<trackPlaybackDialog ref="trackPlaybackDialog" />

import trackPlaybackDialog from "./trackPlaybackDialog";

  components: {
    trackPlaybackDialog,
  },


methods: {

   /**
     * 打开弹窗
     * */
    showTrackPlaybackDialog(data) {
      let passData = {
        data,
        title: "轨迹回放",
      };
      this.$refs.trackPlaybackDialog.showDialog(passData);
    },

}

子组件（弹窗）

<!-- 弹窗 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="hideDialog"
  >
    <div>
      <el-button @click="hideDialog"> 关闭弹窗 </el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: "trackPlaybackDialog",
  data() {
    return {
      title: "",
      dialogVisible: false,
    };
  },
  methods: {
    showDialog(data) {
      console.log(data);
      this.title = data.title;
      this.dialogVisible = true;
    },
    hideDialog() {
      this.dialogVisible = false;
    },

  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  min-width: 1200px !important;
}

</style>