AI销管
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-line.vue 2.6 KiB

2 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view class="u-line" :style="[lineStyle]">
  3. </view>
  4. </template>
  5. <script>
  6. /**
  7. * line 线条
  8. * @description 此组件一般用于显示一根线条,用于分隔内容块,有横向和竖向两种模式,且能设置0.5px线条,使用也很简单
  9. * @tutorial https://www.uviewui.com/components/line.html
  10. * @property {String} color 线条的颜色(默认#e4e7ed)
  11. * @property {String} length 长度,竖向时表现为高度,横向时表现为长度,可以为百分比,带rpx单位的值等
  12. * @property {String} direction 线条的方向,row-横向,col-竖向(默认row)
  13. * @property {String} border-style 线条的类型,solid-实线,dashed-方形虚线,dotted-圆点虚线(默认solid)
  14. * @property {Boolean} hair-line 是否显示细线条(默认true)
  15. * @property {String} margin 线条与上下左右元素的间距,字符串形式,如"30rpx"
  16. * @example <u-line color="red"></u-line>
  17. */
  18. export default {
  19. name: 'u-line',
  20. props: {
  21. color: {
  22. type: String,
  23. default: '#e4e7ed'
  24. },
  25. // 长度,竖向时表现为高度,横向时表现为长度,可以为百分比,带rpx单位的值等
  26. length: {
  27. type: String,
  28. default: '100%'
  29. },
  30. // 线条方向,col-竖向,row-横向
  31. direction: {
  32. type: String,
  33. default: 'row'
  34. },
  35. // 是否显示细边框
  36. hairLine: {
  37. type: Boolean,
  38. default: true
  39. },
  40. // 线条与上下左右元素的间距,字符串形式,如"30rpx"、"20rpx 30rpx"
  41. margin: {
  42. type: String,
  43. default: '0'
  44. },
  45. // 线条的类型,solid-实线,dashed-方形虚线,dotted-圆点虚线
  46. borderStyle: {
  47. type: String,
  48. default: 'solid'
  49. }
  50. },
  51. computed: {
  52. lineStyle() {
  53. let style = {};
  54. style.margin = this.margin;
  55. // 如果是水平线条,边框高度为1px,再通过transform缩小一半,就是0.5px了
  56. if(this.direction == 'row') {
  57. // 此处采用兼容分开写,兼容nvue的写法
  58. style.borderBottomWidth = '1px';
  59. style.borderBottomStyle = this.borderStyle;
  60. style.width = this.$u.addUnit(this.length);
  61. if(this.hairLine) style.transform = 'scaleY(0.5)';
  62. } else {
  63. // 如果是竖向线条,边框宽度为1px,再通过transform缩小一半,就是0.5px了
  64. style.borderLeftWidth = '1px';
  65. style.borderLeftStyle = this.borderStyle;
  66. style.height = this.$u.addUnit(this.length);
  67. if(this.hairLine) style.transform = 'scaleX(0.5)';
  68. }
  69. style.borderColor = this.color;
  70. return style;
  71. }
  72. }
  73. }
  74. </script>
  75. <style scoped lang="scss">
  76. @import "../../libs/css/style.components.scss";
  77. .u-line {
  78. vertical-align: middle;
  79. }
  80. </style>