b2nil / taro-ui-vue3 Goto Github PK

问题描述

通过 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 = ''
}

日历组件无法选取日期。

排查问题时发现：

• date-list/index.ts: 滑动月份时，每个日期会自动触发一次 handleClick
• AtCalendarDateList, onTap 或 onClick 的使用问题
  • 如果使用 onTap， 回调函数的参数传回的是 TaroEvent，无法获取到 Calendar.Item 的参数，导致无法选取日期
  • 如果使用 OnClick，回调函数能够正常传回日历参数 Calendar.Item，但是会无限触发 props.onDayClick

问题复现 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"

方式二

• 在 webpack 配置中，将 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 打包后提供三个格式的入口文件：

• UMD ('browser' in package.json ): taro-ui-vue3/dist/index.umd.js
• ES ('module' in package.json ): taro-ui-vue3/dist/index.esm.js
• CJS ('main' in package.json ): 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 解决该问题前，请先使用以下临时解决方案：

1. 在 webpack 配置中添加一条 alias 配置，将 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

<at-flex align="start|end|stretch..."> 编译后小程序开发工具显示的样式貌似正确，
但是显示的样式始终为center。

.at-row__align--stretch { //./pages/layout/flex/index.wxss: 675
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-align: stretch;

}

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, {
        ...
    }, [
       ...
    ])
)))