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:'草莓'
    }]

有问题可联系 https://github.com/qdleader/qdleader