Morioh
Login
Amina Semhar

Amina Semhar

3 years ago

Taro UI Component Library Rewritten with Vue 3.0

Taro UI Vue3

Using Vue 3.0rewritten Taro UI component library.

Component type styles and reuse the Taro UIexisting style and type definition experience when using, refer to the documentation .

All components are used in Vue 3.0the preparation of the rendering function, unused Vue Templateor jsx.

installation

yarn add taro-ui-vue3

use

  • Reference components and component styles on demand
import { AtButton } from 'taro-ui-vue3/lib'
import 'taro-ui-vue3/dist/style/components/button.scss'

export default {
  components: {
    AtButton
  }
}
  • Syntax comply with vue 3.0the syntax
  • Specific parameters can refer to the document
  • You can also refer to the writing of Demo Pages

Body UI Demo

Available mobile access https://b2nil.github.io/taro-ui-vue3-demo/ experience h5version.

or:

  • clone taro-ui-vue3-demo project to local
  • Run yarn installinstall dependencies
  • According to the platform you want to experience, run the relevant commands:
"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",
  • Import compiled related projects in development tools such as WeChat/Baidu/Alipay/QQ/JD/Browser

Differences from Taro UI

  • Removed Taro UI component classNameand customStyleattribute parameters. For by the former classNameand customStylethe way custom styles for a component can be directly passed to the component classand styleproperty
<at-card class="custom-class" style="height: 20px;">...</at-card>

Everyone

  • [] Component display page
  • [] theme

Known issues

  • Alipay applet

  • AtCalendar:

  • Because of Taro Swipercomponent does not support Alipay built-in Swipercomponent onAnimationEndattributes, the compiler, the need to manually modify base.axmlthe <template name="tmpl_0_swiper">base template, the swipernode onAnimationFinishmodified to onAnimationEnd, or can not update in January when the slide switch

  • AtTextarea:

  • Because of Taro Textareacomponents Alipay does not support the textareacomponents of show-countproperty, 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 textareaadd 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.jsby initVue3Componentsmethod taro-xxxregistered in the global tag assembly. Using rendera function rendering nodes need to reference vue 3.0 provided resolveComponenta method, first label taro-xxxparsing component instance: h(resolveComponent('taro-xxx')). But taro-ui-vue3we are not used resolveComponentto h5 adaptation.

  • For convenience, the taro-ui-vue3project 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 aliasthe @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.jsonunder build:h5the command amended as follows: "build:h5": "node ./config/h5-building-script.js && taro build --type h5",

  • In the config / index.js is h5added under webpack aliasprovided:

h5: {
  webpackChain(chain) {
    chain.resolve.alias
      .set(
        '@tarojs/components$',
        '@tarojs/components/dist-h5/vue3/index.js'
      )
  }
}

License

WITH

Credits

Download Details:

Author: b2nil

Demo: https://b2nil.gitee.io/taro-ui-vue3/

Source Code: https://github.com/b2nil/taro-ui-vue3

#vuejs #vue #javascript

Taro UI Component Library Rewritten with Vue 3.0
9.30 GEEK