• 弹出层element ui


    <template>
    <div class="mat_addcompt">
    <el-dialog
    :visible.sync="visible"
    :show-close="false"
    width="1000px"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    class="add"
    >
    <h2 slot="title">
    <template >添加设置</template>
    </h2>
    <button
    type="button"
    aria-label="Close"
    class="el-dialog__headerbtn"
    @click.stop="cancelModal"
    >
    <i class="close"></i>
    </button>
    <!-- 表格具体内容-->
    <div>
    qwewr
    </div>
     
    <div slot="footer" class="buttons-wrap">
    <el-button type="primary" @click="">保存</el-button>
    <el-button type="primary" @click="cancelModal()">取消</el-button>
    </div>
    </el-dialog>
    </div>
    </template>
    <script>
    import httpApi from "@/api/config.js";
    export default {
    name: "SettingComponent",
    props: {
    visible: { type: Boolean, default: false },
     
    },
    data() {
    return {
     
    };
    },
    mounted() {
     

     
    },
    //创建之前
    created() {
     
    },
    //加了keepalive <component :is="组件名字"></component>
    activated() {},
    //监听
    watch: {
    //发生改变 才会执行这个函数
    currentRow() {}
    },
    methods: {
     
    cancelModal() {
    // 关闭弹窗,触发父组件修改visible值
    this.$emit("update:visible", false);
     
    },
     
    }
    };
    </script>
    <style scoped lang='scss'>
    .el-dialog__header /deep/ h2 {
    margin-top: 12px;
    font-weight: bold;
    }

    </style>
    <button @click="add">新增</button>
    父<ImportAddComponent :visible.sync="addIsShow"></ImportAddComponent>

    <script>

    import ImportAddComponent from "./BedutyImport_addcomponen";
    import api from "@/api/config";
    export default {
    name: "BedutyDaily",
    components: { ImportAddComponent },
    data() {
    return {
    addIsShow:false,
    }
    },
    methods: {
    add(){
    this.addisShow = true;
     
    }
    </script>
  • 相关阅读:
    MySQL进阶(视图)---py全栈
    py基础__socket编程
    MIPS Instruction Set
    WD-保修验证(WCC7K4ARTDF1)
    Seagate-保修验证(za25shrx)
    excel-vlookup
    ebook https://salttiger.com/category/notification/
    远程登录DSM,显示“您没有权限使用本项服务?
    tplink-如何远程WEB管理路由器?
    synology terminal
  • 原文地址:https://www.cnblogs.com/lihong-123/p/10950531.html
Copyright © 2020-2023  润新知