# v-detail-value

**Repository Path**: maolinqaq/v-detail-value

## Basic Information

- **Project Name**: v-detail-value
- **Description**: 封装一个Vue自定义指令，用来显示ant-design-vue表单在只读下面的显示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-09
- **Last Updated**: 2024-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

#### 安装介绍
``` main.js
  // 注册指令并传递前端字典和其他配置信息
  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>
```