封装垂直和水平虚线（uniapp和vue均可）

根据项目需求封装~ 用到了linear-gradient

// 所用到参数
X              水平
Y              垂直
dash           虚线
solid          实线
color          颜色
"dash-width"   每条虚线宽度(px)

组件使用

<template>
  <dw-line dash X></dw-line>
</template>

<script>
import dwLine from "@/components/Line/dwLine";

export default{
　　components: { dwLine }
}
</script>

组件代码（uniapp）

 

<template>
  <view :style="style"></view>
</template>

<script>
export default {
  props: {
    dash: {
      type: Boolean,
      default: false,
    },
    solid: {
      type: Boolean,
      default: false,
    },
    X: {
      type: Boolean,
      default: false,
    },
    Y: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "#ededed",
    },
    "dash-width": {
      type: String,
      default: "3",
    },
  },
  computed: {
    style() {
      const height = this.X ? "1px" : "100%";
      const width = this.Y ? "1px" : "100%";
      let background = "#fff";
      if (this.dash) {
        background = `linear-gradient(to ${this.Y ? "top" : "right"}, ${this.color}, ${this.color} ${this.dashWidth / 2}px, transparent ${this.dashWidth / 2}px, transparent);background-size: ${this.Y ? `100% ${this.dashWidth}px` : `${this.dashWidth}px 100%`}`;
      } else if (this.solid) {
        background = `${this.color}`;
      }
      return `height:${height};width:${width};background:${background}`;
    },
  },
};
</script>