b2nil / taro-ui-vue3 Goto Github PK
View Code? Open in Web Editor NEW采用 Vue 3.0 重写的 Taro UI 组件库
Home Page: https://b2nil.github.io/taro-ui-vue3/
License: MIT License
采用 Vue 3.0 重写的 Taro UI 组件库
Home Page: https://b2nil.github.io/taro-ui-vue3/
License: MIT License
通过 onActionClick
重置 AtSearchBar
的 value
,不能将视图层节点的 value
彻底清除。
v1.0.0-alpha.8
h5
// template
<at-search-bar
placeholder="跳转到指定Key"
:value="searchbarValue"
@change="handleChange"
@action-click="handleActionClick"
/>
// script
const searchbarValue = ref('')
function handleActionClick() {
searchbarValue.value = ''
}
日历组件无法选取日期。
排查问题时发现:
问题复现 repo: taro-vue3-calendar
编译到 h5 后,点击部分监听事件的 taro-xxx-core
组件后,组件样式会被设置为 visibility: hidden
。
受影响的组件包括: AtCalendar
, AtCheckBox
等等……
当切换月份时,在monthChange
方法中修改页面中的变量,触发页面重新渲染,这时会又跳到刚才切换之前的月份
v1.0.0-alpha.12
weapp
无
<at-calendar @monthChange="monthChange" />
<view class="part-loading" v-if="partLoading">
<at-activity-indicator></at-activity-indicator>
</view>
const partLoading = ref(false)
const monthChange = (value) => {
partLoading.value = true
}
AtTabs 不能正常显示 slot 内容,小程序开发工具报:[Vue warn]: Invalid VNode type: undefined (undefined)
v1.0.0-alpha.7
小程序、H5
VM213:1 [Vue warn]: Invalid VNode type: undefined (undefined)
at <AtTabs current=0 animated=false tab-list= (3) [{…}, {…}, {…}] ... >
at <Panel no-padding="" title="禁止内容切换动画" >
at <Page header-title="Tabs 标签页" >
at <TabsDemo tid="pages/navigation/tabs/index?__key_=16026424669982" >
at <App>
如需按需引用组件,请从 taro-ui-vue3/lib
目录中引用。
样式按需引用,仍需从 taro-ui-vue3/dist/style
目录中引用。
import { AtButton } from 'taro-ui-vue3/lib'
import "taro-ui-vue3/dist/style/components/button.scss"
taro-ui-vue3
的 alias 指向 taro-ui-vue3/lib
// config/index.js
alias: {
'taro-ui-vue3$': 'taro-ui-vue3/lib'
}
taro-ui-vue3
中引用组件 import { AtButton } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/button.scss"
编译到 h5 和 alipay 后,跑马灯的文字变成了纵向。
在 AtCard
的自定义图标展示中:<at-card :renderIcon="renderIcon()">...</at-card>
,
renderIcon
属性绑定的数据是一个匿名函数: const renderIcon = () => h(AtIcon, {...})
,
导致页面返回销毁组件时报错:
VM457:1 TypeError: Cannot read property 'bum' of null
at unmountComponent (runtime-core.esm-bundler.js:4632)
at unmount (runtime-core.esm-bundler.js:4549)
at unmountChildren (runtime-core.esm-bundler.js:4681)
at unmount (runtime-core.esm-bundler.js:4564)
at unmountComponent (runtime-core.esm-bundler.js:4646)
at unmount (runtime-core.esm-bundler.js:4549)
at unmountChildren (runtime-core.esm-bundler.js:4681)
at unmount (runtime-core.esm-bundler.js:4567)
at patchKeyedChildren (runtime-core.esm-bundler.js:4370)
at patchChildren (runtime-core.esm-bundler.js:4261)
renderIcon 属性只需绑定一个 AtIcon
VNode 节点,正确的写法如下:
<at-card :renderIcon="renderIcon">...</at-card>
// data
const renderIcon = h(AtIcon, {...})
作为小程序项目,这个大小有点接受不了
Alipay 小程序端,AtSearchBar
点击清除按钮,input
的 value
重置为 ''
, 输入框失焦,但无法清除已经输入的内容。
点击搜索栏以及目录索引的key
均无法跳转到目标区域。
或者跳转到目标区域后,会跳回顶部。
default slot 语法问题导致以上错误。
v1.0.0-alpha.12
h5
, 小程序
// h5
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Invalid VNode type: undefined (undefined)
at <TaroView class="at-curtain__body" >
at <TaroView class="at-curtain__container" >
at <TaroView class="at-curtain at-curtain--closed" onTap=fn<onTap> >
at <AtCurtain isOpened=false closeBtnPosition="bottom" onClose=fn<bound onClose> >
at <TaroView class="page" style= {width: "100%", margin: "auto"}margin: "auto"width: "100%"__proto__: Object >
at <Page headerTitle="Curtain 幕帘" >
at <CurtainDemo tid="/pages/view/curtain/index" >
at <App>
// weapp
VM32:1 [Vue warn]: Invalid VNode type: (undefined)
at <AtCurtain isOpened=true closeBtnPosition="top" onClose=fn<bound onClose> >
at <Page headerTitle="Curtain 幕帘" >
at <CurtainDemo tid="pages/view/curtain/index?__key_=16037124863712" >
at <App>
{ default: () => [
{ default: () => slots.default && slots.default() }, // <- 问题写法
h(View, {...})
]}
Alipay 小程序 AtTabs 的标签标题换行,应该不换行显示
AtSlider 组件不能正常滑动,打开浏览器开发工具后,才能滑动。
v1.0.0-dev.1
仅用于测试 skeleton 组件。
目前样式引入存在问题。
v1.0.0-dev.1
小程序, h5
./node_modules/taro-ui-vue3/dist/index.esm.js or index.umd/js
Module not found: Can't resolve '@/style/components/skeleton.scss' in 'E:\miniprogram\test\node_modules\taro-ui-vue3\dist'
请使用 v1.0.0-alpha.13
详情见 #37
该问题是因 @tarojs/taro-h5 下提供的 Api 接口 未能通过 babel-plugin-transform-taroapi 正确转译所致。
https://github.com/NervJS/taro/tree/4c8a5ea9758f9c1c7e1efd1c9f4271a55c8feb97/packages/taro-h5
需要配合 babel-plugin-transform-taroapi 才能使用 ES6 default import 的语法,相关配置详情在 babel-preset-taro 中。
taro-ui-vue3
打包后提供三个格式的入口文件:
taro-ui-vue3/dist/index.umd.js
taro-ui-vue3/dist/index.esm.js
taro-ui-vue3/dist/index.js
目前在 h5
环境中使用 CJS 和 UMD 格式的入口文件都存在上面的问题。
因为 @tarojs/webpack-runner 编译的入口顺序是 mainFields: ['main:h5', 'browser', 'module', 'main']
, 所以优先引用了 UMD 入口。
v1.0.0-alpha.8
h5
index.umd.js?aa1b:42 Uncaught (in promise) TypeError: Taro__default.default.createSelectorQuery is not a function
at delayQuerySelector (index.umd.js?aa1b:42)
在 taro-ui-vue3
或者 Taro 解决该问题前,请先使用以下临时解决方案:
taro-ui-vue3
入口指向 index.esm.js
alias: {
"taro-ui-vue3$": "taro-ui-vue3/dist/index.esm.js" // 注意加 $, 否则会导致样式引用报错
}
或者
2. 在 node_modules/taro-ui-vue3/package.json
中添加 "main:h5": index.esm.js
开发工具所报的警告信息如下:
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
原因是组件插槽所插入的是插槽内容,而非函数值。Vue3 推荐使用函数式插槽,以便获得更佳的性能。
h(AtActionSheetHeader, null, props.title) // 不推荐的写法
正确的写法如下:
h(AtActionSheetHeader, null, { default: () => props.title })
Picker 组件不能正常选择项目,打开浏览器开发工具可以滑动选择。问题与 #15 现象一样。
AtVirtualScroll 可视区域行数计算错误
v1.0.0-alpha.13
小程序
h5
function getLast(first: number): number {
// parseInt 笔误,导致 height 值固定不变
const height = parseInt(`${props.height || 0, 10}`) || elRef.value.$el.clientHeight
return first + Math.ceil(height / __itemHeight.value)
}
AtVirutalScroll 向下滚动时,第一次到达 viewport + bench 的位置后,开始不停抖动。
原因是 rollup 打包时未处理与组件同一文件夹下的样式文件,导致打包后组件的样式丢失。
v1.0.0-alpha.10
小程序
, h5
由于源码使用了路径 alias, 导致从 taro-ui-vue3/lib
引用组件时编译报错: cannot find module @/utils/... or @/composables/...
v1.0.0-alpha.15
小程序
,h5
使用 watchEffect 时,flush
时机设置不对导致 RangeError
.
VM457:1 RangeError: Maximum call stack size exceeded
at Object.set (<anonymous>)
at Object.set (reactivity.esm-bundler.js:251)
at clearTimer (toast.ts:43)
at handleChange (toast.ts:88)
at toast.ts:34
at callWithErrorHandling (runtime-core.esm-bundler.js:154)
at getter (runtime-core.esm-bundler.js:4871)
at reactiveEffect (reactivity.esm-bundler.js:42)
at Array.job (runtime-core.esm-bundler.js:4913)
at flushPostFlushCbs (runtime-core.esm-bundler.js:282)
AtIndexes 编译为 H5 后,通过点击字母索引,无法跳转至目标位置。
与 #8 类似,应该是 h5
平台未能有效更新 _scrollTop
状态导致。
v1.0.0-alpha.8
h5
以上组件为受控组件,需要通过 onChange
来更新 value
值变化。
可考虑提供 v-model 支持。
h5
、小程序
#### 代码
```html
// without v-model
<AtInput :value="modelValue" @change="updateValue"/>
// with v-model support
<AtInput v-model="modelValue" />
进度设为 0 时,进度条计算样式的宽度始终为 width: 0
, 而非 width: "0%"
, 从而导致进度条显示为满格。
const progressStyle = computed(() => ({
width: percent?.value && `${+percent?.value}%`,
...
}))
现象与 #13 一样。
原因是 H5 的点击事件为 MouseEvent
, e.target.id
为 null
, 导致 contentID
不是唯一。 可以将 e.timestamp
赋值给 contentID
, 确保 contentID
是唯一的。
function handleClick(e: CommonEvent) {
// contentID.value = 'content' + e.target.id
contentID.value = 'content' + String(e.timeStamp).replace('.', '')
...
}
v1.0.0-alpha.14
alipay
点击时城市时, toast 展示信息未解析为字符串
未显示空心标签(小)的 demo
PickerViewColumn 滑动后不能固定在选择的位置上,而是又回到了顶部。
AtVirtualScroll 增加两个插槽,用于自定义 ScrollView 顶部和底部区域的内容。
// psuedo code
return h(View, {
class: 'at-virtual-scroll__wrapper'
}, [
// header 插槽,用于自定义顶部区域
slots.header && slots.header(),
// 虚拟列表
h(ScrollView, mergeProps(
{
... // platform specific props
},
{
class: 'at-virtual-scroll',
... // common props
}
), slots.default && slots.default()), // default 插槽, 用于自定义虚拟列表的内容
// footer 插槽,用于自定义底部区域
slots.footer && slots.footer()
])
AtDivider
使用 height
、fontSize
参数时,样式无效。
util
中 pxTransform
方法未处理 h5
的情况,导致其他使用了 pxTransform
的组件均存在这种情况。
v1.0.0-alpha.11
h5
报错信息
Cannot read property '$scope' of undefined
TypeError: Cannot read property '$scope' of undefined
实例无 $scope
属性
this.$scope.triggerEvent('submit', event.detail, {
bubbles: true,
composed: true
});
AtButton 无法绑定微信的 getUserInfo
v1.0.0-alpha.12
weapp
无
<at-button
type="primary"
class="login-btn"
open-type="getUserInfo"
@getuserinfo="onGotUserInfo"
>
微信登录
</at-button>
AtSwipeAction
偶尔会报 could not find width of null
,尤其是嵌套 AtVirtualScroll
使用,且初始指定跳转至具体列表行时,未渲染的的部分都会报错。
v1.0.0-alpha.12
小程序
h5
AtAccordion
,并且内容项目数量不一致时,展开和收起动画会出现卡顿, 或动画过快,或展开位置超过内容高度后,才收起。AtVirtualScroll
设置 scrollIntoItem
参数时,初始视图没有跳转至相应的列表行数
v1.0.0-alpha.11
h5
小程序
点击与添加图片按钮(+
)相邻的预览图片的删除按钮(x
)时,会触发chooseFile
,自动弹出选择图片的界面。
编译为 Alipay 小程序时, AtTextArea 在 count
属性为 true
时, 存在字数统计重复渲染, count
属性为 false
时, 仍然会出现字数统计。
点击 AtSearchBar、AtInput 的清除按钮,数据层面已经将 input 的 value 重置,但在视图层 (即 HTMLInputElement
) 的 value
没有清空。
直接加个手风琴组件会破坏整体样式
v1.0.0-alpha.8
h5
// error message here
// code here
AtSwipeAction
配合 AtFlex
使用时,AtFlex
布局与 SwipeActionOptions
的布局相互干扰
v1.0.0-alpha.12
小程序
AtFlex
前面需嵌套一层 View
<AtSwipeAction>
<View>
<AtFlex>
...
</AtFlex>
</View>
</AtSwipeAction>
目前部分组件按需引用时,还需要引用所依赖的其他组件的样式,这样相对繁琐,对用户使用非常不友好。 如:
import { AtActivityIndicator } from 'taro-ui-vue3'
// 组件依赖的样式文件(仅按需引用时需要
@import "taro-ui-vue3/dist/style/components/activity-indicator.scss";
@import 'taro-ui-vue3/dist/style/components/loading.scss';
组件依赖的样式文件,最好在组件的样式文件中引用,不应该由用户另行引用。
AtDivider 的 height
, fontSize
属性传入 string
,类型校验报错,与 types 的定义不一致。
v1.0.0-alpha.11
详见: taro issue #8203
AtCalendar 设置 isVertical=true
时
Alipay 小程序 AtCalendar 滑动时不能更新月份。
Taro 的 Swiper 组件只支持 onAnimationFinish
事件属性, 不支持 Alipay 小程序的 onAnimationEnd
事件属性, 因此通过 onAnimationFinish
无法更新月份。
// calendar/body/index.ts
h(Swiper, {
class: 'main__body',
...
onAnimationFinish: handleAnimateFinish, // <- onAnimationEnd
}, state.listGroup.map((item, key) => (
h(SwiperItem, {
...
}, [
...
])
)))
VM4613:1 元素 image 的 属性 src 的值数据量过大,可能会影响渲染性能。考虑降低图片转为 base64 的阈值或在 CSS 中使用 base64。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.