下载
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