寫代碼是比較枯燥的,茫茫多的業務代碼更加枯燥了,實現需求的時候,特別是一些管理平臺,無外乎一些表單、表格、彈框等,項目用的是vue + element-uijavascript
<template>
<el-dialog
:title='dialogTitle'
:visible.sync='innerVisible'
@confirm='onConfirm'
@close='onClose'
@open='onOpen'
>
<!--XXX-->
</el-dialog>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
computed: {
innerVisible: {
get() {
return this.visible
},
set(newVal) {
this.$emit('update:visible', newVal)
}
},
dialogTitle() {
// TODO: write your code
return '彈框標題'
}
},
methods: {
onConfirm() {
// TODO: write your code
},
onClose() {
// TODO: write your code
},
onOpen() {
// TODO: write your code
}
}
}
</script>
複製代碼
<template>
<el-form
ref="form"
class="form"
:model="formModel"
:rules="formRules"
:label-width="labelWidth"
>
<el-form-item
prop="label1"
label="表單項1"
>
<el-input
v-model="formModel.label1"
placeholder="請輸入"
>
</el-input>
</el-form-item>
<el-button
type="primary"
@click="onSubmit"
>
</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
labelWidth: "100px"
formModel: {
// TODO: write your code
label1: undefined
},
formRules: {
// TODO: write your code
label1: [
{ required: true, message: '不可爲空' }
]
}
}
},
components: {
// TODO: write your code
},
methods: {
onSubmit() {
this.$refs.form.validate(valid => {
if (!valid) return
// TODO: write your code
})
}
},
computed: {
// TODO: write your code
}
}
</script>
複製代碼