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

// 所用到参数
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>

<template>
  <view v-if="dash" :style="style"></view>
  <view v-else-if="solid" :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: "#dfe6e9",
    },
    "dash-width": {
      type: String,
      default: "6",
    },
  },
  computed: {
    style() {
      const height = this.X ? "2px" : "100%";
      const width = this.Y ? "2px" : "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>

<style lang="scss" scoped></style>