u-divider.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view
  3. class="u-divider"
  4. :style="[$u.addStyle(customStyle)]"
  5. @tap="click"
  6. >
  7. <u-line
  8. :color="lineColor"
  9. :customStyle="leftLineStyle"
  10. :hairline="hairline"
  11. :dashed="dashed"
  12. ></u-line>
  13. <text
  14. v-if="dot"
  15. class="u-divider__dot"
  16. >●</text>
  17. <text
  18. v-else-if="text"
  19. class="u-divider__text"
  20. :style="[textStyle]"
  21. >{{text}}</text>
  22. <u-line
  23. :color="lineColor"
  24. :customStyle="rightLineStyle"
  25. :hairline="hairline"
  26. :dashed="dashed"
  27. ></u-line>
  28. </view>
  29. </template>
  30. <script>
  31. import props from './props.js';
  32. /**
  33. * divider 分割线
  34. * @description 区隔内容的分割线,一般用于页面底部"没有更多"的提示。
  35. * @tutorial https://www.uviewui.com/components/divider.html
  36. * @property {Boolean} dashed 是否虚线 (默认 false )
  37. * @property {Boolean} hairline 是否细线 (默认 true )
  38. * @property {Boolean} dot 是否以点替代文字,优先于text字段起作用 (默认 false )
  39. * @property {String} textPosition 内容文本的位置,left-左边,center-中间,right-右边 (默认 'center' )
  40. * @property {String | Number} text 文本内容
  41. * @property {String | Number} textSize 文本大小 (默认 14)
  42. * @property {String} textColor 文本颜色 (默认 '#909399' )
  43. * @property {String} lineColor 线条颜色 (默认 '#dcdfe6' )
  44. * @property {Object} customStyle 定义需要用到的外部样式
  45. *
  46. * @event {Function} click divider组件被点击时触发
  47. * @example <u-divider :color="color">锦瑟无端五十弦</u-divider>
  48. */
  49. export default {
  50. name:'u-divider',
  51. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  52. computed: {
  53. textStyle() {
  54. const style = {}
  55. style.fontSize = uni.$u.addUnit(this.textSize)
  56. style.color = this.textColor
  57. return style
  58. },
  59. // 左边线条的的样式
  60. leftLineStyle() {
  61. const style = {}
  62. // 如果是在左边,设置左边的宽度为固定值
  63. if (this.textPosition === 'left') {
  64. style.width = '80rpx'
  65. } else {
  66. style.flex = 1
  67. }
  68. return style
  69. },
  70. // 右边线条的的样式
  71. rightLineStyle() {
  72. const style = {}
  73. // 如果是在右边,设置右边的宽度为固定值
  74. if (this.textPosition === 'right') {
  75. style.width = '80rpx'
  76. } else {
  77. style.flex = 1
  78. }
  79. return style
  80. }
  81. },
  82. methods: {
  83. // divider组件被点击时触发
  84. click() {
  85. this.$emit('click');
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. @import '../../libs/css/components.scss';
  92. $u-divider-margin:15px 0 !default;
  93. $u-divider-text-margin:0 15px !default;
  94. $u-divider-dot-font-size:12px !default;
  95. $u-divider-dot-margin:0 12px !default;
  96. $u-divider-dot-color: #c0c4cc !default;
  97. .u-divider {
  98. @include flex;
  99. flex-direction: row;
  100. align-items: center;
  101. margin: $u-divider-margin;
  102. &__text {
  103. margin: $u-divider-text-margin;
  104. }
  105. &__dot {
  106. font-size: $u-divider-dot-font-size;
  107. margin: $u-divider-dot-margin;
  108. color: $u-divider-dot-color;
  109. }
  110. }
  111. </style>