今天在开发过程中出现了一个bug，在这里简单记录一下。

ElementUI table组件，清空排序或筛选的条件后，表格的排序的那个小三角样式还在。

这时需要给table设置一个 ref 属性，如下

```vue
<el-table
   ref="currentTable"
...>

</el-table>
```

然后当重新加载数据的时候，只需要如下设置

```js
this.$refs.currentTable?.clearSort()
this.$refs.currentTable?.clearFilter()
```



ElementUI table排序条件样式不清空的问题

# 前言
今天接到一个给页面添加水印的需求。在看过各种五花八门的版本之后，我找到了最稳妥的添加水印方式，在此记录一下。

先列需求：

- 需要灵活处理水印的显示与隐藏。
- 需要添加防删除处理，让用户不能消除水印。

实现原理：

通过 js 创建一个 watermark 元素和一个 canvas 元素，设置watermark 元素的 background-image 为 canvas 使之显示水印。通过 MutationObserver 来监听DOM结构。当 watermark 元素被修改或删除时自动恢复，从而达到仿删除的效果。

具体实现：

**watermark.js**

```js
import $store from '@/store';

export default const watermark = {
	set: (str1, str2) => {
        const canvas = document.createElement('canvas');
        canvas.width = 150;
        canvas.height = 150;
        const ctx = canvas.getContext('2d');
        ctx.rotate(-20 * Math.PI / 180); 
        ctx.translate(-50, 20);
        ctx.font = '100 16px Microsoft JhengHei';
        ctx.fillStyle = '#f4f4f4';
        ctx.fillText(str1, canvas.width / 3, canvas.height / 2);
        ctx.fillText(str2, canvas.width / 3, canvas.ehight / 2 + 20);
        const watermark = document.createElement('div');
        const styleStr = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10000;
        pointer-events: none;
        background-repeat: repeat;
        mix-blend-mode: multiply;
        background-image: url('${canvas.toDataUrl('image/png')}');
        `
        watermark.setAttribute('style', styleStr);
        watermark.id = 'watermark';
        document.body.appenChild(watermark);
        
        // 防删除处理
        const observer = new MutationObserver(() => {
            const watermarkInstance = document.getElementById('watermark');
            if((!watermarkInstance || watermarkInstance && watermarkInstance.getAttribute('style') !== styleStr)){
                if(watermarkInstance){
                    watermarkInstance.setAttribute('style', styleStr);
                }else{
                    if($store.state.user.account){
                        document.body.appendChild(watermark);
                    }else{
                        observer.disconnect();
                    }
                }
            }
        })
        observer.observe(document.body, {
            attributes: true,
            subtree: true,
            childList: true
        })
    },
    close: () => {
        const watermark = document.getElementById('watermark');
        document.body.removeChild(watermark);
    }
}
```

使用：

```js
import $store from '@store';
import watermark from 'utils/watermark'
// 添加水印
watermark.set($store.state.user.account, '这是一段文本');
// 移除水印
watermark.close();
```

# 总结

这里是 Vue 的实现方案，其他框架实现思路基本一致。

页面添加水印效果

# 前言

正则表达式是前端开发过程中不可或缺的一部分，当我们处理各种表单时，都会遇到数据格式校验的问题。

相较于通过各种判断实现的校验，正则表达式的校验更加优雅也更加灵活。

这篇文章就来介绍一下JavaScript中正则表达式的那些事儿~

# 一、创建正则表达式

1、字面量创建

```js
let reg = /-(\w)/g; // 匹配所有的 -[a-z]
```

2、构造函数创建

```js
let reg = new RegExp("\-(\\w)", "g");
let reg = new RegExp(/-(\w)/, "g");
```

> 转义字符：\
>
> 特殊符号在字符串中使用时需要在前面加转义字符。另外转义字符还可以用来进行字符串的换行。

# 二、常用方法

**正则表达式常用方法：**

- reg.test(str)：判断字符串是否匹配正则表达式，返回布尔值。
- reg.exec(str)：找到第一个匹配的值，返回其位置。

**字符串正则相关常用方法：**

- str.match(reg)：返回一个符合正则条件的数组。

# 三、修饰符

- i：忽略大小写

```js
let reg = /abc/i;
let str = 'aBC';
console.log(reg.test(str)) //true
```

- g：全局匹配

```js
let reg = /abc/g;
let str = 'abcdddabc';
console.log(reg.test(str)) //true
console.log(str.match(reg)) //[ 'abc', 'abc' ]
```

- m：多行匹配

```js
let reg1 = /abc$/m;
let reg2 = /abc$/;
let str = 'aabc\nbbb';
console.log(reg1.test(str)) //true
console.log(reg2.test(str)) //false
```

> 注意：可以多个修饰符同时使用，比如 `let reg = /abc/ig`

# 四、表达式

一个表达式代表一位字符。

- `[abc]`：表示查找中括号之间的任何字符。例如：[0-9]、[A-z]、[0-9A-z]
- `[^abc]`：表示查找任何不在中括号之间的字符。这里`^` 代表非的意思。
- `(abc|cba)`：这里`|` 代表或的意思。`()`和数学中的作用类似，会优先计算。

# 五、元字符

和表达式是一个东西，通过一些特定的字符来表示一些常用的表达式。

- `.`：非换行的任何字符。

- `\s`：space，任何为空的字符。

- `\d`：`[0-9]`，digit，任何数字。

- `\w`：`[0-9A-z_]` ，word，数字字母_。

- `\b`：border，单词边界。

- `[\w\W]`：类似这种代表所有字符。

- `\1`：代表反向引用第一个小括号包裹的表达式中的值。

  - ```js
    let reg = /(\w)\1(\w)\2/g
    let str = "aabb123aabb"
    console.log(str.match(reg)) // [ 'aabb', 'aabb' ]
    ```

- `\u0000`：查找Unicode字符集。比如`[\u4e00-\u9fa5]`是中文字符集。

> 元字符用小写字母来代表一类字符，对应的大写字母代表与之相反的字符。
>
> 比如：\d 代表数字，\D 代表非数字。

# 六、量词

- `n+`：包含至少一个n的字符串

- `n*`：包含零个或多个n的字符串

- `n?`：包含零个或一个n的字符串

- `n{X}`：包含X个n的字符串

- `n{X,Y}`：包含X至Y个n的字符串，贪婪匹配原则

- `n{X,}`：包含至少X个n的字符串，惰性匹配原则

- `^n`：以 n 开头的字符串

- `n$`：以 n 结尾的字符串

- `?=n`：正向查找，匹配后一个字符串为n的字符

  - ```js
    let reg = /\w(?=&)/g
    let str = "1&321&1"
    console.log(str.match(reg)) // [ '1', '1' ]
    ```

- `?!n`：正向查找，匹配后一个字符串不为n的字符。

- `?<=n`：反向查找，匹配前一个字符串为n的字符。

  - ```js
    let reg = /(?<=&)\w/g
    let str = "1&321&1"
    console.log(str.match(reg)) // [ '3', '1' ]
    ```

- `?!=n`：反向查找，匹配前一个字符串不为n的字符。

>正则表达式默认是贪婪匹配原则，能多则多。
>
>量词后面加 ？变为惰性匹配原则，能少则少。使用两个?，能取0不取1。
>
>```js
>let reg1 = /n+/g
>let reg2 = /n+?/g
>let str = "nnnn"
>console.log(str.match(reg1)) // [ 'nnnn' ]
>console.log(str.match(reg2)) // [ 'n', 'n', 'n', 'n' ]
>```

# 七、常用的正则表达式汇总

# 结尾

以上就是我对JavaScript中的正则表达式的一些知识总结，更多内容请看 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)

ElementUI table排序条件样式不清空的问题

目录