本周遇到的一些问题记录

{{inputcontent}}
    

        			
    

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

一般来讲，这样写是没问题的。但是！问题出在我这绑定了mousedown事件，这时候我的dblclick事件并没有触发，一直都是mousedown，所以我们需要改进这个方法，判断一下，是否是双击事件。如果是双击事件，就清楚计时器，直接处理逻辑。

methods:{
    fun1(){
    	clearTimeout(this.time);  //首先清除计时器
        this.time = setTimeout(() => {
            console.log('fun1')//这里面是是fun1原本的逻辑
        }, 200);
    },
    changeInput(){
    	clearTimeout(this.time); 
    	this.isShowInput = true;
    	setTimeout(() => {
            this.$refs.input.focus();
        }, 50)
    },
    hideInput(){
    	this.isShowInput = false
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 用css改文本内容

这种情况可能一般发生在使用其他组件的时候，比如elementUI，我们不想用它的文字，想使用自己的要怎么办呢？

首先，找到它的内容（elementUI一般都是span标签）给隐藏掉，然后使用伪元素设置content。比如结构是这样

	确定


.outer span{
	display:none
}
.outer::after{
	content:'ok'
}
1
2
3
4
5
6
7
8
9
10

设置完成后 原本显示 确定 的按钮 就被我们改为 ok 了。

这里还提供一个chrome开发者工具的功能。当我们改样式的时候，比如hover上去，发现文本并不像我们需要的那样，而是遵循以前的规则，这时候可以右击这个标签，需要改什么就点进去，检查哪个在控制它，直接复制出来，然后改掉 就好啦

4. 拖拽元素可以自动吸附到中央，两元素中心位置可以显示连线（对齐线）

先说一下原理，就是计算元素中心点的位置和中央参考线的位置之差 ，在多少范围内，就让元素的中心位置等于参考线的位置。

两元素连线也是一样的，移动过程中，如果两元素中心对齐了，显示辅助线，可以让正在移动的元素X或Y坐标等于静止的元素，就实现了吸附加两元素连线。

这部分需要改的东西太多了 就不把代码发出来了，原理就是这么个原理

5. 文字描边两种方法

1. text-stroke:这是css中字体描边的key，但是实现描边的方式是居中描边，也就是说他会挤小原本的文字空间，当我们希望文字本身不被挤压的时候 就用text-shadow模拟字体外部描边

2. 模拟的方法如下 0 1px ${color}, 1px 0 ${color}这两句代码实现了右下的阴影，我们可以看到左上是空的。-1px 0 ${color}, 0 -1px ${color}这句代码实现了左上的阴影，方向垂直，水平为负，表示向上向左。就完成了描边的模拟。

:style={textShadow: color} //动态绑定颜色
//color为变量
color = `0 1px ${color}, 1px 0 ${color}, -1px 0 ${color}, 0 -1px ${color}`
1
2
3

6. elementUI的颜色选择器active-change新增参数

在使用elementUI的时候，选择器有两个函数，change和active-change，他们本身是不需要传递参数的，但是可以直接获取到。如下，我们打印value，得到的value就是在选择器中选择的值。

    有默认值
    


changeColor(value){
	console.log(value)
}
1
2
3
4
5
6
7
8
9

如果我们需要传递多个参数怎么办呢？把第一个参数传为$event，接收到的第一个参数就是选择器里面选的value（颜色值）

changeColor(value, param1, ...){
	console.log(value)
}
1
2
3
4
5