@youzhej/taro-ui-vue NPM

taro-ui-vue

David

项目背景

tarojs 已经开始支持 vue 去写 taro 应用了，由于缺少相关的 ui 库，因此决定按照 taro-ui 重写用 (j|t)sx 成 vue 组件。形成了 taro-ui-vue 这个库。重写是基于 @tarojs 3.0.0-beta.6, 样式是复用的 taro-ui@2.2.x。

安装

npm i -S taro-ui-vue

使用

按需引入

// page.js
import { AtButton } from 'taro-ui-vue'
// 除了引入所需的组件，还需要手动引入组件样式

按需引入样式

// js
import 'taro-ui-vue/dist/style/components/tag.scss'

// css
@import "~taro-ui/dist/style/components/button.scss";

示例

<template>
  <view class="index">
    <AtTag>标签</AtTag>
    <AtIcon value="clock" color="#F00"></AtIcon>
  </view>
</template>

<script>
import { AtTag, AtIcon } from 'taro-ui-vue'
import 'taro-ui-vue/dist/style/components/icon.scss'
import 'taro-ui-vue/dist/style/components/tag.scss'
export default {
  name: 'Index',
  components: {
    AtTag,
    AtIcon,
  }
}
</script>

全局引入所有组件

// app.js
import TaroUiVue from 'taro-ui-vue'
import 'taro-ui-vue/dist/style/index.scss'
Vue.use(TaroUiVue)

onXXX 属性示例

在 .vue 文件 template 中需要按下面这样写

<template>
  <view>
    <AtTag
      type="primary"
      :on-click="handleClick"
    >
      标签
    </AtTag>
  </view>
</template>

在 jsx 中需要按下面这样写, 明确 onXXX(on开头的props) 属于 props

{
  ...
  methods: {
    handleClick() {
      // TODO
    }
  },
  render() {
    return (
      <AtTag
      type="primary"
      props={{onClick: this.handleClick}}
    >
      标签
    </AtTag>
    )
  }
}