NavieUI(一)

我现在的项目是vue3+Vite+TS+NavieUI开发的，记录一下遇到的问题。— 不定时更新

1.表单 Form，定义验证规则。

• navie-ui写了如果你需要为一个值为 number 类型的表项设定 required，你需要在 rule 对象中设定 type: number。

const rules: FormRules = {
	pageSize: {
        type: 'number',
        required: true,
        trigger: ['blur', 'change'],
        message: '请输入页数'
	}
}
1
2
3
4
5
6
7
8

• 但是我使用 n-cascader这个组件的时候发现不管怎么修改，验证都有问题，最后发现我的数据其实是数组，解决方法如下。

const rules: FormRules = {
	Array: {
        type: 'array',
        required: true,
        trigger: ['blur', 'change'],
        message: '请选择数据'
    }
}
1
2
3
4
5
6
7
8

2.表单 Form，外置标签。

• Form写标签名的时候，需要将label做成复选框的样式，记录一下写法。

<n-form-item label-align="left">
	<template #label>
		//这里写其他样式也可以
		<n-checkbox v-model:checked="learnTime">
			强制学习时长
		</n-checkbox>
	</template>
	<n-input-number placeholder="请输入学习时长"/>
</n-form-item>
1
2
3
4
5
6
7
8
9

3.日期选择器 Date Picker，时间范围。

• 项目的某个部分，时间选择要求只能选择一个月内的时间，日期选择器中的禁用特定时间比较符合这个功能的要求。
• DateTime类型的Props有：
• is-date-disabled 日期禁用的校验函数—年月日
• is-time-disabled 时间禁用的校验函数—时分秒

因为我只需要要求用户选择的时间在一个月内即可，所以只用使用is-date-disabled，代码如下：

<n-date-picker
	......
	:is-date-disabled="isRangeDateDisabled"
/>
// 日期禁用的校验函数
const isRangeDateDisabled = ( ts: number, type: 'start' | 'end', range: [number, number] | null) => {
    if (type === 'start' && range !== null) {
      return (
        dayjs(range[1]).format('MM') !== dayjs(ts).format('MM')
      )
    }
    if (type === 'end' && range !== null) {
      return (
        dayjs(range[0]).format('MM') !== dayjs(ts).format('MM')
      )
    }
    return false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18