编写复用组件card

模拟淘宝中的商品组件

 

 

组件代码

<template>
  <div class="card" :style="width ? { width: width + 'px' } : {}">
    <div class="img">
      <img :src="imgSrc" :style="imgStyle ? imgStyle : {}" />
    </div>
    <div v-if="activeContext" class="main">
      <span
        class="activeLabel"
        v-if="activeLabel"
        :style="activeLabelStyle ? activeLabelStyle : {}"
      >
        {{ activeLabel }}
      </span>
      <span>{{ activeContext }}</span>
    </div>
    <div v-else class="main"><slot name="main"></slot></div>
    <div v-if="price" class="footer">
      <span class="money">￥</span>{{ prices }}
    </div>
    <div v-else><slot name="footer"></slot></div>
  </div>
</template>
<script>
export default {
  name: "card",
  props: {
    width: {
      type: Number,
    },
    imgStyle: {
      type: Object,
      default: () => {},
    },
    imgSrc: {
      type: String,
    },
    activeContext: {
      type: String,
      default: "",
    },
    activeLabel: {
      type: String,
      default: "",
    },
    activeLabelStyle: {
      type: Object,
      default: () => {},
    },
    price: {
      type: Number,
      default: 0,
    },
  },

  computed: {
    // 格式化价格
    prices: function () {
      let source = String(this.price.toFixed(2));
      let valueStr = source.toString();
      return valueStr.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");
    },
  },
};
</script>

使用方法

<template>
  <div id="app">
    <card v-bind="cardConfig"></card>
    <card v-bind="cardConfig3" style="margin-top: 10px"></card>
    <card v-bind="cardConfig2" style="margin-top: 10px">
      <template v-slot:main>
        <h4 class="h4">花开盆上新韩国花盆</h4>
        <p>
          多肉花盆，立体玫瑰浮雕，田园风格十足。手工制作，经过做旧处理，会有一些微斑瑕疵等等，更加显露出宝贝的淳朴风格。
        </p>
      </template>
    </card>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cardConfig: {
        imgSrc: "板凳.webp",
        activeContext:
          "正宗越南铁木砧板菜板实木家用整木圆形抗菌防霉案板厨房切菜板",
        activeLabel: "造物记",
        price: 203213216.5464654,
      },
      cardConfig3: {
        imgSrc: "摆设.webp",
        activeContext:
          "黑檀实木茶杯垫 杯托茶杯架隔热垫碗垫功夫茶具垫茶托组圆形6片装",
        activeLabel: "新年季",
        activeLabelStyle:{
          color:"white",
          backgroundColor:"red"
        },
        price: 216.554,
      },
      cardConfig2: {
        imgSrc: "盆栽.webp",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果图