dat.gui 在Vue里的连接使用，包含实例

前言：最近项目在整一个绘制栅格颜色的工具，使用到了dat.gui ，不知道是不是我的搜索方式有问题，只是看到了API的使用，在这一点上如何让两个folder之间产生关联 属实是 折磨了我一会。这篇文章会介绍dat.gui 在Vue 下的 最基本 使用，以及不同folder下的联动。包含增添、删除，更新数据等。在我默认你有一定前端基础的前提下，我会尽可能的缩短篇幅。

下载以及引入

npm install dat.gui --save-dev
安装在开发环境中即可。

import dat from 'dat.gui'

最基础使用

简述一下：这里的关键在于 生成一个GUI的类，往这个类里添加Controller，Controller有4种类型，一个是数字类型，一个是字符串类型，一个是布尔类型，一个是函数类型。分别会有不同的显示状况。要想使用很简单，实例化这个GUI，然后往里面去填充controller即可。

// 在vue 里面 可以这样定义 
// data(){ return { person: {name: 'Sam'}  } }
var gui = new dat.GUI();
gui.add(this.person,'name');

以上代码就可以生成一个在右上角挂着的一个控制器，形状如：name [[[[[input框]]]]]。
当然通常如果稍微复杂一点，有多个属于同一类型的我们最好把他放在一个文件夹，即folder。

如上图所示，只需添加一个文件夹的名字即可。所以。

// 在vue 里面 可以这样定义 
// data(){ return { person: {name: 'Sam'}  } }
var gui = new dat.GUI();
let persons = gui.addFolder('很多人');
persons.add(this.person,'name');

这样就可以显示一个很多人的目录，目录下面有一个name为Sam的控制器。

进阶

假如我想要的是上面图的效果。那么首先，我应该是需要一个可遍历的数组对象。

		"legendData": [
            {
                "val": -20,
                "color": [
                    149,
                    137,
                    211
                ]
            },
            {
                "val": -10,
                "color": [
                    139,
                    206,
                    206
                ]
            },
            {
                "val": 0,
                "color": [
                    70,
                    134,
                    198
                ]
            },
            {
                "val": 10,
                "color": [
                    106,
                    144,
                    41
                ]
            },
            {
                "val": 20,
                "color": [
                    211,
                    173,
                    8
                ]
            },
            {
                "val": 30,
                "color": [
                    235,
                    94,
                    20
                ]
            },
            {
                "val": 40,
                "color": [
                    145,
                    46,
                    11
                ]
            }
        ],

你可以直接把他塞到data里面使用，接着循环遍历这个列表 绘制 颜色。这里应该会有个疑惑，为啥color长这样，跟我在写的项目有关了。

data() {
        return {
            colors: {},
            colorNumObj: {
                nums: 0,
            },
            legendKeyObj: {},
            startFlag: false,
            //  图例 数组对象
            curLegendData: [],
            // 根据图例生成的rgbArray[ [ ] , [ ] ]
            curColorsArr: [],
            viewer: null,
            //  定时器 id
            timer: 3,
            startTimeStamp: 0,

            // sortKey
            lastSortKey: [],
        }
    },

根据 数据 处理colors 生成颜色对象

methods: {
		//这个 函数 就是为了把 key 值 排序  分割成 数组形式。用于得到排序的结果
		// 而不是直接通过for in 去遍历对象  
		keySort: function (obj) {
            let sortKeyStr = Object.keys(obj)
                .sort((a, b) => a - b)
                .join(',');
            let sortKeyArr = sortKeyStr.split(',');
            return sortKeyArr;
        },
}
mounted(){
	let legendDate = this.legendDate; //这个在上面已经给出数据了。
	for (let i = 0; i < legendDate.length; i++) {
   		console.log(legendDate[i])
   		let str = legendDate[i].color.join(',')
   		let value = legendDate[i].val;
   		this.$set(this.colors, value, `rgb(${str})`)
	}
		

	let colorKeyArr = this.keySort(_C_colors)
	      for (let i = 0, ii = colorKeyArr.length; i < ii; i++) {
	          this.$set(
	              this.legendKeyObj,
	              `第${i + 1}个颜色数值`,
	              Number(`${legendDate[i].val}`)
	          )
	      }
	// 上面操作 做如下事情
	// 1、初始化了 this.colors 对象 形状如 {  '20': rgb(?,?,?), '30': rgb(?,?,?)   }
	// 2、 初始化了 this.legendKeyObj 对象 形状如 { '第1个颜色数值' , 20}
	
}

var gui = new dat.GUI()
var f = gui.addFolder('颜色调试');
var nums = gui.addFolder('颜色数值')
let legendKeyObj = this.legendKeyObj
for (let i in legendKeyObj) {
	// 先获取 key 的索引 匹配 数字。 为什么这样做？因为在finishChange里  更新的这个操作已经完成了。
	// 所以 无法 拿到最开始的key 。 所以需要绕一个圈去进行修改 操作。
	nums.add(legendKeyObj, i).min(-100).max(1000).step(1).onFinishChange((e) => {
		// e 传进来一个改变后的值
		// 这个handler 做的 主要就是 同步上面的Colors 的名字的 状态.
		console.log(i);
		let key = Number(i.replace(/[^0-9]/ig,""));
		//  key - 1 得到 索引。  得到索引 之后 读取 sortkey 值 进行修改
		let __controllers__Index = key - 1;
		f.__controllers[__controllers__Index].name(e);
	})
}
let sortKeyArr = this.sortKey();
for (let i = 0, ii = sortKeyArr.length; i < ii; i++) {
	//添加颜色 获取这个排序后的值 按序进行添加操作。
    f.addColor(this.colors, sortKeyArr[i]);
}

以上是 其中的一种联动。即改变某一个文件夹里的值或者某一个控制器的值 让另一个控制器响应。
还有一种联动是对视图的操作。即如何在通过修改了你的引用对象如此文中的this.colors 我后面新增了一个key value，但是视图没有更新的情况；或者是删除了一个keyvalue，视图没有更新的情况。都会分别介绍。

添加

添加同样，往vue上 具有响应式 还是得 $set，但除此之外，如果想响应式地也把dat.gui的视图更新了，别妄想你set之后就会更新，你set顶多只是保证你的状态是正确的。你得手动操作，例如我在某一个控制器的change事件里做如下事情。即可做到响应式地更新。

// 添加属性 与值
this.$set(this.colors, key, rgb?)
//添加到视图
f.addColor(this.colors, key)

删除

// 具体可以打印一下控制器。 remove 某一个控制器 
this.$delete(this.colors,key);
f.remove(f.__controllers[someIndex])

总结

这篇文章就结束了，主要介绍了dat.gui 的使用，以及联动的方法。一个是视图更新的操作，一个是控制器里的某个属性被更改 响应另一个控制器。