divider.nvue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案例</text>
  5. <view>
  6. <u-divider text="分割线"></u-divider>
  7. </view>
  8. </view>
  9. <view class="u-demo-block">
  10. <text class="u-demo-block__title">是否虚线</text>
  11. <view>
  12. <u-divider
  13. text="分割线"
  14. :dashed="true"
  15. ></u-divider>
  16. </view>
  17. </view>
  18. <view class="u-demo-block">
  19. <text class="u-demo-block__title">是否细线</text>
  20. <view>
  21. <u-divider
  22. text="分割线"
  23. :hairline="true"
  24. ></u-divider>
  25. </view>
  26. </view>
  27. <view class="u-demo-block">
  28. <text class="u-demo-block__title">是否以点代替文字</text>
  29. <view>
  30. <u-divider
  31. text="分割线"
  32. :dot="true"
  33. ></u-divider>
  34. </view>
  35. </view>
  36. <view class="u-demo-block">
  37. <text class="u-demo-block__title">文本内容靠左</text>
  38. <view>
  39. <u-divider
  40. text="分割线"
  41. textPosition="left"
  42. ></u-divider>
  43. </view>
  44. </view>
  45. <view class="u-demo-block">
  46. <text class="u-demo-block__title">文本内容靠右</text>
  47. <view>
  48. <u-divider
  49. text="分割线"
  50. textPosition="right"
  51. ></u-divider>
  52. </view>
  53. </view>
  54. <view class="u-demo-block">
  55. <text class="u-demo-block__title">自定义文本颜色</text>
  56. <view>
  57. <u-divider
  58. text="分割线"
  59. textColor="#2979ff"
  60. lineColor="#2979ff"
  61. ></u-divider>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. data() {
  69. return {
  70. }
  71. },
  72. methods: {
  73. }
  74. }
  75. </script>
  76. <style lang="scss">
  77. .u-divider {}
  78. </style>