preference-drag-vue3
0.0.4前的插件存在严重bug 需要升级到0.0.4
install
npm install preference-drag-vue3
props
| propsName | propsValue |
|---|---|
| netSize | 网格大小 |
| settingData | 数据 |
| topTitle | topTitle 顶部展示的类型名称 |
| leftTitle | leftTitle 左侧展示的类型名称 |
| rightTitle | rightTitle 右侧展示的类型名称 |
| bottomTitle | bottomTitle 下方展示的类型名称 |
| row | 1、必须是奇数且能被settingData.length整除。2、列数：settingData.length / row（必须是奇数） |
demo
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import PreferenceDragVue3 from 'preference-drag-vue3'
import "preference-drag-vue3/dist/style.css"
const app = createApp(App)
app.use(PreferenceDragVue3)
app.mount('#app')
<template>
<preferenceDrag :size="300" :row="5" :settingData="settingData" />
</template>
<script setup lang="ts">
const settingData = [
{
desc: '11',
value: '1-1',
background:'rgb(150, 248, 163)',
borderColor:'rgba(150, 248, 163, .3)',
},
{
desc: '12',
value: '1-2',
background:'rgb(128, 245, 144)',
borderColor:'rgba(128, 245, 144, .3)',
},
{
desc: '13',
value: '1-3',
background:'rgb(117, 241, 133)',
borderColor:'rgba(117, 241, 133, .3)',
},
{
desc: '14',
value: '1-4',
background:'rgb(12, 158, 32)',
borderColor:'rgba(12, 158, 32, .3)',
},
{
desc: '15',
value: '1-5',
background:'rgb(6, 102, 18)',
borderColor:'rgba(6, 102, 18, .3)',
},
{
desc: '21',
value: '2-1',
background:'rgb(86, 248, 199)',
borderColor:'rgba(86, 248, 199, .3)',
},
{
desc: '22',
value: '2-2',
background:'rgb(77, 219, 176)',
borderColor:'rgba(77, 219, 176, .3)',
},
{
desc: '23',
value: '2-3',
background:'rgb(61, 170, 137)',
borderColor:'rgba(61, 170, 137, .3)',
},
{
desc: '24',
value: '2-4',
background:'rgb(47, 126, 102)',
borderColor:'rgba(47, 126, 102, .3)',
},
{
desc: '25',
value: '2-5',
background:'rgb(32, 85, 69)',
borderColor:'rgba(32, 85, 69, .3)',
},
{
desc: '31',
value: '3-1',
background:'rgb(142, 205, 247)',
borderColor:'rgba(142, 205, 247, .3)',
},
{
desc: '32',
value: '3-2',
background:'rgb(104, 164, 204)',
borderColor:'rgba(104, 164, 204, .3)',
},
{
desc: '33',
value: '3-3',
background:'rgb(69, 125, 161)',
borderColor:'rgba(69, 125, 161, .3)',
},
{
desc: '34',
value: '3-4',
background:'rgb(45, 94, 124)',
borderColor:'rgba(45, 94, 124, .3)',
},
{
desc: '35',
value: '3-5',
background:'rgb(34, 100, 141)',
borderColor:'rgba(34, 100, 141, .3)',
},
{
desc: '41',
value: '4-1',
background:'rgb(218, 118, 243)',
borderColor:'rgba(218, 118, 243, .3)',
},
{
desc: '42',
value: '4-2',
background:'rgb(159, 79, 179)',
borderColor:'rgba(159, 79, 179, .3)',
},
{
desc: '43',
value: '4-3',
background:'rgb(122, 57, 138)',
borderColor:'rgba(122, 57, 138, .3)',
},
{
desc: '44',
value: '4-4',
background:'rgb(164, 63, 189)',
borderColor:'rgba(164, 63, 189, .3)',
},
{
desc: '45',
value: '4-5',
background:'rgb(193, 58, 226)',
borderColor:'rgba(193, 58, 226, .3)',
},
{
desc: '51',
value: '5-1',
background:'rgb(238, 98, 163)',
borderColor:'rgba(238, 98, 163, .3)',
},
{
desc: '52',
value: '5-2',
background:'rgb(214, 76, 140)',
borderColor:'rgba(214, 76, 140, .3)',
},
{
desc: '53',
value: '5-3',
background:'rgb(161, 46, 100)',
borderColor:'rgba(161, 46, 100, .3)',
},
{
desc: '54',
value: '5-4',
background:'rgb(207, 21, 108)',
borderColor:'rgba(207, 21, 108, .3)',
},
{
desc: '55',
value: '5-5',
background:'rgb(235, 13, 116)',
borderColor:'rgba(235, 13, 116, .3)',
},
]
</script>
