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

时间：2024-10-27 07:51:38

目录

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

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

 

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

按钮：<el-button>

弹窗：<log-dialog>

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

<log-dialog : :="LogDialogVisible" title="下载日志" />


<!-- @click="LogDialogVisible = true"  : 点击，让弹窗可见（visible）-->
<script>
import LogDialog from "./child-comps/";  //导入弹窗组件

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

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

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


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

<log-dialog : :="LogDialogVisible" title="下载日志" />
<script>
import LogDialog from "./child-comps/";  //导入弹窗组件

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



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





  }
}
</script>

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

以此作为记录。

相关文章