Tui Plus Vapor

Appearance

t-divider ​

Divider 分割线

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <!-- 基础用法 -->
  <t-divider class="mb-30" :line="line" :dot="isdot" :lineStyle="lineStyle" :text="text"></t-divider>
  
  <!-- 不同类型 -->
  <t-divider class="mb-30" :line="line" :dot="isdot" type="success" :lineStyle="lineStyle" :text="text"></t-divider>
  <t-divider class="mb-30" :line="line" :dot="isdot" type="error" :lineStyle="lineStyle" :text="text"></t-divider>
  <t-divider class="mb-30" :line="line" :dot="isdot" type="primary" :lineStyle="lineStyle" :text="text"></t-divider>
  <t-divider class="mb-30" :line="line" :dot="isdot" type="warning" :lineStyle="lineStyle" :text="text"></t-divider>
</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>

Props ​

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

Events ​

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

Slots ​

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