Divider分割线

# 基础用法

我,因为了解才分开,甜蜜不能够倒带,怎么重来

我,知道你对我的爱,心疼你为我等待,选择离开

<template>
  <div class="t-basic-divider-area">
    <span>我,因为了解才分开,甜蜜不能够倒带,怎么重来</span>
    <as-divider></as-divider>
    <span>我,知道你对我的爱,心疼你为我等待,选择离开</span>
  </div>
</template>
<script>
export default {
  name: "t-basic-divider",
}
</script>
<style>

</style>

Copy

# 设置文案

我们既然曾经拥有,我的爱就不想停顿

汉武大帝

饿了就叫美团

既然选择了远方,便只顾风雨兼程

热爱生命

<template>
  <div class="t-text-divider-area">
    <span>我们既然曾经拥有,我的爱就不想停顿</span>
    <as-divider content-position="left">汉武大帝</as-divider>
    <span>饿了就叫美团</span>
    <as-divider><i class="as-icon-mobile-phone"></i></as-divider>
    <span>既然选择了远方,便只顾风雨兼程</span>
    <as-divider content-position="right">热爱生命</as-divider>
  </div>
</template>
<script>
export default {
  name: "t-text-divider",
}
</script>
<style>
</style>

Copy

# 垂直分割

暴雨天

照逛街

偷笑别人花了脸

<template>
  <div class="t-vertical-divider-area">
    <span>暴雨天</span>
    <as-divider direction="vertical"></as-divider>
    <span>照逛街</span>
    <as-divider direction="vertical"></as-divider>
    <span>偷笑别人花了脸</span>
  </div>
</template>
<script>
export default {
  name: "t-vertical-divider",
}
</script>
<style>
</style>

Copy

# Attributes

参数	默认值	说明
direction	horizontal	设置分割线方向,类型为String,可选值为horizontal/vertical
content-position	center	设置分割线文案的位置,类型为String,可选值为left/right/center

← Card卡片