Using Vue 3.0
rewritten Taro UI component library.
Component type styles and reuse the Taro UI
existing style and type definition experience when using, refer to the documentation .
All components are used in Vue 3.0
the preparation of the rendering function, unused Vue Template
or jsx
.
yarn add taro-ui-vue3
import { AtButton } from 'taro-ui-vue3/lib'
import 'taro-ui-vue3/dist/style/components/button.scss'
export default {
components: {
AtButton
}
}
vue 3.0
the syntaxAvailable mobile access https://b2nil.github.io/taro-ui-vue3-demo/ experience h5
version.
or:
clone
taro-ui-vue3-demo project to localyarn install
install dependencies"dev:weapp": "taro build --type weapp --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
className
and customStyle
attribute parameters. For by the former className
and customStyle
the way custom styles for a component can be directly passed to the component class
and style
property<at-card class="custom-class" style="height: 20px;">...</at-card>
Alipay applet
AtCalendar
:
Because of Taro Swiper
component does not support Alipay built-in Swiper
component onAnimationEnd
attributes, the compiler, the need to manually modify base.axml
the <template name="tmpl_0_swiper">
base template, the swiper
node onAnimationFinish
modified to onAnimationEnd
, or can not update in January when the slide switch
AtTextarea
:
Because of Taro Textarea
components Alipay does not support the textarea
components of show-count
property, so the word count can not be set :count="false"
directly off, the need to manually modify the compiler base.axml
, in <template name="tmpl_0_textarea_focus">
and <template name="tmpl_0_textarea_blur">
under the basis of template textarea
add nodesshow-count="{{i.showCount}}"
Baidu Swan applet (there are more problems, affecting the experience)
Part of the style is invalid
Taro Issue #7293 : Taro 3 Baidu applet will cause the full page to be re-rendered every time the setData is set, resulting in flickering pictures and unusable input boxes.
H5 edge
Taro assembly adapted Vue 3.0 in @tarojs/components/dist-h5/vue3/index.js
by initVue3Components
method taro-xxx
registered in the global tag assembly. Using render
a function rendering nodes need to reference vue 3.0 provided resolveComponent
a method, first label taro-xxx
parsing component instance: h(resolveComponent('taro-xxx'))
. But taro-ui-vue3
we are not used resolveComponent
to h5 adaptation.
For convenience, the taro-ui-vue3
project is compiled to h5, temporarily need to modify the script @tarojs/components/dist-h5/vue3/index.js
, all components export demand convenient reference. Then webpack configuration alias
the @tarojs/components$
point @tarojs/components/dist-h5/vue3/index.js
. The specific h5 compilation configuration scheme is as follows:
Add a h5 build script in the config directory of the project: h5-building-script.js
Will be package.json
under build:h5
the command amended as follows: "build:h5": "node ./config/h5-building-script.js && taro build --type h5",
In the config / index.js is h5
added under webpack alias
provided:
h5: {
webpackChain(chain) {
chain.resolve.alias
.set(
'@tarojs/components$',
'@tarojs/components/dist-h5/vue3/index.js'
)
}
}
Author: b2nil
Demo: https://b2nil.gitee.io/taro-ui-vue3/
Source Code: https://github.com/b2nil/taro-ui-vue3
#vuejs #vue #javascript