1. 程式人生 > >vue+element 封裝彈窗

vue+element 封裝彈窗

子元件:

<template>
    <el-dialog title="" :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandard" width="500px">
        <el-form label-width="100px">
            <el-form-item prop="name" label="拍品">
                <el-input v-model.trim="dialogForm.name" 
                    :rules="{required: true, message: '拍品不能為空', trigger: 'blur'}" 
                    placeholder="拍品名稱" 
                    style="width: 90%;"
                    >
                </el-input>
            </el-form-item>
            <el-form-item prop="code" label="拍品程式碼">
                <el-input v-model.trim="dialogForm.code" placeholder="拍品程式碼" style="width: 90%;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">確 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
          props: {
            dialogVisible: {
                type: Boolean,
            },
            dialogForm: {
                type: Object,
            }
          },
          created(){
              console.log(this.dialogForm)
          },
          computed: {
          },
        methods: {
            //提交
            submitForm(val) {
                this.$emit('submitForm',this.dialogForm)
                //console.log(this.handleType)
            },
            //關閉彈窗
            handleCancel(){
                this.$emit('getCancel')
            },
            //關閉彈窗,不可以刪這個方法。不用這個方法點選遮罩層關閉會報錯
            handleCloseBindWarnStandard() {
                this.$emit("closeBindWarnStandard");
            }
        }
    }
</script>

 

 

父元件、
import AddedEditorDialog from './components/AddedEditorDialog'

data( {

    return{
            //彈窗
            dialogVisible: false,
            dialogForm: {
                name: '',
                code: ''
            },   

 }

})

<!--新增、編輯-->
        <added-editor-dialog 
            :dialogForm="dialogForm"
            :dialogVisible.sync="dialogVisible" 
            @getCancel="handleCancel" 
            @closeBindWarnStandard="handleCloseBindWarnStandard" 
            @submitForm="submitForm">
        </added-editor-dialog>


        // 點選彈框下的取消
        handleCancel(){
            this.dialogVisible = false;
        },
        //關閉彈窗
        handleCloseBindWarnStandard(){
            this.dialogVisible = false;
        },
        //拍品新增、修改彈窗提交
        submitForm(val) {
            console.log(val)
            this.dialogVisible = false;

    &nbs