Divider 分隔符

概述

区隔内容的分割线。

对不同章节的文本段落进行分割。

使用指南

在.vue中引入组件

<script>
    import iDivider from 'iview-mpvue/dist/components/divider/divider'
    export default {
        components: {
            'i-divider': iDivider
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/divider/style/css'

示例

<div class="i-divider-demo">
    <div class="one-tag">基本用法</div>
    <div class="i-divider-demo-des">注: 如果同时存在slot和传递内容两个参数只有传递参数content生效</div>
    <div class="i-divider-mart">
        <i-divider content="加载已经完成,没有其他数据"></i-divider>
    </div>
    <div class="i-divider-mart">
        <i-divider content="加载已经完成,没有其他数据" color="#2d8cf0" lineColor="#2d8cf0"></i-divider>
    </div>
    <div class="i-divider-mart">
        <i-divider content="加载已经完成,没有其他数据" lineColor="#2d8cf0"></i-divider>
    </div>
    <div class="i-divider-mart">
        <i-divider content="加载已经完成,没有其他数据" color="#ed3f14" lineColor="#ed3f14"></i-divider>
    </div>
    <div class="i-divider-mart">
        <i-divider content="加载已经完成,没有其他数据" color="#ff9900" lineColor="#ff9900"></i-divider>
    </div>
    <div class="one-tag">自定义内容</div>
    <div class="i-divider-mart">
        <i-divider  color="#2d8cf0" lineColor="#2d8cf0">加载已经完成,没有其他数据</i-divider>
    </div>
    <div class="i-divider-mart">
        <i-divider color="#ed3f14" lineColor="#ed3f14">加载已经完成,没有其他数据</i-divider>
    </div>
</div>

API

Divider properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
content	内容，不定义则使用 slot	String	-
height	高度	Number	48
color	文字颜色	String	#80848f
line-color	辅助线的颜色	String	#e9eaec
size	文字大小