Element-ui 中dialog的使用方法 2021-04-04
<template>
<div>
<el-button type="text" @click="dialogFormVisible = true">打開嵌套表單的 Dialog</el-button>
<el-dialog title="收貨地址" :visible.sync="dialogFormVisible" @closed="handleClose">
<el-form :model="form" :rules="rules" ref="ruleForm">
<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">
<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 @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSave">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px',
rules: {
name: [
{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
]
}
}
},
methods: {
handleClose () {
this.$refs.ruleForm.resetFields()
this.form = {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
},
handleSave () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log('輸入正確')
this.dialogFormVisible = false
} else {
console.log('輸入錯誤')
}
})
}
}
}
</script>
<style lang="less" scoped>
</style>