推荐一个vue3的九宫格抽奖组件，开箱即用

奖项图片和奖项名字和转到哪个最终中奖均可配置。

最终效果大致如下

下载

npm install qdleader-cj

在mian.js中引入

import plug from 'qdleader-cj'
import 'qdleader-cj/lib/plugin.css'

createApp(App)
    .use(plug)
    .mount('#app')

在组件中使用

<drawBox /> 就是要引入的组件

<template>
  <div class="list">
    <drawBox  :imgArr="newArr1" :awardNum="2"/>

  </div>
</template>

<script>
import {ref , onMounted} from 'vue';

import logo from './logo.png';
let newArr = [
    {
        img:logo,
        title:'草莓'
    },
        {
        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',
        title:'草莓'
    },    {
        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',
        title:'草莓'
    },    {
        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',
        title:'草莓'
    },    {
        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',
        title:'草莓'
    },    {
        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',
        title:'草莓'
    },    {
        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',
        title:'草莓'
    }, {
        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',
        title:'草莓'
    }
]
export default {
  name: 'HelloWorld11',
  props: {
    msg: String
  },

  setup() {
      let newArr1 = ref(newArr)
      return {
          newArr1
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list {
    width: 98%;
    margin: 0 auto;
}

</style>

可配置参数

参数名称	type	描述
imgArr	Array	中奖图片信息配置
awardNum	Number	中奖奖项配置

imgArr格式：

[{        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    },      {        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    },    {        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    },    {        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    },    {        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    },    {        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    },    {        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    }, {        img:'https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg',        title:'草莓'    }]

有问题可联系 github.com/qdleader/qd…

福利来啦 跨越山海去拥抱你，你的付出不会被辜负，前端路一起加油。 扫码回复资料可以领10g前端资料，微信搜索qdleader，领取，也可回复加群，加入交流群。

另有github每日更新精选面试题欢迎star github.com/qdleader/qd…