1. 设计组件

    分析组件的特性，使得组件得到最大的复用（通用性）
    20220302142539842.png

    1. 编写HTML和样式

      1. <template>
      2.  <div class="m-card">
      3.      <div class="m-card-img">
      4.          <img alt="img" />
      5.      </div>
      6.      <div class="m-card-summary">summary</div>
      7.      <div class="footer"></div>
      8.  </div>
      9. </template>
      10. <script>
      11. export default {
      12.  name: "m-card",
      13.  props: {
      14.    width: { //卡片的宽度
      15.      type: Number,
      16.      default: 0
      17.    },
      18.    imgSrc: { //卡片图片的资源地址
      19.      type: String,
      20.      default: "",
      21.      require: true
      22.    },
      23.    imgHeight: {//卡片图片的高度
      24.      type: Number,
      25.      default: 0
      26.    },
      27.    summary: {//卡片的概要
      28.      type: String,
      29.      default: ""
      30.    }
      32.  }
      33. }
      34. </script>

      ```css .m-card { width: 270px; border-radius: 8px; background-color: #fff; overflow: hidden; box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15); padding-bottom: 8px; //&-img —-> m-card-img &-img { height: 152px; img { width: 100%; height: 100%; } } &-summary { padding: 8px; text-align: left; font-size: 14px; } }

    2. 3. 编写逻辑代码
    3. ```vue
    4. <template>
    5. <div class="m-card" :style="width ? { width: width + 'px' } : {}">
    6.   <div class="m-card-img" :style="imgHeight ? { height: imgHeight + 'px' } : {}">
    7.     <img :src="imgSrc" alt="img" />
    8.   </div>
    9.   <div class="m-card-summary" v-if="summary">{{ summary }}</div>
    10.   <div class="m-card-summary" v-else>
    11.     <slot></slot>
    12.   </div>
    13.   <slot name="footer"></slot>
    14.   </div>
    15. </template>
    17. <script>
    18.   export default {
    19.     name: "m-card",
    20.     props: {
    21.       width: { //卡片的宽度
    22.         type: Number,
    23.         default: 0
    24.       },
    25.       imgSrc: { //卡片图片的资源地址
    26.         type: String,
    27.         default: "",
    28.         require: true
    29.       },
    30.       imgHeight: {//卡片图片的高度
    31.         type: Number,
    32.         default: 0
    33.       },
    34.       summary: {//卡片的概要
    35.         type: String,
    36.         default: ""
    37.       }
    39.     }
    40.   }
    41. </script>

    1. 测试组件 ```vue

    ```