Divider 分割线 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

用于将内容分隔为多个区域，支持文字、虚线、渐变、自定义颜色、透明度等配置。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import { Breadcrumbs } from '@21cnfe/vui'
Vue.component('Breadcrumbs', Breadcrumbs)

代码演示

Divider 分割线 divider

基本用法在 :pathes 中传入路径数组，@pathClick用于处理路径点击

<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">Divider</div>
    </div>
    <h3>基本用法</h3>
    <Divider />
    <h3>虚线</h3>
    <Divider :dashed="true" />
    <h3>透明度渐变</h3>
    <Divider :gradient="true" />
    <h3>文字</h3>
    <Divider text="文字" />
    <h3>颜色</h3>
    <Divider fillColor="#1089ff" textColor="#1089ff" text="文字"/>
    <h3>透明度</h3>
    <Divider fillColor="#1089ff" textColor="#1089ff" text="文字" opacity=".3"/>
    <h3>综合用法</h3>
    <h4>自定义颜色 + 渐变</h4>
    <Divider fillColor="#1089ff" gradient />
    <WhiteSpace />
    <h4>自定义颜色 + 渐变 + 文字</h4>
    <Divider fillColor="#1089ff" gradient textColor="#1089ff" text="综合用法示例" />
    <WhiteSpace />
    <h4>自定义颜色 + 虚线</h4>
    <Divider fillColor="#1089ff" dashed />
    <WhiteSpace />
    <h4>自定义颜色 + 虚线 + 文字</h4>
    <Divider fillColor="#1089ff" dashed textColor="#1089ff" text="综合用法示例" />
  </div>
</template>

API

属性	说明	类型	默认值
`text`	分割线的提示文本，可选	String	`''`
`dashed`	虚线样式，可选	Boolean	`false`
`gradient`	透明渐变样式，可选	Boolean	`false`
`fillColor`	填充颜色，可选	String	`#DDDDDD`
`textColor`	文字颜色，可选	String	`#DDDDDD`
`opacity`	透明度，可选	String	`1`

1. Divider 分割线 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Divider 分割线 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

引入方式

代码演示

API

Divider 分割线 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用