需求:
实现如图弹窗
上码:
<template>
<el-dialog
title="添加变量"
v-model="dialogVisible"
width="30%"
>
<el-form :model="form">
<el-form-item label="字段类型">
<el-radio-group v-model="form.type">
<el-radio label="文本">文本</el-radio>
<el-radio label="段落">段落</el-radio>
<el-radio label="下拉选项">下拉选项</el-radio>
<el-radio label="数字">数字</el-radio>
<el-radio label="给文件">给文件</el-radio>
<el-radio label="文件列表">文件列表</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="变量名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="显示名称">
<el-input v-model="form.displayName"></el-input>
</el-form-item>
<el-form-item label="最大长度">
<el-input-number v-model="form.maxLength" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.required">必填</el-checkbox>
<el-checkbox v-model="form.hidden">隐藏</el-checkbox>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="save">保存</el-button>
</div>
</el-dialog>
</template>
<script>
import { ref } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElInputNumber, ElCheckbox, ElButton } from 'element-plus';
export default {
components: {
ElDialog,
ElForm,
ElFormItem,
ElInput,
ElRadioGroup,
ElRadio,
ElInputNumber,
ElCheckbox,
ElButton
},
setup() {
const dialogVisible = ref(false);
const form = ref({
type: '文本',
name: '',
displayName: '',
maxLength: 48,
required: false,
hidden: false
});
const save = () => {
console.log('保存的表单数据:', form.value);
dialogVisible.value = false;
};
return {
dialogVisible,
form,
save
};
}
};
</script>
<style>
/* 你可以在这里添加自定义样式 */
</style>