b2nil / taro-ui-vue3 Goto Github PK

View Code? Open in Web Editor NEW

156.0 4.0 51.0 7.54 MB

采用 Vue 3.0 重写的 Taro UI 组件库

Home Page: https://b2nil.github.io/taro-ui-vue3/

License: MIT License

JavaScript 8.98% Vue 90.82% Shell 0.20%

taro-ui taro taro-ui-vue3 taro-vue3-next taro-ui-vue3-next

taro-ui-vue3's Introduction

Taro UI Vue3

采用 Vue 3.0 重写的 Taro UI 组件库

组件复用了 Taro UI 已有的样式和类型定义。

安装

# 使用 yarn
yarn add taro-ui-vue3

# 或使用 npm
npm i taro-ui-vue3

使用

配置编译插件

由于 taro-ui-vue3@^1.1.0 提供的是采用 Vue 3.0 SFC 编译后的文件，Taro 目前尚不支持自动收集使用渲染函数编写的组件中所使用的小程序组件标签。

taro-ui-vue3 提供了一个自动收集小程序组件标签的插件，请在编译配置文件中进行配置。
```
// ./config/index.js
{
  plugins: ['taro-ui-vue3/lib/plugin'],
}
```

全局引用组件和样式

引用全部组件和样式

import { createApp } from 'vue'
import { createUI } from 'taro-ui-vue3'

// 引用全部组件样式
import 'taro-ui-vue3/dist/style/index.scss'

const App = createApp({
  onShow(options) { },
})

// 引用全部组件
const tuv3 = createUI()
App.use(tuv3)

export default App

引用部分组件和样式

import { createApp } from 'vue'
import { createUI } from 'taro-ui-vue3'
import { 
  AtButton, 
  AtInput, 
  AtTabs 
} from 'taro-ui-vue3/lib'

// 引用上述组件对应的样式文件
import 'taro-ui-vue3/dist/style/components/button.scss'
import 'taro-ui-vue3/dist/style/components/input.scss'
import 'taro-ui-vue3/dist/style/components/tabs.scss'

const App = createApp({
  onShow(options) { },
})

// 引用部分组件
const tuv3 = createUI({
  AtButton, 
  AtInput, 
  AtTabs
})
App.use(tuv3)

export default App

按需引用组件和组件样式

import { AtButton } from 'taro-ui-vue3/lib'
import 'taro-ui-vue3/dist/style/components/button.scss'

export default {
  components: {
    AtButton
  }
}

完全遵照 vue 3.0 语法，组件具体参数请参考文档，亦可参考 Demo 的写法

体验 UI Demo

可用手机访问 https://b2nil.github.io/taro-ui-vue3-demo/ 体验 h5 版本。
亦或将 Demo 仓库 clone 到本地自行编译，体验各个小程序平台的版本。

与 Taro UI 的差异

移除了 Taro UI 组件的 className 和 customStyle 属性，可直接给组件传入 class 和 style 属性，自定义部分组件样式。
```
<at-card 
  class="custom-class" 
  style="height: 20px;"
>
  ...
</at-card>
```

开发

安装依赖

运行 yarn bootstrap 安装所有依赖，并创建packages目录下所有组件以及demo目录之间的符号链接。
修改文件
- 组件位于 packages 目录，如需修改组件，找到相关组件目录即可。
- 组件测试文件位于各个组件目录下的 __tests__目录中。测试用的一些 mock 文件和功能位于 packages/test-utils 目录。
- 文档文件位于 website/docs 目录，关于组件使用方面的修改，只需修改该目下的相关文件即可。
- 文档网站采用 vitepress 开发，网站组件位于 website/.vitepress 目录，如需修改网站相关功能和主题，则需修改该目录下的相关文件。
- demo 位于 demo 目录。
预览 demo
- 预览小程序 demo：
  
  运行 yarn demo:weapp (以微信为例，其他平台可更改以下 scripts 下的命令)
- 预览 h5 demo：
  
  demo 设置了从项目根目录下 dist 和 lib 中引用组件和部分功能，因此采用了 esbuild 在开发时进行快速构建和打包。
  
  但 h5 平台使用 esbuild 打包的组件时，会报错。因此，预览 h5 效果时，需要先使用 rollup 打包。
  
  运行 yarn build 使用 rollup 打包组件，然后运行 cd demo && yarn dev:h5 预览
预览文档

运行 yarn dev:docs 预览文档。

TODOs

[] 组件展示页面
- [] theme

License

MIT

Credits

taro-ui-vue3's People

Contributors

Stargazers

Watchers

Forkers

