大家好，我是南京吴彦祖，一位专注于前端的工程师，这是我第一次在掘金上发表文章，希望大家轻喷哦，附上一张我家爱猫照。
前阵子遇到了个需求，从构思到代码实现着实花费了不小的心血。咱们废话少说，直接来讲需求，也希望给遇到相似的问题的jym带来一点思路。
如下图所示，希望从前端角度能设计出这样的画板出来，并且我能在画板的线头插入我想要的图标进去（参考图中所画的方式）
刚拿到这需求时，看的我一脸懵逼，毫无头绪，这是什么无厘头需求，而且还要让前端实现？真以为前端是万能的嘛😂，不过因为是第一次遇到这类问题，况且研究会来还能升级我的技能包，我就毫不犹豫的选择接受这一次挑战！
第一次的尝试
最开始的思路是：从图上可以看出长的竖线与短的竖线分别是按照奇偶的方式排列组合，那么我只需要画两根竖线即可解决？想法是好的，画出来的画板的确是能按照图片1:1的实现了，可是我要怎么把我的小图标放到我指定的位置呢？
小图标放到指定位置？那我使用拖拽的功能行不行呢？带着这个疑问去询问了项目经理，直接被一片否决，给出的答复是客户可能会随意拖动，不确定因素太多。好吧，第一个方案直接PASS掉了！
第二次的尝试
这一次吸取了上一回的经验，在指定区域插入小图标。嗯？那只能通过点击的方式来实现？那我点哪里呢？点那根竖线？不过这可点区域也太短了吧。这么点下去，不得把眼睛看花了呀。咦？等等，我是不是可以把它看成一个田字格？只不过左侧的border变为红色就能达到那个效果了？田字格的代码我会写呀！
田字格实现了，那我再加两个格子（6宫格）不就可以实现我想要的效果了？话不多说，立马开搞！ 一组的我们实现了，那只需要v-for循环一下就能呈现出上面画板的样式，那如何用代码构造出一个方便维护的数组呢？
我们来分析下：根据图片，我们不难发现最外层每一行的即为一个大的数组，而我们所画的6宫格为一个整体是第二层数组，六宫格中每个小格子则为第三层的数组。构造的数组结构大致如下：
arrlist:[
{
secondList:[
{
thirdList:[
// 此处为6宫格内需要插入的图片名称
{name:‘’}，{name:‘’}，{name:‘’}，{name:‘’}，{name:‘’}，{name:‘’}，
]
}
]
}
]
我们有了想要的数据结构，下一步就是用代码写出来：
var arr = new Array();
for (var i = 0; i < 18; i++) { //一维长度为18
arr[i] = new Array();
for (var j = 0; j < 28; j++) { //二维长度为28
arr[i][j] = {
id: j,
arrList: [{ name: '' }, { name: '' }, { name: '' }, { name: '' }, { name: '' }, { name: '' }]
};
}
}
至此，我们把数据结构开发出来了，现在只需要三个v-for就能在页面上显示出来啦
html代码我就不啰嗦了，直接上效果图吧～
是不是看着还不错～，那我们把虚线给隐藏，就完全跟我们想要的效果一模一样啦！
而在指定格子内选择我们要的小图标的做法：
只需一一获取到数组上的index即可，比如'0,1,2'代表在第一行的第二个六宫格中,第三个小格子内插入图标，这样的逻辑对我们来说应该不难，我就不一一罗列了。
好了，到这里我们就完美解决了此任务。如果大家能想到更好的方案，欢迎在评论区留言。
