Divider 分割线

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page class="p.30" title="分割线">
		<t-card class="mb.30" title="Divider 分割线" sub-title="内容进行分割展示"></t-card>
		<t-section title='功能展示' type='p' class="tdb-tdr"></t-section>
		<t-col class="mt.30-tdr-tdb-plr.100-pt.30">
			<t-divider class="mb.30" :line="line" :dot="isdot" :lineStyle="lineStyle">{{text}}</t-divider>
			<t-divider class="mb.30" :line="line" :dot="isdot" type="success"
				:borderStyle="lineStyle">{{text}}</t-divider>
			<t-divider class="mb.30" :line="line" :dot="isdot" type="error"
				:borderStyle="lineStyle">{{text}}</t-divider>
			<t-divider class="mb.30" :line="line" :dot="isdot" type="primary"
				:borderStyle="lineStyle">{{text}}</t-divider>
			<t-divider class="mb.30" :line="line" :dot="isdot" type="warning"
				:borderStyle="lineStyle">{{text}}</t-divider>
		</t-col>
		<t-row class="ffww-tdr-tdb-mt.20-p.20">
			<t-button size='mini' class="mrb.30" type='p' @click="setText">设置文本</t-button>
			<t-button size='mini' type='p' class="mrb.30" @click="setBorder">设置线条样式</t-button>
			<t-button size='mini' type='p' class="mrb.30" @click="setBorder1">不显示线条</t-button>
			<t-button size='mini' type='p' class="mrb.30" @click="setDot">显示圆点</t-button>
		</t-row>
	</t-page>
</template>
<script setup>
	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>

Props

名称	描述	类型	默认值	可选值
size	分割线的大小	String	'small'	'large', 'medium'
line	是否显示线条	Boolean	true	false
borderClass	边框的额外类名	String	''	-
lineStyle	线条的样式	String	'solid'	'dashed', 'dotted'
hairline	是否使用细线	Boolean	true	false
lineClass	线条的额外类名	String	''	-
dot	是否显示圆点	Boolean	false	true
dotClass	圆点的额外类名	String	''	-

Events

事件名	描述	回调参数	版本
-	-	-	-