0.1.0 • Published 9 months ago

v-detail-value v0.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

封住了一个基于ant-design-vue的a-form相关的指令,想要通过简单设置一些属性,将表单设置为只读,同时友好显示a-select、a-radio、a-date-picker等组件的只读状态

安装介绍

  // 注册指令并传递前端字典和其他配置信息
  Vue.use(vDetailValue, {
    getServerDictApi,
    frontendDict
  });

  getServerDictApi,  // 获取远程字典的方法,如果字典表没有对应的数据,将会调用这个方法来获取
  frontendDict  // 前端字典表,可以配置在某个文件里面,我将会把它放在Map里面,例如:frontendDict.get('yesOrNo')

export default (optionName) => {
    return Promise.resolve(serverData[optionName])
}
使用示例(通过readOnly控制的)
  • 直接使用直接绑定到value属性上
    <a-input v-model="userForm.name" v-detail="{ readOnly, value: userForm.name }" />
  • select、radio等可以依靠options设置备选项的,都通过options和value对应来显示,这时候options就是必传的,这里的$localDict是我添加到Vue.prototype上面的,其实就是前端字典,这里只是为了方面使用
    <a-select
          v-model="userForm.isStudent"
          :options="$localDict.get('yesOrNo')"
          v-detail="{ readOnly, value: userForm.isStudent, isBorder: false, options: yesOrNoOptions }"
        >
  • select、radio 等的options可能来自数据库而不是本地字典,这时候使用optionName异步获取字典表,optionName也可以拿到本地字典
    <a-select
          v-model="userForm.reachPlace"
          :options="provinceOptions"
          mode="multiple"
          v-detail="{ readOnly, value: userForm.reachPlace, optionName: 'province', multiply: true }"
        >
        </a-select>
0.1.0

9 months ago