ljquan noicu zenglf163 kityun xiaoyierle biggestdreamerly 5265liu wukuy wangmingliang massimiliano76 unforesndprson sudocs gxuebin uyarn changebegin guorunfa yangruikr wssx6688 jangocheng jangocity linshengjian spa123456 dengaye yizxfang vudiy wa926talent kiefer- goodpaas wooodhead ravechan helenwps liangrongzhi136 jevense ly9622 torns aooliy visnix tingyuxuan2302 tinans yangjisen xiaoxiaocoder chobit0000 yill625 gamesacer laughingdyc 925800521 lkjh3214 aliceet lichongbing holycrypto shujunqiao

taro-ui-vue3's Issues

AtFlex align-items 以及 align-content 样式无效

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

}

AtVirtualScroll 可视区域行数计算错误

问题描述

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

样式引用问题

目前部分组件按需引用时，还需要引用所依赖的其他组件的样式，这样相对繁琐，对用户使用非常不友好。如：

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

组件依赖的样式文件，最好在组件的样式文件中引用，不应该由用户另行引用。

Alipay 小程序 AtTextArea 字数统计重复渲染

编译为 Alipay 小程序时， AtTextArea 在 count 属性为 true 时，存在字数统计重复渲染， count 属性为 false 时，仍然会出现字数统计。

Alipay 小程序 AtCalendar 滑动时不能更新月份

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

AtSwipeAction 配合 AtFlex 使用时，AtFlex 布局与 SwipeActionOptions 的布局相互干扰

问题描述

AtSwipeAction 配合 AtFlex 使用时，AtFlex 布局与 SwipeActionOptions 的布局相互干扰

版本信息

v1.0.0-alpha.12

涉及的平台

小程序

解决方案

AtFlex 前面需嵌套一层 View

<AtSwipeAction>
  <View>
    <AtFlex>
       ...
    </AtFlex>
  </View>
</AtSwipeAction>

h5 AtSlider 组件不能滑动

AtSlider 组件不能正常滑动，打开浏览器开发工具后，才能滑动。

taro-ui-vue3/lib cannot find module @/utils and @/composables

问题描述

由于源码使用了路径 alias，导致从 taro-ui-vue3/lib 引用组件时编译报错： cannot find module @/utils/... or @/composables/...

版本信息

v1.0.0-alpha.15

涉及的平台

小程序，h5

AtCurtain 报 Invalid VNode type: undefined (undefined)

问题描述

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

AtButton 不能触发表格的 onSubmit/onReset 事件

报错信息

Cannot read property '$scope' of undefined
TypeError: Cannot read property '$scope' of undefined

实例无 $scope 属性

this.$scope.triggerEvent('submit', event.detail, {
     bubbles: true,
     composed: true
});

Alipay 小程序 AtSearchBar 点击清除按钮无法清除内容

Alipay 小程序端，AtSearchBar 点击清除按钮，input 的 value 重置为 '', 输入框失焦，但无法清除已经输入的内容。

Action-Sheet 展示页面出现关于 default slot 的警告

开发工具所报的警告信息如下：

[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 })

AtButton onGetAuthrize typo

问题描述

版本信息

v1.0.0-alpha.14

涉及的平台

alipay

h5 taro-xxx-core 组件点击时会被隐藏

编译到 h5 后，点击部分监听事件的 taro-xxx-core 组件后，组件样式会被设置为 visibility: hidden。
受影响的组件包括： AtCalendar, AtCheckBox 等等……

h5 Picker 组件不能选择项目

Picker 组件不能正常选择项目，打开浏览器开发工具可以滑动选择。问题与 #15 现象一样。

AtTabs 不能显示 slot 内容

问题描述

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>

[H5] AtSearchBar 点击搜索按钮后，不能彻底清空搜索内容

问题描述

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

Toast 报 RangeError: Maximum call stack size exceeded

使用 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)

H5 中 AtIndexes 点击字母索引跳转失效

问题描述

AtIndexes 编译为 H5 后，通过点击字母索引，无法跳转至目标位置。
与 #8 类似，应该是 h5 平台未能有效更新 _scrollTop 状态导致。

版本信息

v1.0.0-alpha.8

涉及的平台

h5

希望加个下拉刷新加载更多组件

AtSwipeAction could not find width of null

问题描述

AtSwipeAction 偶尔会报 could not find width of null，尤其是嵌套 AtVirtualScroll 使用，且初始指定跳转至具体列表行时，未渲染的的部分都会报错。

版本信息

v1.0.0-alpha.12

涉及的平台

小程序 h5

标签展示页缺少小空心标签展示

未显示空心标签（小）的 demo

关于按需引用组件的说明

如需按需引用组件，请从 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"

