Awesome
taro-ui-vue
项目背景
tarojs
已经开始支持 vue
去写 taro 应用了,由于缺少相关的 ui 库,因此决定 按照 taro-ui 重写成 vue
组件。
形成了 taro-ui-vue
这个库。
相关链接
使用注意
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
贡献
如果你在使用 Taro-UI-Vue 时遇到问题,或者有好的建议,欢迎给我们提 Issue 或 Pull Request。在开始之前,请阅读 贡献指南