01
前言
新年新气象，2022伊始，VueAdminWorkP版本也迎来了新年第一次升级。增加了几个好用的功能和组件。
同时，借此机会也向大家说两个好消息
02
VueAdminWorkP升级说明
- 新增：`VawVerifySimple`滑动验证组件，用于登录的时候进行简单的验证
在之前的登录页面中，只有一个简单的用户名和密码组件，没有一个验证功能，可能会在一定程度上降价系统的安全性。同时也有小伙伴提出了此功能，所以借此机会把这个验证组件添加到项目中。
具体位置在: `src/components/common/VerifySimple.vue`。效果如下
- 新增：`FormItem`类型新增`optionItemsRef?:Ref<Array<SelectOptionItem | TreeSelectOption>>` 属性，方便在在异步获取 下拉选项的时候，动态添加数据。
方便在FormItem `select` 选项是动态的时候，可以异步添加 select 选项。
代码如下：
代码语言：javascript复制// 定义
export interface FormItem extends TableSearchItem {
required?: boolean
validator?: (value: FormItem, message: MessageApi) => boolean
hidden?: boolean
inputType?: string
maxLength?: number
rows?: number
disabled?: Ref<boolean> | boolean
optionItems?: Array<SelectOptionItem | TreeSelectOption>
optionItemsRef?: Ref<Array<SelectOptionItem | TreeSelectOption>>
path?: string
reset?: (formItem: FormItem) => void
render?: (formItem: FormItem) => VNode
}
// 具体使用场景参考 `base-form-view.vue` 文件，部分源码如下
const formItems = [
……
{
label: '起止地点',
key: 'address',
value: ref(null),
optionItemsRef: ref([]),
render: (formItem) =>
renderSelect(formItem.value, formItem.optionItemsRef!.value as SelectOption[], {
placeholder: '请选择会议地点',
clearable: true,
}),
},
……
] as FormItem[]
setTimeout(() => {
const tempItem = formItems.find((it) => it.key === 'address')
tempItem!.optionItemsRef!.value = [
{
label: '会议一室',
value: 1,
},
{
label: '会议二室',
value: 2,
},
{
label: '会议三室',
value: 3,
},
{
label: '会议四室',
value: 4,
},
]
}, 3000)- 优化：`权限按钮` 展示位置时是 `default`，（default 默认是所有位置都展示） `top` 和 `tablLine` 都展示
- 微调：`main.vue` 和 `work-place.vue` 块样式 和 间距
- 修复：`menu.vue`页面中没有`onPermissionButtonClick` 的 bug
- 优化：增大 `setting` 页面 `z-index` 的比重
03
好消息
- 为了方便使用 VueAdminWork框架，现在VueAdminWork官网开放 Arco Work版的操作文档。大家可以去官网进行查看，目前文档还正在编写中，Arco Work版本写完之后会继续编写其它版本的文档，敬请期待。官网地址如下 http://www.vueadminwork.com/
- 一直以来想把Vue中常用的功能都封装成一个个简单的组件。随着VueAdminWork用户使用不断增加，此工程也已经提上日程。 VueAdminWork官网中也新增了 "物料" 功能。目前正在研发不同的组件。后期会不断更新新的好用的组件。 到时，大家可以下载不同的组件然后集成到项目中，这样可以方便快速的完成功能的开发。
