ThorUI组件基本使用

如果对vue不熟悉,可去vuejs官网查看文档。

组件导入项目

1.手动将组件复制到项目中

2.npm安装(待完善)

 npm install thorui【此包由其他开发者代发布】
 
 npm install thorui-uni (待发布)

uni-app页面引入组件

 //easycom组件模式(无需手动引入,开发工具自带智能感知)
 
"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	}
//手动引入
<script>
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	export default {
		components:{
			tuiButton
		},
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

微信小程序页面引入组件

//json文件中手动引入
{
  "usingComponents": {
    "tui-button": "/components/thorui/tui-button/tui-button"
  }
}

使用组件

<tui-button type="primary"  :color="color" :size="size" :width="width" :height="height" @click="click"></tui-button>

其中 type="primary" :color="color" :size="size" :width="width" :height="height" 部分为props,@click为组件绑定事件(小程序将@替换为bind)