封裝垂直和水平虛線（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>