策略模式 (建议复制编辑器查看更佳)
在给定的 Vue.js 组件代码中，根据optionKey的不同值，展示了不同的表单内容并定义了不同的表单验证规则。在这里，optionMap对象内部定义了不同的策略（addAccount、editAccount、editPassword），每个策略包含了不同的表单类型列表和表单验证规则。根据当前的optionKey值，页面会展示相应的表单内容，并应用相应的验证规则。这样的设计允许在不同的场景下使用不同的策略，而无需修改主要的逻辑。这种方式带来了可扩展性和易维护性，当您需要添加新的表单类型或不同的验证规则时，只需简单地往optionMap对象内添加新的策略即可。
应用场景: 我们可以先写好多个不同的表单类型和验证规则，然后根据不同的场景我们可以直接通过策略分配，通过组合不同的表单项目从而搭建不一样的表单集合，以及可以根据场景的不同调用不同的校验规则。
优点：这样的设计允许在不同的场景下使用不同的策略，而无需修改主要的逻辑。这种方式带来了可扩展性和易维护性，使得代码更具有扩展性和灵活性，当您需要添加新的表单类型或不同的验证规则时,只需简单地往optionMap对象内添加新的策略即可。
栗子
VueDOM结构
javascript<!-- optionMap[optionKey].title:是标题 --> <!-- optionMap[optionKey].formRules:校验规则 --> <!-- optionMap[optionKey].formRules:校验规则 --> <!-- optionMap[optionKey].typeList: 是否显示对应的权限组 可以进行自由搭配--> <!-- 思路就是: 根据点击事件动态设置optionKey的状态 然后去取对应策略 --> <el-dialog destroy-on-close v-model="dialogVisible" :title="optionMap[optionKey].title" width="500" @close="resetForm(formRef)"> <el-form ref="formRef" style="max-width: 600px" :rules="optionMap[optionKey].formRules" :model="userForm" label-width="auto" class="demo-ruleForm"> <el-form-item v-if="optionMap[optionKey].typeList.includes('姓名')" label="姓名" prop="nickName"> <el-input v-model.trim="userForm.nickName" type="text" placeholder="请输入姓名" show-word-limit maxlength="20" /> </el-form-item> <el-form-item v-if="optionMap[optionKey].typeList.includes('账户')" label="账户" prop="userName"> <el-input v-model.trim="userForm.userName" type="text" placeholder="请输入账户" show-word-limit maxlength="20"> <template #prepend> </template></el-input> </el-form-item> <el-form-item v-if="optionMap[optionKey].typeList.includes('新密码')" label="新密码" prop="password"> <el-input v-model.trim="userForm.password" type="text" placeholder="请输入新密码" /> </el-form-item> <el-form-item v-if="optionMap[optionKey].typeList.includes('确认密码')" label="确认密码" prop="conPassword"> <el-input v-model.trim="userForm.conPassword" type="password" placeholder="请确认密码" /> </el-form-item> <el-form-item v-if="optionMap[optionKey].typeList.includes('手机号')" label="手机号" prop="phonenumber"> <el-input v-model.trim="userForm.phonenumber" type="iPhone" placeholder="请输入手机号" /> </el-form-item> <el-form-item v-if="optionMap[optionKey].typeList.includes('备注')" label="备注" prop="remark"> <el-input v-model.trim="userForm.remark" show-word-limit rows="4" resize="none" type="textarea" maxlength="200" placeholder="请输入备注" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button class="butClass" @click="submitForm(formRef, optionMap[optionKey].title)">确定</el-button> <el-button @click="resetForm(formRef)">取消</el-button> </div> </template> </el-dialog>
JS策略
javascript
const optionKey = ref('addAccount');
const optionMap: any = {
addAccount: {
title: '添加账户',
typeList: ['姓名', '账户', '新密码', '手机号', '备注'],
formRules: {
userName: [{ required: true, message: '账户必填', trigger: 'blur' },
{ required: true, validator: validateAccount, trigger: 'blur' }
],
nickName: [{ required: true, message: '姓名必填', trigger: 'blur' }],
password: [{ required: true, message: '密码必填', trigger: 'blur' },
{ required: true, validator: validateInput, trigger: 'blur' }
],
phonenumber: [{ required: true, message: '手机号必填', trigger: 'blur' },
{ required: true, validator: validatePhoneNumber, trigger: 'blur' }
],
},
},
editAccount: {
title: '修改账户',
typeList: ['姓名', '账户', '手机号', '备注'],
formRules: {
userName: [{ required: true, message: '账户必填', trigger: 'blur' },
{ required: true, validator: validateAccount, trigger: 'blur' }
],
nickName: [{ required: true, message: '姓名必填', trigger: 'blur' }],
phonenumber: [{ required: true, message: '手机号必填', trigger: 'blur' },
{ required: true, validator: validatePhoneNumber, trigger: 'blur' }
],
},
},
editPassword: {
title: '修改密码',
typeList: ['新密码', '确认密码'],
formRules: {
password: [{ required: true, message: '密码必填', trigger: 'blur' },
{ required: true, validator: validateInput, trigger: 'blur' }
],
conPassword: [{ required: true, validator: validatePass, message: '两次密码不一样' }],
},
},
};