进阶用法

介绍

通过本章节你可以了解到 ThorUI 的一些进阶用法，比如组件插槽用法、组件暴露方法调用等。

组件用法

uni-app组件插槽

ThorUI 提供了丰富的组件插槽，通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉，可以阅读 Vue 官方文档中的 插槽章节 (opens new window)，下面是通过插槽来定制的相关示例：

单插槽 （tui-button组件）

<tui-button disabled loading :size="34" bold>页面主操作 Loading</tui-button>

多插槽（tui-card组件）

<tui-card :image="card.img" :title="card.title" :tag="card.tag" @click="detail">
	<template v-slot:body>
		<view class="tui-article">
			<image src="/welfare/img_star_banner.png" mode="widthFix" class="tui-welfare__img"></image>
			<view class="tui-common tui-welfare__title">点star获取签到模板</view>
			<view class="tui-common tui-welfare__desc">前往GitHub点star可免费获得签到模板，福利未过期之前所有用户均可参加。</view>
		</view>
	</template>
</tui-card>

多插槽 && 解构插槽（tui-index-list组件）

<tui-index-list @click="itemClick" :list-data="listData">
	<template v-slot:header>
		<tui-searchbar backgroundColor="#ededed" placeholder="搜索" @input="input" @search="search" @clear="clearInput"></tui-searchbar>
		<tui-list-cell padding="16rpx 30rpx">
			<!--此处class样式App端偶尔会丢失,可直接使用行内样式-->
			<view class="tui-list__item" style="display: flex; align-items: center;" @tap="newFriends">
				<image  class="tui-avatar" style="width: 68rpx;height: 68rpx;" src="/avatar/img_new_friends.png"></image>
				<view style="padding-left: 20rpx;">新的朋友</view>
			</view>
		</tui-list-cell>
	</template>
	<!-- 小程序端目前仅支持解构插槽 -->
	<template slot-scope="{ entity, index, subi }" slot="item">
		<tui-list-cell padding="16rpx 30rpx">
			<view class="tui-list__item">
				<image class="tui-avatar" :src="entity.avatar"></image>
				<view class="tui-name">{{ entity.name }}</view>
			</view>
		</tui-list-cell>
	</template>
	<template v-slot:footer>
		<tui-loadmore v-if="getTotal == 0 && init"></tui-loadmore>
		<view class="tui-footer__total" v-if="getTotal > 0 || !init">{{ getTotal }}位联系人</view>
	</template>
</tui-index-list>

小程序组件插槽

如果对小程序组件不熟悉，可以阅读 小程序 官方文档中的小程序自定义组件 (opens new window)。

单插槽 （tui-button组件）

<tui-button type="white" bindclick="detail">页面次要操作</tui-button>

多插槽 （tui-collapse组件）

<tui-collapse index="{{index}}" current="{{item.current}}" disabled="{{item.disabled}}" bindclick="change">
	<view slot="title">
	  <tui-list-cell hover="{{!item.disabled}}">{{item.name}}</tui-list-cell>
	</view>
	<view slot="content">
	  <view class="tui-content">{{item.intro}}</view>
	</view>
</tui-collapse>

抽象节点（tui-drag组件以及tui-index-list组件）

这个特性自小程序基础库版本 1.9.6 开始支持。详见 (opens new window)

组件实例方法

注：需要等组件初始化完成才可调用方法，务必确认已获取到组件对象

uni-app实例方法

ThorUI中的部分组件提供了实例方法，调用实例方法时，我们需要通过 ref (opens new window) 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，我们可以通过this.$refs.xxx访问到对应的组件实例，并调用上面的实例方法。

<!-- 通过 ref 属性将组件绑定到 this.$refs.timer 上 （选项式 API）-->
<tui-timer ref="timer" @end="end" isMs :start="false" backgroundColor="#333" color="#fff" :size="28" :width="40" :height="40" msColor="#fff" :msWidth="40"></tui-timer>

    //选项式 API 使用方法
    // 注意：组件挂载后才能访问到 ref 对象，需要等组件初始化完成
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			end(e){
				console.log(e)
				this.tui.toast(`计时结束，时间：${e.totalSeconds}s`)
			},
			//调用 startTiming 方法
			startTiming(){
				//startTiming 为组件向外暴露方法
				this.$refs.timer.startTiming()
			},
			//调用 resetTimer 方法
			resetTimer(){
				//resetTimer 为组件向外暴露方法
				this.$refs.timer.resetTimer()
			},
			//调用 endTimer 方法
			endTimer(){
				//endTimer 为组件向外暴露方法
				this.$refs.timer.endTimer()
			}
		}
	}

//组合式API 使用 vue3
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
//此处需按照自己组件放置的路径进行引入
import tuiTimer from './tui-timer/tui-timer.vue'

const timer = ref<InstanceType<typeof tuiTimer> | null>(null)

//调用 startTiming 方法
function startTiming(){
	timer?.value.startTiming()
}
//调用 resetTimer 方法
function resetTimer(){
	timer?.value.resetTimer()
}

//调用 endTimer 方法
function endTimer(){
	timer?.value.endTimer()
}
// 注意：初始化调用方法，尽量放置 onReady 内执行，确保timer.value 有值
onReady(() => 
		
})

小程序实例方法

可在父组件里调用 this.selectComponent ，获取子组件的实例对象（插件的自定义组件将返回 null）。调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。

selector 详细语法可查看 selector 语法参考文档 (opens new window)。

<tui-timer id="tui-timer" bindend="end" isMs start="{{false}}" backgroundColor="#333" color="#fff" size="{{28}}" width="{{40}}" height="{{40}}" msColor="#fff" msWidth="{{40}}"></tui-timer>

let timer;
Page({
  onReady: function (options) {
	// 组件初始化完成
    timer = this.selectComponent("#tui-timer")
  },
  end(e){
    console.log(e)
    tui.toast(`计时结束，时间：${e.detail.totalSeconds}s`)
  },
  //调用 startTiming 方法
  startTiming(){
	 // startTiming 为组件向外暴露方法
    timer.startTiming()
  },
   //调用 resetTimer 方法
  resetTimer(){
	// resetTimer 为组件向外暴露方法
    timer.resetTimer()
  },
   //调用 endTimer 方法
  endTimer(){
	  // endTimer 为组件向外暴露方法
    timer.endTimer()
  }
})