zoukankan      html  css  js  c++  java
  • ivew 封装删除 对话框

    封装的组件

    <template>
      <Modal footer-hide  :closable="false" title="删除确认" v-model="modalShow" :styles="{top: '20px'}">
        <div style="text-align:center">
          <p>你确定删除吗?</p>
        </div>
        <Divider />
        <div style="display: flex;flex-direction: row;justify-content:space-between;">
          <Button @click="$emit('cancelModel')">取消</Button>
          <Button type="primary" @click="$emit('okModel')">删除</Button>
        </div>
      </Modal>
    </template>
    <script>
    export default {
      name: "deletemodal",
      props: {
        modalShow: Boolean
      }
    };
    </script>

    组件引入

    import DeleteModel from "../../components/DeleteModel/DeleteModel";
    
      components: {
        DeleteModel
      },

    使用组件

     <DeleteModel :modalShow="modalShow" @cancelModel="cancelModel" @okModel="okModel" />

    数据:

         modalShow: false,

    子组件传递给父组件的方法的实现

       cancelModel() {
          this.modalShow = false;
        },
        okModel() {
          this.modalShow = false;
          var arr = [];
          arr.push(this.roleId);
          deletcile(arr)
            .then(res => {
              this.$Message.success(res.data.msg);
              this.reload();
            })
            .catch();
          // console.log(e);
        },

    效果:

  • 相关阅读:
    (7)常量和变量
    (6)python基础数据类型
    PEP8规范
    (5)原码反码补码
    (4)二八十六进制转换
    (3)你的第一个python程序
    (2)python开发环境搭建
    几种常见的开发语言对比
    (1)python的基础认知
    (25)线程---local数据隔离
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/11357000.html
Copyright © 2011-2022 走看看