ThSpace间隔

自动分割,区分开内容,可自定义间隔类型

依赖说明

无

基本使用

<th-space>
  <div v-for="i in 3" :key="i">
    <a>div{{ i }} <span style="color: red">滴滴滴滴</span></a>
  </div>
  我也会被分隔哦
</th-space>

<th-space direction="vertical" fill :fill-ratio="50" alignment="center">
  <div v-for="i in 3" :key="i">
    <a>div{{ i }} <span style="color: red">滴滴滴滴</span></a>
  </div>
  我也会被分隔哦
</th-space>

<th-space direction="vertical" fill :fill-ratio="50" alignment="center">
  <template #spacer>
    ----
  </template>
  
  <div v-for="i in 3" :key="i">
    <a>div{{ i }} <span style="color: red">滴滴滴滴</span></a>
  </div>
</th-space>

插入VNode类型

<template>
    <th-space :spacer="spacer">
        <div v-for="i in 3" :key="i">
          <a>div{{ i }} <span style="color: red">滴滴滴滴</span></a>
        </div>
    </th-space>
</template>

<script>
export default {
  data () {
    return {
      spacer: null
    }
  },
  created() {
    this.spacer = this.$createElement('el-image', {
      style: 'width: 20px;height:20px;',
      props: { src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' }
    })
  }
}
</script>

Attributes

参数	说明	类型	默认值	可选值
alignment	对齐的方式	String	center	center/stretch/flex-start/flex-end/baseline
direction	排列方向	String	horizontal	horizontal/vertical
spacer	间隔符,支持插入自定义组件	String/Number/VNode	--	--
size	间隔大小	Number	12	--
wrap	设置是否自动折行	Boolean	false	false/true
fill	子元素是否填充父容器	Boolean	false	false/true
fillRatio	填充父容器的比例	Number	100	--
itemClass	每个元素自定义的类名	String	--	--

slots

name	说明
default	默认的内容
spacer	间隔的内容