vue 动态style + computed 图片资源

一、 style 单个属性 写法

  <div
    class="m-step"
    :style="{
      cursor: getCursor(item),
      backgroundImage: `url(${getImage(item)})`,
    }"
    @click="$emit('current', item)"
  >
    <span class="text"> {{ index }} {{ item.text }} </span>
  </div>
</template>

<script>
export default {
  name: "MStep",
  props: {
    index: {
      type: Number,
      default: 1,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    getCursor() {
      return (item) => {
        // 1绿色 2蓝色 3灰色
        return item.status === 3 ? "not-allowed" : "pointer";
      };
    },
    getImage() {
      return (item) => {
        const statusMap = {
          1: "green",
          2: "blue",
          3: "gray",
        };
        // require 函数参数不支持 变量写法
        return require(`../../assets/${statusMap[item.status]}.svg`);
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.m-step {
  width: 130px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: cover;
  font-weight: 600;
  color: #ffffff;
  position: relative;
  .text {
    position: absolute;
    left: 30px;
    top: 16px;
  }
}
</style>

二、 style 合并写法

<template>
  <div class="m-step" :style="getStyle(item)" @click="$emit('current', item)">
    <span class="text"> {{ index }} {{ item.text }} </span>
  </div>
</template>

<script>
export default {
  name: "MStep",
  props: {
    index: {
      type: Number,
      default: 1,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    getStyle() {
      const statusMap = {
        1: "green",
        2: "blue",
        3: "gray",
      };
      return (item) => {
        // 1绿色 2蓝色 3灰色
        return {
          cursor: item.status === 3 ? "not-allowed" : "pointer",
          backgroundImage: `url(${require(`../../assets/${
            statusMap[item.status]
          }.svg`)})`,
        };
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.m-step {
  width: 130px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: cover;
  font-weight: 600;
  color: #ffffff;
  position: relative;
  .text {
    position: absolute;
    left: 30px;
    top: 16px;
  }
}
</style>