相关平台
字节跳动小程序
小程序基础库: 2.85.0.5
使用框架: Vue 3
复现步骤
<button disabled>Click</button> 不能禁用按钮
<button :disabled="true">Click</button> 可以禁用按钮
期望结果
<button disabled>Click</button> 可以禁用按钮
实际结果
<button disabled>Click</button> 不能禁用按钮
环境信息
👽 Taro v3.6.6
Taro CLI 3.6.6 environment info:
System:
OS: macOS 13.3.1
Shell: 5.2.15 - /opt/homebrew/bin/bash
Binaries:
Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
Yarn: 1.22.19 - ~/Library/pnpm/yarn
npm: 9.6.2 - ~/Library/pnpm/npm
npmPackages:
@tarojs/cli: 3.6.6 => 3.6.6
@tarojs/components: 3.6.6 => 3.6.6
@tarojs/helper: 3.6.6 => 3.6.6
@tarojs/plugin-framework-vue3: 3.6.6 => 3.6.6
@tarojs/plugin-platform-alipay: 3.6.6 => 3.6.6
@tarojs/plugin-platform-h5: 3.6.6 => 3.6.6
@tarojs/plugin-platform-jd: 3.6.6 => 3.6.6
@tarojs/plugin-platform-qq: 3.6.6 => 3.6.6
@tarojs/plugin-platform-swan: 3.6.6 => 3.6.6
@tarojs/plugin-platform-tt: 3.6.6 => 3.6.6
@tarojs/plugin-platform-weapp: 3.6.6 => 3.6.6
@tarojs/runtime: 3.6.6 => 3.6.6
@tarojs/shared: 3.6.6 => 3.6.6
@tarojs/taro: 3.6.6 => 3.6.6
@tarojs/webpack5-runner: 3.6.5 => 3.6.5
babel-preset-taro: 3.6.6 => 3.6.6
eslint-config-taro: 3.6.6 => 3.6.6
9条答案
按热度按时间7hiiyaii1#
文档应该有说明的
hivapdat2#
https://docs.taro.zone/docs/vue-overall
为什么会有这种限制？
xwbd5t1u3#
https://docs.taro.zone/docs/vue-overall
为什么会有这种限制？
严格来说，这是小程序框架本身的限制，为了减少不必要错误，还是不简写的好https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html#%E5%85%B3%E9%94%AE%E5%AD%97-%E9%9C%80%E8%A6%81%E5%9C%A8%E5%8F%8C%E5%BC%95%E5%8F%B7%E4%B9%8B%E5%86%85
o8x7eapl4#
@AdvancedCat 但是 vue 里用 jsx 的简写：
<Button disabled>Click</Button>就可以生效呢，只是在模板里用简写不行x7yiwoj45#
两者不同的原因应该跟使用的 webpack loader 不同有关：
.vue文件会使用vue-loader进行解析，vue-loader 内部会使用@vue/compiler-core的parseAttribute函数，最终会把 template 中disabled属性值解析为undefined.js的 JSX 写法，使用的是babel-plugin-jsx插件解析，内部会调用buildProps将disabled解析为true至于，为啥有这个差别，我就不得而知了
9gm1akwq6#
Taro 规范设置的 Boolean 类型不支持简写，应该也是跟
vue-loader这个 loader 解析特性有关系dffbzjpn7#
两者不同的原因应该跟使用的 webpack loader 不同有关：
.vue文件会使用vue-loader进行解析，vue-loader 内部会使用@vue/compiler-core的parseAttribute函数，最终会把 template 中disabled属性值解析为undefined.js的 JSX 写法，使用的是babel-plugin-jsx插件解析，内部会调用buildProps将disabled解析为true至于，为啥有这个差别，我就不得而知了
@AdvancedCat 解析成
undefined确实很奇怪，解析成''是正常的，如果 prop 是boolean类型的话，''被转成true是正常的，详见 vuejs/core#1238 (comment) ，是不是 taro 这里调用的函数不对呢f45qwnt88#
我打了断点在源码中 AST 对应的这个 disabled 属性的 value 为 undefined 的，但之后会有 generate(ast) 的过程，应该在那里又将其变为空字符串了。是符合逻辑的。
pprl5pva9#
我打了断点在源码中 AST 对应的这个 disabled 属性的 value 为 undefined 的，但之后会有 generate(ast) 的过程，应该在那里又将其变为空字符串了。是符合逻辑的。
@AdvancedCat在 prop 类型为
boolean时，vue 会把''转换成true，vue 的设计是这样，taro 可不可以也这样实现呢