Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
HyperLife1119 opened this issue Sep 24, 2021 · 10 comments · Fixed by #10871
Closed
Labels
F-vue3 Framework - Vue 3 good first issue Good for newcomers T-weapp Target - 编译到微信小程序 V-3 Version - 3.x walk-around 绕过问题
Milestone

Comments

@HyperLife1119
Copy link
Contributor

HyperLife1119 commented Sep 24, 2021

相关平台

微信小程序

复现仓库

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 
@taro-bot2 taro-bot2 bot added F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x labels Sep 24, 2021
@HyperLife1119
Copy link
Contributor Author

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

@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 4, 2021

遗漏了,我们看看

@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 9, 2021

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

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

image

image

<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
Copy link
Contributor Author

那 class 和 filter 的情况呢?

@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 9, 2021

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

这点下一个版本修复

@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 9, 2021

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

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

image

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

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

image

因此开发者可以这样绕过此问题(下个版本开始支持):

<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>

@Chen-jj Chen-jj added this to the 3.3.17 milestone Dec 9, 2021
Chen-jj added a commit that referenced this issue Dec 9, 2021
1. 可以传递 class 属性
2. 可以传递函数类型属性
@HyperLife1119
Copy link
Contributor Author

thank you

ZakaryCode pushed a commit that referenced this issue Dec 10, 2021
1. 可以传递 class 属性
2. 可以传递函数类型属性
@smoothdvd
Copy link
Contributor

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

@Chen-jj
Copy link
Contributor

Chen-jj commented Jul 9, 2022

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

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

@Chen-jj Chen-jj added good first issue Good for newcomers walk-around 绕过问题 labels Jul 9, 2022
@xavieryang2011
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-vue3 Framework - Vue 3 good first issue Good for newcomers T-weapp Target - 编译到微信小程序 V-3 Version - 3.x walk-around 绕过问题
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants