JView UIDivider 组件，用于分割区块或内容。
基本用法
我是 Title
我是普通文本
不带文字的：
展开查看代码
vue
<template>
<j-divider>我是 Title</j-divider>
<j-divider plain>我是普通文本</j-divider>
<p>不带文字的：</p>
<j-divider></j-divider>
</template><template>
<j-divider>我是 Title</j-divider>
<j-divider plain>我是普通文本</j-divider>
<p>不带文字的：</p>
<j-divider></j-divider>
</template>定制风格
可以定制分割线的风格和颜色等。
Dashed
Dashed & Red
展开查看代码
vue
<template>
<j-divider dashed>Dashed</j-divider>
<j-divider dashed lineColor="red">Dashed & Red</j-divider>
</template><template>
<j-divider dashed>Dashed</j-divider>
<j-divider dashed lineColor="red">Dashed & Red</j-divider>
</template>调整位置和距离
Left
Right
Left
Left
Right
Right
展开查看代码
vue
<template>
<j-divider position="left">Left</j-divider>
<j-divider position="right">Right</j-divider>
<j-divider position="left" :sideMargin="100">Left</j-divider>
<j-divider position="left" :sideMargin="0">Left</j-divider>
<j-divider position="right" sideMargin="100px">Right</j-divider>
<j-divider position="right" sideMargin="0%" lineColor="blue">Right</j-divider>
</template><template>
<j-divider position="left">Left</j-divider>
<j-divider position="right">Right</j-divider>
<j-divider position="left" :sideMargin="100">Left</j-divider>
<j-divider position="left" :sideMargin="0">Left</j-divider>
<j-divider position="right" sideMargin="100px">Right</j-divider>
<j-divider position="right" sideMargin="0%" lineColor="blue">Right</j-divider>
</template>垂直方向
Text Link Button
展开查看代码
vue
<template>
<div style="display: flex; align-items: center">
Text
<j-divider type="vertical" lineColor="red" />
Link
<j-divider type="vertical" lineColor="blue" />
Button
</div>
</template><template>
<div style="display: flex; align-items: center">
Text
<j-divider type="vertical" lineColor="red" />
Link
<j-divider type="vertical" lineColor="blue" />
Button
</div>
</template>属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| dashed | 是否虚线，如果需要定制其他风格，可通过样式覆盖 | boolean | false | 否 |
| lineColor | 线条的颜色 | string | 无 | 否 |
| position | 文本位置 | "center" | "left" | "right" | 'center' | 否 |
| sideMargin | 与最近的一边的距离 | string | number | 无 | 否 |
| plain | 是否为普通文本，即去掉标题效果 | boolean | false | 否 |
| type | 水平或垂直方向 | "horizontal" | "vertical" | 'horizontal' | 否 |