Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

u-divider.vue 3.9 KiB

2 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <view class="u-divider" :style="{
  3. height: height == 'auto' ? 'auto' : height + 'rpx',
  4. backgroundColor: bgColor,
  5. marginBottom: marginBottom + 'rpx',
  6. marginTop: marginTop + 'rpx'
  7. }" @tap="click">
  8. <view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
  9. <view v-if="useSlot" class="u-divider-text" :style="{
  10. color: color,
  11. fontSize: fontSize + 'rpx'
  12. }"><slot /></view>
  13. <view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
  14. </view>
  15. </template>
  16. <script>
  17. /**
  18. * divider 分割线
  19. * @description 区隔内容的分割线,一般用于页面底部"没有更多"的提示。
  20. * @tutorial https://www.uviewui.com/components/divider.html
  21. * @property {String Number} half-width 文字左或右边线条宽度,数值或百分比,数值时单位为rpx
  22. * @property {String} border-color 线条颜色,优先级高于type(默认#dcdfe6)
  23. * @property {String} color 文字颜色(默认#909399)
  24. * @property {String Number} fontSize 字体大小,单位rpx(默认26)
  25. * @property {String} bg-color 整个divider的背景颜色(默认呢#ffffff)
  26. * @property {String Number} height 整个divider的高度,单位rpx(默认40)
  27. * @property {String} type 将线条设置主题色(默认primary)
  28. * @property {Boolean} useSlot 是否使用slot传入内容,如果不传入,中间不会有空隙(默认true)
  29. * @property {String Number} margin-top 与前一个组件的距离,单位rpx(默认0)
  30. * @property {String Number} margin-bottom 与后一个组件的距离,单位rpx(0)
  31. * @event {Function} click divider组件被点击时触发
  32. * @example <u-divider color="#fa3534">长河落日圆</u-divider>
  33. */
  34. export default {
  35. name: 'u-divider',
  36. props: {
  37. // 单一边divider横线的宽度(数值),单位rpx。或者百分比
  38. halfWidth: {
  39. type: [Number, String],
  40. default: 150
  41. },
  42. // divider横线的颜色,如设置,
  43. borderColor: {
  44. type: String,
  45. default: '#dcdfe6'
  46. },
  47. // 主题色,可以是primary|info|success|warning|error之一值
  48. type: {
  49. type: String,
  50. default: 'primary'
  51. },
  52. // 文字颜色
  53. color: {
  54. type: String,
  55. default: '#909399'
  56. },
  57. // 文字大小,单位rpx
  58. fontSize: {
  59. type: [Number, String],
  60. default: 26
  61. },
  62. // 整个divider的背景颜色
  63. bgColor: {
  64. type: String,
  65. default: '#ffffff'
  66. },
  67. // 整个divider的高度单位rpx
  68. height: {
  69. type: [Number, String],
  70. default: 'auto'
  71. },
  72. // 上边距
  73. marginTop: {
  74. type: [String, Number],
  75. default: 0
  76. },
  77. // 下边距
  78. marginBottom: {
  79. type: [String, Number],
  80. default: 0
  81. },
  82. // 是否使用slot传入内容,如果不用slot传入内容,先的中间就不会有空隙
  83. useSlot: {
  84. type: Boolean,
  85. default: true
  86. }
  87. },
  88. computed: {
  89. lineStyle() {
  90. let style = {};
  91. if(String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth;
  92. else style.width = this.halfWidth + 'rpx';
  93. // borderColor优先级高于type值
  94. if(this.borderColor) style.borderColor = this.borderColor;
  95. return style;
  96. }
  97. },
  98. methods: {
  99. click() {
  100. this.$emit('click');
  101. }
  102. }
  103. };
  104. </script>
  105. <style lang="scss" scoped>
  106. @import "../../libs/css/style.components.scss";
  107. .u-divider {
  108. width: 100%;
  109. position: relative;
  110. text-align: center;
  111. display: flex;
  112. justify-content: center;
  113. align-items: center;
  114. overflow: hidden;
  115. flex-direction: row;
  116. }
  117. .u-divider-line {
  118. border-bottom: 1px solid $u-border-color;
  119. transform: scale(1, 0.5);
  120. transform-origin: center;
  121. &--bordercolor--primary {
  122. border-color: $u-type-primary;
  123. }
  124. &--bordercolor--success {
  125. border-color: $u-type-success;
  126. }
  127. &--bordercolor--error {
  128. border-color: $u-type-primary;
  129. }
  130. &--bordercolor--info {
  131. border-color: $u-type-info;
  132. }
  133. &--bordercolor--warning {
  134. border-color: $u-type-warning;
  135. }
  136. }
  137. .u-divider-text {
  138. white-space: nowrap;
  139. padding: 0 16rpx;
  140. display: inline-flex;
  141. }
  142. </style>