AtVirtualScroll 初始视图没有跳转至 scrollIntoItem 对应的列表行数

问题描述

AtVirtualScroll 设置 scrollIntoItem 参数时，初始视图没有跳转至相应的列表行数

版本信息

v1.0.0-alpha.11

涉及的平台

h5 小程序

AtVirutalScroll 滚动时不停抖动

问题描述

AtVirutalScroll 向下滚动时，第一次到达 viewport + bench 的位置后，开始不停抖动。

原因是 rollup 打包时未处理与组件同一文件夹下的样式文件，导致打包后组件的样式丢失。

版本信息

v1.0.0-alpha.10

涉及的平台

小程序, h5

AtDivider height, fontSize 属性传入 string，类型校验报错

问题描述

AtDivider 的 height, fontSize 属性传入 string，类型校验报错，与 types 的定义不一致。

版本信息

v1.0.0-alpha.11

input、input-number、textarea、searchbar 等表单组件提供 v-model 支持

问题描述

以上组件为受控组件，需要通过 onChange 来更新 value 值变化。
可考虑提供 v-model 支持。

涉及的平台

h5、小程序

#### 代码
```html
// without v-model
<AtInput :value="modelValue" @change="updateValue"/>

// with v-model support
<AtInput v-model="modelValue" />

引入之后整个项目打包多了近300k

作为小程序项目，这个大小有点接受不了

AtIndexes 展示页面 toast 展示信息未解析

点击时城市时， toast 展示信息未解析为字符串

虚拟列表无法像手风琴一样直接在列表里显示详情吗

问题描述

直接加个手风琴组件会破坏整体样式

版本信息

v1.0.0-alpha.8

涉及的平台

错误信息

// error message here

代码

// code here

AtProgress 的进度设置为 0 时，进度条显示满格

进度设为 0 时，进度条计算样式的宽度始终为 width: 0，而非 width: "0%", 从而导致进度条显示为满格。

const progressStyle = computed(() => ({
    width: percent?.value && `${+percent?.value}%`,
    ...
}))

Alipay 小程序 AtCalendar 垂直滑动冒泡问题

AtCalendar 设置 isVertical=true 时

~~日期列表显示不全，少一行 (样式高度设置不正确，导致日期列表被遮住了一行)~~
滑动切换月份时，整个页面也会跟着滑动

Toast Demo Warning: 元素 image 的属性 src 的值数据量过大

VM4613:1 元素 image 的 属性 src 的值数据量过大，可能会影响渲染性能。考虑降低图片转为 base64 的阈值或在 CSS 中使用 base64。

Card 展示页面返回时报错

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

ImagePicker 事件冒泡问题

点击与添加图片按钮（+）相邻的预览图片的删除按钮（x）时，会触发chooseFile，自动弹出选择图片的界面。

运行打包后 vue 以及ui组件都被全部引入没有按需引入

详见： taro issue #8203

[H5] 使用 Taro.xxx 接口的组件报错：Taro__default.default.xxx is not a function

问题描述

详情见 #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 解决该问题前，请先使用以下临时解决方案：

在 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

Calendar 组件不能选取日期

日历组件无法选取日期。

排查问题时发现：

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

问题复现 repo： taro-vue3-calendar

AtDivider 自定义 height、fontSize 样式失效

问题描述

AtDivider 使用 height、fontSize 参数时，样式无效。
util 中 pxTransform 方法未处理 h5 的情况，导致其他使用了 pxTransform 的组件均存在这种情况。

版本信息

v1.0.0-alpha.11

涉及的平台

h5

AtVirtualScroll 增加用于自定义虚拟列表顶部和底部内容的插槽

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()
])

Accordion 展开和收起动画异常

默认开始状态下，点击关闭时，动画过快，与默认关闭，打开后再关闭时的表现不一致。
当使用多个 AtAccordion，并且内容项目数量不一致时，展开和收起动画会出现卡顿, 或动画过快，或展开位置超过内容高度后，才收起。

Alipay 小程序 AtTabs 的标签标题换行

Alipay 小程序 AtTabs 的标签标题换行，应该不换行显示

H5 Accordion 展开和收起动画异常

现象与 #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('.', '')
    ...
}

问题描述

当切换月份时，在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
}

v1.0.0-dev.1 - Can't resolve '@/style/components/skeleton.scss'

问题描述

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

问题描述

AtButton 无法绑定微信的 getUserInfo

版本信息

v1.0.0-alpha.12

涉及的平台

weapp

错误信息

无

代码

<at-button
  type="primary"
  class="login-btn"
  open-type="getUserInfo"
  @getuserinfo="onGotUserInfo"
>
  微信登录
</at-button>