zoukankan      html  css  js  c++  java
  • element抽屉的再次封装

    平时用element比较多,里边的有个抽屉的插件,我们的项目一般用这个功能的时候,都会再里边加个确定,取消按钮,所以就需要封装一下,方便使用

     <el-dialog :visible.sync="visibleDialog">
        <!--内容区域的默认插槽-->
        <slot></slot>
        <span>
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">
                确 定
          </el-button>
        </span>
      </el-dialog>
    
    <script>
    export default {
      props: {
        // 显示隐藏弹框
        visible: {
          type: Boolean,
          default: false
        }
      },
      computed: {
        // 通过计算属性,对.sync进行转换,外部也可以直接使用visible.sync
        visibleDialog: {
          get() {
            return this.visible;
          },
          set(val) {
            this.$emit("update:visible",val);
          }
        }
      },
      methods: {
        // 取消事件
        handleCancel() {
          this.$emit("cancel");
        },
        // 确定事件
        handleConfirm() {
          this.$emit("confirm");
        }
      }
    };
    </script>

    调用的话

    <custom-dialog
        :visible.sync="visibleDialog"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      >
        这是一段内容
      </custom-dialog>
  • 相关阅读:
    委托&指针函数&回调函数
    Unity animation笔记1
    hadoop源码编译
    protocbuf的安装
    学习hadoop不错的一些文章
    moven的安装
    在Linux上安装与配置Hadoop
    linux tar命令详解
    How to contribute to hadoop common
    Ubuntu下SVN的安装
  • 原文地址:https://www.cnblogs.com/yanyanliu/p/13584782.html
Copyright © 2011-2022 走看看