自定义model对话框组件使用

自定义model对话框组件使用

第一步：在所在界面a.vue添加点击事件

<Button type="primary" @click="modal1 = true">弹框按钮</Button>

第二步：新建弹框内容组件界面b.vue

<!-- 弹框内容界面 -->
<template>
     <Modal
       v-model="show"
        title="题目"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>内容区</p>

    </Modal>
</template>
<script>
export default {
    data () {
        return {
            show: false
        }
    },
    methods: {
        ok () {
            this.$Message.info('Clicked ok')
        },
        cancel () {
            this.$Message.info('Clicked cancel')
        },
        openModel () {
            this.show = true
        }
    }
}
</script>
<style scoped lang="less">

</style>

第三步：在所在界面a.vue进行引入b.vue组件

       <!-- 弹框组件界面 -->
    <manual-check ref='manualCheck'></manual-check>

import manualCheck from './manualCheck'

        manualCheck () {
            console.log('kkkk')
            this.$refs.manualCheck.openModel()
        },

第四步：点击查看效果