elementui创建dialog组件摸板
2019-07-21 本文已影响0人
SentMes
在components文件夹下建立myModel.vue文件
<template>
<div>
<el-dialog title="收货地址" :visible.sync="visible1" :before-close="cancelModal">
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth" prop="region">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveFu">确 定</el-button>
<el-button @click="cancelModal">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props:[
'visible1'
],
data() {
return {
form: {
name: "",
region: ""
},
formLabelWidth: "100px",
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
]
}
};
},
methods: {
saveFu() {
this.$refs["form"].validate(valid => {
if (valid) {
this.$message.success('提交成功')
this.cancelModal()
}else{
this.$message.error('所有表单必须填写')
return false
}
});
},
cancelModal(){
this.$emit('update:visible1',false)
}
}
};
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<el-button type="primary" @click="jumpModel">按钮</el-button>
<my-model :visible1.sync='visible1'></my-model>
</div>
</template>
<script>
import MyModelfrom "@/component/MyModel.vue";
export default {
data() {
return {
visible1: false
};
},
components: {
MyModel
},
methods: {
jumpModel() {
this.visible1 = true;
}
}
};
</script>