Recommend a VUE3 grid raffle kit, right out of the box

Award picture and award name and transfer to which final winner can be configured.

The end result is something like this

download

npm install qdleader-cj
Copy the code

Introduced in mian.js



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

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


Copy the code

Used in components

<drawBox /> is the component to be introducedCopy the code
<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 ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}] 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>Copy the code

Configurable parameter

The parameter name type describe
imgArr Array Winning picture information configuration
awardNum Number Winning award configuration

ImgArr formats:

[{img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}, {img: 'https://img2.baidu.com/it/u=3758616094, 217032655 & FM = 26 & FMT = auto&gp = 0. JPG ", the title:' strawberry '}]Copy the code

If you have any questions, contact github.com/qdleader/qd…

Welfare to embrace you across the mountains and seas, your efforts will not be disappointed, front-end road refueling together. Scan the code to reply to the data, you can get 10G front-end data, search qdleader on wechat, get it, you can also reply to add group, join the exchange group.

Github daily update selected interview questions welcome star github.com/qdleader/qd…