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