2021-05-11

vue-types 自定义类型检查 类似与react proptypes

https://dwightjack.github.io/vue-types/guide/validators.html#native-validators

下面开始学习，因为刚学vue所以可能有地方会说错抱歉。

安装

npm install vue-types@3 --save

export default defineComponent({
    name:'Child',
    props:{
        id:number().def(10).isRequired,
        status:oneOf(["open","close"]).def("open")
    },
    setup(props){
        console.log(props.id)
        console.log(props.status)
    }
})

不会报错 只是会报警告，这应该很容易理解按原来的vue也能实现最笨的就是外部写TS文件然后在setup里面去检验配合enum来确定值是否符合 你最好用return来传递值，在html上传始终是string值，ArrayOf检验泛型数组

const getTen=(num:any)=>num>10
export default defineComponent({
    name:'Child',
    props:{
        id:number().validate(getTen).isRequired,

theProp: custom(minLength),

自定义检测 设置函数

import VueTypes from 'vue-types'

就是Vue里面的函数就不多说了

Extending VueTypes

注意，如果getter===false，传递给validator函数的参数将与prop值一起传递给validator方法：（下面我就复制代码了）

VueTypes.extend({
  name: 'negative',
  getter: true,
  type: Number,
  validator: (v) => v < 0,
})

const negativeProp = VueTypes.negative

// as a configurable method
VueTypes.extend({
  name: 'negativeFn',
  type: Number,
  validator: (v) => v < 0,
})

const negativeProp2 = VueTypes.negativeFn() /

 getter为true并且内部没有validator的时候你可以在外部自行比较

createTypes创建自己的类型，其余大家看文档应该都能看懂吧