v-model

okam 从 okam-core: 0.4.8， okam-build: 0.4.11 版本开始支持

提供对表单组件及自定义组件 v-model 支持，默认不开启，需在配置项中，配置 v-model 支持

  1. {
  2.     framework: [
  3.         // ...
  4.         'model'
  5.         // ...
  6.     ]
  7. }

支持项

组件 百度 微信 支付宝 头条 快应用 相对应的事件类型
input √ √ √ √ x input
textarea √ √ √ √ x input
picker √ √ √ √ x change
switch √ √ √ √ x change
checkbox-group √ √ √ √ x change
radio-group √ √ √ √ x change
自定义组件 √ √ √ x x change(默认)

1.指令为 v-model，而不是像基础指令一样为 model，这样是以防止与原生或用户属性冲突;

2.想要 让所有指令保证统一 推荐开启 v- 指令支持, 详见;

原生组件使用

!>
1.不支持在 radio 、checkbox 上直接使用 v-model, 搭配 radio-group, checkbox-group 才能使用。

2.radio-group, checkbox-group 使用 v-model 时，初始值需要根据场景情况手动处理。

3.如果用了 v-model 建议不要再监听多个对应的事件类型

示例：

  1. // input
  2. <input v-model="input1"/>
  4. // picker
  5. <picker
  6.     v-model="timeVal"
  7.     mode="time">
  8.     <view class="picker">
  9.         当前选择: {{timeVal}}
  10.     </view>
  11. </picker>
  13. // switch
  14. <switch name="switch1" v-model="switchVal"></switch>
  16. // checkbox-group
  17. <checkbox-group v-model="checkboxVal">
  18.     <label for="item in items">
  19.         <checkbox :value="item.name"/>
  20.         {{item.value}}
  21.     </label>
  22. </checkbox-group>
  24. // radio-group
  25. <radio-group v-model="radioVal">
  26.     <label for="item in items">
  27.         <radio :value="item.name"/>
  28.         {{item.value}}
  29.     </label>
  30. </radio-group>
  32. // 自定义组件
  33. <model-component v-model="componentVal" />

自定义组件使用

在小程序里，默认自定义组件上的 v-model 会利用 props 名为 value、 事件名为 change、event.detail本身值来进行处理；

以 一个 model-component 自定义组件为例:

  1. <template>
  2.     <view class="model-component-wrap">
  3.         <view>
  4.             自定义组件内部props: {{value}}
  5.         </view>
  6.         <view>
  7.             自定义组件内部data: {{valueInner}}
  8.         </view>
  9.         <input v-model="valueInner" @input="change"/>
  10.     </view>
  11. </template>
  12. <script>
  13. export default {
  14.     data: {
  15.         valueInner: ''
  16.     },
  17.     props: {
  18.         value: String
  19.     },
  20.     mounted() {
  21.         // 不要直接在内部变更 外部传入的 `props` 值
  22.         this.valueInner = this.value;
  23.     },
  24.     methods: {
  25.         change(event) {
  26.             this.$emit('change', event.detail.value);
  27.         }
  28.     }
  29. }
  30. </script>
  31. <style lang="stylus">
  32. // ...
  33. </style>

现在在这个组件上使用 v-model ：

  1. <model-component v-model="componentVal" />

组件自定义配置支持

在小程序中，自定义组件还可以通过配置构建配置项 component.template.modelMap 来进行支持定制化配置

配置项说明:

  • modelMap: Object 自定义组件 v-model 配置项
  • modelMap.default: Object 变更 自定义组件的 v-model 默认配置项
    • modelMap.default.event: string 必填 事件类型
    • modelMap.default.prop: string 必填 对应 props 的属性名
    • modelMap.default.detailProp: string 选填 event.detail 上的属性名，如果是 event.detail 则不填
  • modelMap.xxx: Object 变更 特定组件的 v-model 特殊配置项 xxx 表示组件具体标签名
    • modelMap.xxx.event: string 必填 事件类型
    • modelMap.xxx.prop: string 必填 对应 props 的属性名
    • modelMap.xxx.detailProp: string 选填 event.detail 上的属性名，如果是 event.detail 本身 则不填

如果有以下任一情况可进行自定义配置来支持 v-model

  • 想进行 v-model 绑定的 props 值并非 value
  • 对应的事件类型并非 change
  • 想获取的 event.detail 并非 event.detail 本身 而是里面的某一属性值

如 sp-model-component 组件

  1. <template>
  2.     <view class="sp-model-component-wrap">
  3.         <view if="show">
  4.             <view @click="close">关闭</view>
  5.             <text>content</text>
  6.         </view>
  7.     </view>
  8. </template>
  9. <script>
  10. export default {
  11.     props: {
  12.         show: Boolean
  13.     },
  14.     methods: {
  15.         close(event) {
  16.             this.$emit('spchange', {
  17.                 show: false
  18.             });
  19.         }
  20.     }
  21. }
  22. </script>
  23. <style lang="stylus">
  24. // ...
  25. </style>

直接写是不生效的

  1. // 不生效
  2. <sp-model-component v-model="componentVal" />

分析可知 对应的取值

  • 属性名: show
  • 事件类型：spchange
  • 事件 event.detail上的属性名：为 show 的值

因此在 x.config.js 加上如下配置， 可使 v-model 写法生效

  1. {
  2.     template: {
  3.         modelMap: {
  4.             'sp-model-component': {
  5.                 // 必填 事件类型
  6.                 event: 'spchange',
  7.                 // 必填 对应 props 的属性名
  8.                 prop: 'show',
  9.                 // 选填 `event.detail` 上的属性名，如果是 event.detail 本身, 则不填
  10.                 detailProp: 'show'
  11.             }
  12.         }
  13.     }
  14. }
  1. // 生效
  2. <sp-model-component v-model="componentVal" />

在 okam 中， v-model 是利用属性值 + 相应事件搭配使用进行实现的，如果想更多的原生组件支持，也可以通过配置 component.template.modelMap 来支持
如：让支持 slider 支持 v-model 写法，可在 x.config.js 里加上如下配置即可：

  1. {
  2.     template: {
  3.         modelMap: {
  4.             'slider': {
  5.                 // 必填 事件类型, 此处 change 还是 changing，可根据自身场景进行配置
  6.                 event: 'change',
  7.                 // 必填 对应 props 的属性名
  8.                 prop: 'value',
  9.                 // 选填 `event.detail` 上的属性名，如果是 event.detail 本身, 则不填
  10.                 detailProp: 'value'
  11.             }
  12.         }
  13.     }
  14. }
  1. // 使用
  2. <slider v-model="sliderVal"></slider>