Comments (5)
其实没有必要这么痛苦的采用目前的解决方式,Vue 有几种在 template 中原生支持的写法来帮你替换掉把 class name 写在 computed 里的需求。
第一种:
<vue-component :class="type === 'news' ? 'w-[220rpx]' : 'w-[340rpx]'"/>
第二种
<vue-component :class="{
'w-[220rpx]': type === 'news',
'w-[340rpx]': type !== 'news'
}"/>
本插件对这两种情况都做了兼容性处理,所以你可以优先考虑这两种写法。
至于到底能不能对 computed
甚至 ref
一并做兼容处理,我觉得逻辑上是可以的,但从性能上来说,兼容这两种 edge case 将会对性能造成很大的牺牲。因为插件本来只需要解析 template 部分的 AST 现在为了兼容 edge case 需要解析所有的 script,一方面有限的计算资源会被浪费,另一方面容易“误伤” script block 里的非 Tailwind 变量,会把本来并非用在 Tailwind CSS 中的字符串转译,造成程序 crash 或 bug 都是可能的。
所以我目前并没有打算对 computed
的值做兼容,如果有很多人都有这个需求的话,我或许会考虑在未来让开发者手动在 computed
字符串中加入 flag 来向插件示意该字符串需要被转译。
from mini-program-tailwind.
其实没有必要这么痛苦的采用目前的解决方式,Vue 有几种在 template 中原生支持的写法来帮你替换掉把 class name 写在 computed 里的需求。 第一种:
<vue-component :class="type === 'news' ? 'w-[220rpx]' : 'w-[340rpx]'"/>
第二种
<vue-component :class="{ 'w-[220rpx]': type === 'news', 'w-[340rpx]': type !== 'news' }"/>
本插件对这两种情况都做了兼容性处理,所以你可以优先考虑这两种写法。
至于到底能不能对
computed
甚至ref
一并做兼容处理,我觉得逻辑上是可以的,但从性能上来说,兼容这两种 edge case 将会对性能造成很大的牺牲。因为插件本来只需要解析 template 部分的 AST 现在为了兼容 edge case 需要解析所有的 script,一方面有限的计算资源会被浪费,另一方面容易“误伤” script block 里的非 Tailwind 变量,会把本来并非用在 Tailwind CSS 中的字符串转译,造成程序 crash 或 bug 都是可能的。 所以我目前并没有打算对computed
的值做兼容,如果有很多人都有这个需求的话,我或许会考虑在未来让开发者手动在computed
字符串中加入 flag 来向插件示意该字符串需要被转译。
是的,目前简单的类名控制也是通过你所举例的方式进行处理,只是非不得已需要使用到 computed 进行处理的时候就会出现这个问题,目前我是在业务里封装了一个函数对这些类名进行了转换。
from mini-program-tailwind.
这么说的话,或许我可以暴露一个最小化的处理方法,目前暴露的方法比如 handleTemplate
还不是最小化的,应该新增暴露一个 handleTemplateToken
来让开发者自己在 computed
这种场景中自由使用。
const className = handleTemplateToken('w-[220rpx]') // return 'w--220rpx-'
from mini-program-tailwind.
可以的,这种场景交给开发者自己处理没毛病。
from mini-program-tailwind.
我这周更新一下这个方法
from mini-program-tailwind.
Related Issues (20)
- 使用vscode开发没有tailwindcss的代码提示 HOT 1
- windicss 不维护了, 可以支持tailwindcss吗? HOT 2
- 偶现类名失效,app.wxss里没有对应类名 HOT 5
- uniapp vue3 是不是不支持 important w-1/2 的写法啊 HOT 2
- H5打包部署受影响
- 无法编译支付宝小程序
- 开发时启动报错/(ㄒoㄒ)/~~ HOT 1
- 动态属性有时候会没有正确编译 HOT 1
- 在 Taro 下 H5 与小程序端样式大小不一 HOT 2
- Bug: Taro微信小程序,vue3下的transition组件编译失败,附解决方案,望修复
- 微信小程序在js设定px大小时 会出现不生效情况
- supports-[]语法失效
- 暗黑模式 darkmode 无效 HOT 1
- vscode中WindiCSS IntelliSense插件失效
- App平台 v3 模式暂不支持在 js 文件中引用"windi.css" 请改在 style 内引用 HOT 2
- [bug]uni-app vue3 vite下,运行过程中报错
- 最新的tailwind3.x如何配置?请求给个成功示例 HOT 1
- uniapp vue3 vite 运行时正常,发行之后部分windicss的样式失效 HOT 1
- hover-class中的 !类名 不生效 HOT 1
- 使用模板字符串换行后,生成的类名有误导致样式不正确 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mini-program-tailwind.