cuitymiko / taro-ui-vue

UI KIT for Taro/vue

taro-ui-vue

项目背景

tarojs 已经开始支持 vue 去写 taro 应用了，由于缺少相关的 ui 库，因此决定 按照 taro-ui 重写成 vue 组件。 形成了 taro-ui-vue 这个库。

相关链接

Taro Ui Vue 使用文档
Taro
Taro Ui

使用注意

Taro Ui Vue 提供的是源文件，源文件部分代码使用 ts 编写，需要项目支持 ts。 如果是用 taro init 命令创建，则需在使用时选择 ts 。

安装

npm i -S taro-ui-vue

使用

按需引入

// page.js
import { AtButton } from 'taro-ui-vue'
// OR
import AtButton from 'taro-ui-vue/src/components/button/index.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/src'
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>

更多使用方式

更多组件使用及属性请参考 taro-ui 使用文档
所有参数基本一致

TODO

• 为组件添加测试用例

CHANGELOG

CHANGELOG

贡献

如果你在使用 Taro-UI-Vue 时遇到问题，或者有好的建议，欢迎给我们提 Issue 或 Pull Request。在开始之前，请阅读 贡献指南

License

MIT