vue3科技感卡片背景封装

image.png

利用<slot></slot> 特性即可，这方面微信小程序也是差不多的玩法在<script>中

export default {
    name: 'CornerDivs',
    mounted() {
    },
};

用法:

<template>
  33333333333333
      <CornerDivs>
        <div style="width: 50px;height: 200px;" >
fffffffffff
        </div>
      </CornerDivs>
      
      <CornerDivs>
        <div style="width: 50px;height: 200px;" >
fffffffffff
        </div>
      </CornerDivs>
      <CornerDivs>
        <div style="width: 50px;height: 200px;" >
fffffffffff
        </div>
      </CornerDivs>
      <CornerDivs>
        <div style="width: 50px;height: 200px;" >
fffffffffff
        </div>
      </CornerDivs>
      <CornerDivs>
        <div style="width: 50px;height: 200px;" >
fffffffffff
        </div>
      </CornerDivs>

  </template>
  
  <script setup>
  import { ref } from "vue";
  import CornerDivs from '../../components/mycard.vue';
  </script>
  <style>
  </style>

完整代码mycard.vue如下: