# t-divider

Divider 分割线

t-divider 组件介绍

t-divider 是一个分割线组件，用于对内容进行分割展示。支持自定义分割线样式、文本内容和圆点显示，提供实线和虚线两种线条样式，适合需要分隔不同内容区域的场景。

t-divider 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-divider 基础用法

基础用法参考 demo/divider/divider.uvue，通过 text、lineStyle 等属性配置分割线样式。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="Divider 分割线"
				sub-title="内容进行分割展示"></t-card>
		<t-section title='功能展示'
				   type='primary'
				   class="r-10"></t-section>
		<t-col :class="[`tvg mt-15 r-10 plr-50 pt-15`]">
			<t-divider class="mb-15"
					   :line="line"
					   :dot="isdot"
					   :lineStyle="lineStyle"
					   :text="text"></t-divider>
			<t-divider class="mb-15"
					   :line="line"
					   :dot="isdot"
					   type="success"
					   :lineStyle="lineStyle"
					   :text="text"></t-divider>
			<t-divider class="mb-15"
					   :line="line"
					   :dot="isdot"
					   type="error"
					   :lineStyle="lineStyle"
					   :text="text"></t-divider>
			<t-divider class="mb-15"
					   :line="line"
					   :dot="isdot"
					   type="primary"
					   :lineStyle="lineStyle"
					   :text="text"></t-divider>
			<t-divider class="mb-15"
					   :line="line"
					   :dot="isdot"
					   type="warning"
					   :lineStyle="lineStyle"
					   :text="text"></t-divider>
		</t-col>
		<t-row :class="[`fww r-10 tvg mt-10 p-10`]">
			<t-button class="mrb-15"
					  type='primary'
					  @click="setText">设置文本</t-button>
			<t-button type='primary'
					  class="mrb-15"
					  @click="setBorder">设置线条样式</t-button>
			<t-button type='primary'
					  class="mrb-15"
					  @click="setBorder1">不显示线条</t-button>
			<t-button type='primary'
					  class="mrb-15"
					  @click="setDot">显示圆点</t-button>
		</t-row>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const text = ref('页面有限，服务不止')
	const line = ref(true)
	const lineStyle = ref('solid')
	const isdot = ref(false)

	function setText() {
		text.value = text.value == '页面有限，服务不止' ? '加载中' : '页面有限，服务不止'
	}

	function setBorder() {
		lineStyle.value = lineStyle.value == 'solid' ? 'dashed' : 'solid'
	}

	function setBorder1() {
		line.value = line.value ? false : true
	}

	function setDot() {
		isdot.value = !isdot.value
	}
</script>

t-divider Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
text	分割线中间展示内容	string	'页面不止，服务有限'
textClass	分割线内容样式类	any	''
line	是否显示分割线线条	boolean	true
lineStyle	分割线类型，可选 solid、dashed	any	'solid'
lineClass	分割线的样式类	any	''
dot	是否显示圆点	boolean	false
dotClass	圆点的样式类	any	''

t-divider Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

t-divider Slots

插槽名	说明
无	组件不支持自定义插槽