You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

84 lines
2.6 KiB

3 years ago
  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>