l-divider.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <view class="l-divider"
  3. :class="[
  4. 'l-divider--' + (vertical ? 'vertical' : 'horizontal'),
  5. 'l-divider--' + align,
  6. dashed ? 'l-divider--dashed' : '']"
  7. :style="{
  8. 'border-color': color,
  9. color: textColor
  10. }"
  11. >
  12. <!-- #ifdef APP-NVUE -->
  13. <view class="l-divider__before"></view>
  14. <!-- #endif -->
  15. <view class="l-divider__content" v-if="$slots.default || content">
  16. <slot>{{content}}</slot>
  17. </view>
  18. <!-- #ifdef APP-NVUE -->
  19. <view class="l-divider__after"></view>
  20. <!-- #endif -->
  21. </view>
  22. </template>
  23. <script lang="ts">
  24. // @ts-nocheck
  25. import {defineComponent} from '@/uni_modules/lime-shared/vue';
  26. import DividerProps from './props'
  27. const name = 'l-divider'
  28. /**
  29. * LimeDivider 分割线
  30. * @description 分割线
  31. * @tutorial https://ext.dcloud.net.cn/plugin?id=xxxx
  32. * @property {Boolean} dashed 是否使用虚线
  33. * @property {String} content 文本
  34. * @property {Boolean} align = [left|right|center] 内容位置
  35. * @value left align 靠左
  36. * @value right align 靠右
  37. * @value center align 居中
  38. */
  39. export default defineComponent({
  40. name,
  41. props: DividerProps,
  42. setup(props) {
  43. return {}
  44. }
  45. })
  46. </script>
  47. <style lang="scss">
  48. @import './index-u';
  49. </style>