vue+element 设置弹窗_vue+element 封装弹窗

子组件：

:rules="{required: true, message: '拍品不能为空', trigger: 'blur'}"

placeholder="拍品名称"

style="width: 90%;"

>

取 消

确 定

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");

}

}

}

父组件、

import AddedEditorDialog from './components/AddedEditorDialog'

data( {

return{

//弹窗

dialogVisible: false,

dialogForm: {

name: '',

code: ''

},

}

})

:dialogForm="dialogForm"

:dialogVisible.sync="dialogVisible"

@getCancel="handleCancel"

@closeBindWarnStandard="handleCloseBindWarnStandard"

@submitForm="submitForm">

// 点击弹框下的取消

handleCancel(){

this.dialogVisible = false;

},

//关闭弹窗

handleCloseBindWarnStandard(){

this.dialogVisible = false;

},

//拍品新增、修改弹窗提交

submitForm(val) {

console.log(val)

this.dialogVisible = false;

}