vant-weapp 无法绑定 readonly，class 等以关键字命名的属性到组件

[HyperLife1119]

相关平台

微信小程序

复现仓库

https://github.com/HyperLife1119/taro-issue
小程序基础库: 2.19.4
使用框架: Vue 3

复现步骤

编译到微信小程序查看结果

相关代码：

<van-field :readonly="true" :value="msg" label="姓名" maxlength="30" />
<van-button class="my-cls" type="primary">按钮</van-button>
<van-datetime-picker type="datetime" :filter="filter" />

期望结果

1. van-field 组件绑定了 readonly 属性为 true，van-field 应不能进行编辑
2. van-button 组件绑定了 class 属性，编译后应该保留 class 属性
3. van-datetime-picker 组件绑定 filter 属性，van-datetime-picker 应该可以使用传递过来的过滤器函数。详见

实际结果

1. van-field 组件绑定了 readonly 属性为 true，van-field 仍然可以编辑
2. van-button 组件绑定了 class 属性，编译后 class 属性丢失
3. van-datetime-picker 组件绑定了 filter 属性，但实际并没有把 filter 函数传递给 van-datetime-picker 组件

环境信息

👽 Taro v3.3.7


  Taro CLI 3.3.7 environment info:      
    System:
      OS: Windows 10
    Binaries:
      Node: 16.1.0 - D:\Node.js\node.EXE
      npm: 7.21.0 - D:\Node.js\npm.CMD 

[HyperLife1119]

为什么没人理这个 issue 呢？ @Chen-jj

[Chen-jj]

遗漏了，我们看看

[Chen-jj]

van-field 组件绑定了 readonly 属性为 true，van-field 仍然可以编辑

断点进入 Vue3 patch DOM 的部分，可以发现对于 readonly 这个保留词，Vue 在设置 attribute 时，会设置空字符串，相当于：dom.setAttribute('readonly', '')。因此你只能手动调用 setAttribute，而不通过 Vue 去设置。

<template>
  <view class="index">
    <van-field ref="field" :value="msg" label="姓名" maxlength="30" />
  </view>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const field = ref()
    onMounted(() => {
      // 手动 setAttribute
      const el = field.value
      el.setAttribute('readonly', true)
    })
    return {
      field
    }
  }
}
</script>

[HyperLife1119]

那 class 和 filter 的情况呢？

[Chen-jj]

van-button 组件绑定了 class 属性，编译后 class 属性丢失

这点下一个版本修复

[Chen-jj]

van-datetime-picker 组件绑定了 filter 属性，但实际并没有把 filter 函数传递给 van-datetime-picker 组件

实际上 Taro 是有把该函数进行 setData 的：

但可能小程序没有很好地适配这种 setData 写法，令到最终这个 filter 是 undefined。

试了一下，只有这样 setData，才能正确设置 function：

因此开发者可以这样绕过此问题（下个版本开始支持）：

<template>
  <view class="index">
    <van-datetime-picker type="datetime" :filter="filter" />
  </view>
</template>

<script lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'

export default {
  setup() {
    const filter = ref()
    return {
      msg,
      filter
    }
  },
  onReady () {
    Taro.nextTick(() => {
      console.log('nexttick: ', )
      this.filter = (type: string, options: number[]) => {
        if (type === 'minute') {
          return options.filter(option => option % 5 === 0);
        }
        return options;
      };
    })

  }
}
</script>

[HyperLife1119]

thank you

[smoothdvd]

@Chen-jj React里怎么修复这个问题？

[Chen-jj]

@Chen-jj React里怎么修复这个问题？

React 里的 hack 写法：#8495 (comment)

[xavieryang2011]

calendar组件里面的formatter函数没法传递，这个怎么解决？