1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 函数式组件封装分割线 --> 
<template functional> 
   
  <div class="divider" :style="{backgroundColor: props.bgkColor, color: props.color}"> 
    <span :style="{left: props.left}">{{ props.text }}</span>{{ $props }} 
  </div> 
</template> 
<style lang="scss" scoped> 
.divider { 
  margin: 10px 0; 
  position: relative; 
  width: 100%; 
  height: 1px; 
  background-color: rgb(196, 196, 196); 
  color:  rgb(164, 164, 164); 
  span { 
    padding: 0 10px; 
    position: absolute; 
    top: 50%; 
    left: 10%; 
    transform: translateY(-50%); 
    z-index: 999; 
    background-color: #fff; 
  } 
} 
</style>