vue云标签效果升级版,动态钻形
参考https://www.cnblogs.com/pangys/p/10570189.html
<template> <div> <ul> <li v-for="(dl, index) in listArr" :key="index"> <a v-for="(item, dli) in dl" :key="dli" :href="item.src" :style="{ color: item.setColor, fontSize: item.setSize }">{{ item.name }}</a> </li> </ul> <button @click="changeCont">改变按钮</button> </div> </template> <script> export default { name: '', components: {}, mixins: [], props: {}, data() { return { listArr: [], list: [ { name: '我是一', setColor: '', setSize: '', src: 'home' }, { name: '我是2', setColor: '', setSize: '', src: 'home1' }, { name: '我是3', setColor: '', setSize: '', src: 'wb' }, { name: '我是4', setColor: '', setSize: '', src: 'wb' }, { name: '我是5', setColor: '', setSize: '', src: 'wb' }, { name: '我是6', setColor: '', setSize: '', src: 'wb' }, { name: '我是7', setColor: '', setSize: '', src: 'wb' }, { name: '我是8', setColor: '', setSize: '', src: 'wb' }, { name: '我是9', setColor: '', setSize: '', src: 'wb' }, { name: '我是10', setColor: '', setSize: '' }, { name: '我是11', setColor: '', setSize: '' }, { name: '我是12', setColor: '', setSize: '' }, { name: '我是13', setColor: '', setSize: '' }, { name: '我是14', setColor: '', setSize: '' }, { name: '我是15', setColor: '', setSize: '' }, { name: '我是16', setColor: '', setSize: '' }, { name: '我是17', setColor: '', setSize: '' }, { name: '我是18', setColor: '', setSize: '' }, { name: '我是19', setColor: '', setSize: '' }, { name: '我是20', setColor: '', setSize: '' }, { name: '我是21', setColor: '', setSize: '' }, { name: '我是22', setColor: '', setSize: '' }, { name: '我是23', setColor: '', setSize: '' } ], setColor: [], setSize: [] }; }, watch: {}, computed: {}, created() {}, mounted() { this.changeCont(); }, destroyed() {}, methods: { getList() { let list = this.NormalSort(this.RandomSplit(this.list.length, 8)); //获取数据结构 let arr4 = JSON.parse(JSON.stringify(this.list)); let temp = this.list .sort(function (a, b) { return Math.random() > 0.5 ? -1 : 1; }) .concat(); return list.map((v, k) => { //根据list生成数据结构 return temp.splice(0, v); }); }, changeCont() { this.listArr = this.getList(); this.listArr.forEach(res => { res.forEach(dlk => { dlk.setColor = this.getColor(); dlk.setSize = this.getSize(); }); }); }, getSize() { //12-30区间 var num = parseInt(Math.random() * 23 + 12); return num + 'px'; }, getColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return 'rgb(' + r + ',' + g + ',' + b + ')'; }, RandomSplit(total, nums, max) { let rest = total; let result = Array.apply(null, { length: nums }) .map((n, i) => nums - i) .map(n => { const v = 1 + Math.floor(Math.random() * (max | ((rest / n) * 2 - 1))); rest -= v; return v; }); result[nums - 1] += rest; return result; }, NormalSort(arr) { var temp = [], i = 0, l = arr.length, leftTo = 0, rightTo = 0, s = arr.sort(function (a, b) { return b - a; }); console.log(s); while (arr.length > 1) { let a = arr.pop(); let b = arr.pop(); if (leftTo < rightTo) { temp[i] = b; temp[l - (i + 1)] = a; } else { temp[i] = b; temp[l - (i + 1)] = a; } i++; } return temp; } } }; </script> <style lang="less" scoped> * { margin: 0; padding: 0; list-style: none; } ul { width: 450px; height: 400px; margin: 0 auto; // display: flex; // flex-direction: row; // flex-wrap: wrap; li { margin: 5px 5px; //float: left; a { margin: 0 5px; } } } </style>
知识点一:分析
分析Array.apply(null, { length: 20 })
https://segmentfault.com/a/1190000011435501