重新启程之Vue——点击按钮，弹出弹窗组件

目录

一、点击按钮，弹出弹窗组件

二、用v-for渲染一堆按钮，给每个按钮绑定不同的事件，其中一个按钮，点击则显示弹窗组件

---

 

一、点击按钮，弹出弹窗组件

按钮：<el-button>

弹窗：<log-dialog>

<el-button
          type="primary"
          size="small"
          @click="LogDialogVisible = true"   
          plain
          >查看日志</el-button>

<log-dialog :id="id" :visible.sync="LogDialogVisible" title="下载日志" />


<!-- @click="LogDialogVisible = true"  : 点击，让弹窗可见（visible）-->

<script>
import LogDialog from "./child-comps/DeviceControlLogDialog.vue";  //导入弹窗组件

export default {
  name: "xxxxxxx",
  data() {
      return {
        LogDialogVisible: false,    //一开始弹窗设为false，则不可见
      }  
  },
  components: { LogDialog }, //注册组件
}
</script>

二、用v-for渲染一堆按钮，给每个按钮绑定不同的事件，其中一个按钮，点击则显示弹窗组件

<template #default="{ row }">
              <el-button
                v-for="button in row.config.button"
                :key="button.id"
                size="mini"
                :type="button.type ? button.type : 'warning'"
                class="command-button"
                :plain="button.plain != undefined ? button.plain : true"
                :loading="button.loading"
                :disabled="button.disable"
                @click="onSelectFunc(row, button)"
              >
                {{ button.btnText }}
              </el-button>
            </template>


<!-- @click="onSelectFunc(row, button)"  : 点击，根据按钮的key去执行各自的事件处理函数-->

<log-dialog :id="id" :visible.sync="LogDialogVisible" title="下载日志" />

<script>
import LogDialog from "./child-comps/DeviceControlLogDialog.vue";  //导入弹窗组件

export default {
  name: "xxxxxxx",
  data() {
      return {
        //一开始弹窗设为false，则不可见
        LogDialogVisible: false,   
        // 回调函数映射表
        funcMap: {
        downLoadLog:this.downLoadLog, //"下载日志"
        },
      }  
  },
  components: { LogDialog }, //注册组件
  methods: {
    tanchuang (){
      this.LogDialogVisible = !this.LogDialogVisible;   //=======>重要，写成LogDialogVisible =true是不行的。
      // alert("我是弹窗");
    },
    async downLoadLog(args) {
      this.tanchuang();
    },



    /**
     * @this funcMap 函数和关键字的映射表
     * @funcKey 按钮点击后执行的方法关键字,根据此关键字进行映射，来获取对应方法
     * @row 获取row.command
     * @button 对应button的数据，包括配置和args
     */
    onSelectFunc(row, button) {
      // 判断执行函数的key
      const funcKey = button.funcKey;
      if (!button.args) button.args = {};
      button.args.command = row.command;
      
      //新增其他变量
      if (row.params_type) {
        for (const prop in row) {
          if (!row[prop] || prop == "command" || prop == "config" || prop == "params_type") {
            continue;
          }
          button.args[prop] = row[prop];
        }
      }
      if (funcKey || this.funcMap[funcKey]) {
        this.buttonLoading(this.funcMap[funcKey], button, row);
        return button.funcKey;
      }
      
      // 默认执行的函数
      this.buttonLoading(this.funcMap["default"], button, row);
      return "default";
      
    },





  }
}
</script>

有点乱，从代码中截取了一些相关片段。

以此作为记录。