！学习--六、图标配置--制作思路整理

图标配置 页面：

知识点：

！！1、精髓：一对多，就设置 一个属性 对应多个值

2、函数里，再套一个函数 里面用this，就要在外面 先声明新变量后，才能使用

如1：

如2：

3、自适应大小屏幕：window.onresize

在vue里的用法：window.onresize写在mounted里，然后在methods里定义pageResize

4、indexOf

indexOf()方法，返回 要找的字符串值 在所在字符串中 首次出现的下标，

（只要返回的值， 大于等于 0，就说明 有这个字符串值）

如果要检索的字符串值没有出现，则该方法返回-1

如：（只要返回的值， 大于等于 0，就说明 有这个字符串值）

！制作思路：

一、页面--左边树结构：

:treeType='list'     树数据为平铺

:treeData='IconClass'    装树数据

 

二、页面--右边表格结构：

1、表格中 父节点

 

在tableData中，装 定制、系统 两个根节点，！！里面用owner_type 为1 或 0 区分，root 区分，

根节点的子节点 装在 children：[ ]中

2、

 

 

2、根节点 对应操作里 的新增； 子节点 对应操作里 的编辑/删除

1、根节点  对应操作里 的新增

！！用root 标记 根节点：

 然后再结构中，根据 root 区分出 根节点，并对根节点---操作里 设置新增

2、子节点 对应操作里 的编辑/删除

3、处理抽屉：同一个抽屉，点击新增对应新增抽屉内容，点击修改对应编辑抽屉内容，以及底部 保存按钮

1、新增、编辑-- 使用drawtitleFlag 值为1，对应新增抽屉；值为0，对应编辑抽屉

 

2、抽屉底部 保存按钮：一个按钮对应 是保存新增、还是保存编辑，就是用drawtitleFlag 实现

4、点击图标，出现预览