使用thorUI的组件（教程）

这里以thorUI控件中的顶部提示消息来做演示教程
先看效果图：

项目结构：（注意：components不是在pages文件夹里面）

如何部署接入thorUI：

1、把tui-tips.vue复制到components

2、在pages.json中加入如下代码：

"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	},

加了后的代码

3、index.vue的代码为

<template>
	
	<view class="content">
		<tui-tips ref="toast"></tui-tips>
		<!-- 第一部分 -->
		<button @tap="showTips">顶部提示</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			showTips: function(e) {
				let index = 0
				let options = {
					msg: "一般消息提示~",
					duration:  2000,
					type: "green"
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		background-color: #e9e9ef;
	}

	
</style>

这样就可以成功的导入使用thorui中的插件了。