Divider分割线

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-divider": "/miniprogram_npm/vtuweapp/divider/vtu-divider"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-divider>Vtu Content</vtu-divider>
    2.

    虚线

    1. <vtu-divider dash>Vtu Content</vtu-divider>
    2.

    自定义宽度

    1. <vtu-divider dash width="80%">Vtu Content</vtu-divider>
    2. <vtu-divider dash width="70%">Vtu Content</vtu-divider>
    3. <vtu-divider dash width="200px">Vtu Content</vtu-divider>
    4.

    居中

    1. <vtu-divider font-color="red">Vtu Content</vtu-divider>
    2.

    自定义Icon

    1. <vtu-divider icon="iconfont icon-biaoxing" dash font-color="#ddd"></vtu-divider>
    2.

    居左

    1. <vtu-divider align="left" line-color="orange">Vtu Content</vtu-divider>
    2.

    居右

    1. <vtu-divider align="right">Vtu Content</vtu-divider>
    2.

    自定义背景色

    1. <vtu-divider bg-color="orange" line-color="orange" font-color="#fff" round>Vtu Content</vtu-divider>
    2.

    组件参数

    Props

    参数说明类型默认值必填
    dash是否为虚线Booleanfalse否
    align文字位置，centerleftrightStringcenter否
    icon显示图标String-否
    bg-color文字区域背景色String#fff否
    font-color文字颜色String-否
    line-color分割线颜色String#ddd否
    width分割线宽度，如100px、80%String-否
    round文字区域是否圆角Booleanfalse否
    bold文字是否加粗Booleanfalse否

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Divider 分割线 - 图1