68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
|
import type { Directive } from 'vue';
|
|||
|
|
import { watch } from 'vue';
|
|||
|
|
|
|||
|
|
const xssTokenReplace = { // xss repalce rules
|
|||
|
|
'<': '<',
|
|||
|
|
'>': '>'
|
|||
|
|
// '"': '"',
|
|||
|
|
// "'": '''
|
|||
|
|
};
|
|||
|
|
function generateReg(replaceRules:Record<string, string>) { // 替换字符查找
|
|||
|
|
const temArr = [];
|
|||
|
|
temArr.push('(');
|
|||
|
|
for (const key in replaceRules) {
|
|||
|
|
temArr.push(key);
|
|||
|
|
temArr.push('|');
|
|||
|
|
}
|
|||
|
|
temArr.length > 1 && temArr.pop();
|
|||
|
|
temArr.push(')');
|
|||
|
|
return new RegExp(temArr.join(''), 'g');
|
|||
|
|
}
|
|||
|
|
const replaceReg = generateReg(xssTokenReplace);
|
|||
|
|
function replaceAll(str:string, replaceRules:Record<string, string>) {
|
|||
|
|
return str.replace(replaceReg, function(match, position, original) { return replaceRules[match]; });
|
|||
|
|
}
|
|||
|
|
const repairMaxLength = function(str:string, maxLength:number) { // 设置最大长度不生效的问题
|
|||
|
|
const len = str.length;
|
|||
|
|
return len > maxLength ? str.slice(0, maxLength) : str;
|
|||
|
|
};
|
|||
|
|
const handlePaste = function(vnode:any, event:any) { // 复制粘贴过滤
|
|||
|
|
const value = event.target.value;
|
|||
|
|
const pos = event.target.selectionStart;
|
|||
|
|
const pasetText = (event.clipboardData || (window as any).clipboardData).getData('text');
|
|||
|
|
const insertStr = replaceAll(pasetText, xssTokenReplace);
|
|||
|
|
let composeStr = value.slice(0, pos) + insertStr + value.slice(pos);
|
|||
|
|
if (vnode.ctx.attrs?.maxlength) composeStr = repairMaxLength(composeStr, vnode.ctx.attrs?.maxlength);
|
|||
|
|
event.target.value = composeStr;
|
|||
|
|
event.target.setSelectionRange(pos + insertStr.length, pos + insertStr.length);// 计算鼠标位置
|
|||
|
|
vnode.ctx.emit('update:modelValue', event.target.value);// 双向绑定更新
|
|||
|
|
event.preventDefault();
|
|||
|
|
};
|
|||
|
|
const handleInput = function(vnode:any, event:any) { // 输入替换
|
|||
|
|
if (replaceReg.test(event.key)) {
|
|||
|
|
const pos = event.target.selectionStart;
|
|||
|
|
const value = event.target.value;
|
|||
|
|
const insertStr = replaceAll(event.key, xssTokenReplace);
|
|||
|
|
let composeStr = value.slice(0, pos) + insertStr + value.slice(pos);
|
|||
|
|
if (vnode.ctx.attrs?.maxlength) composeStr = repairMaxLength(composeStr, vnode.ctx.attrs?.maxlength);
|
|||
|
|
event.target.value = composeStr;
|
|||
|
|
event.target.setSelectionRange(pos + insertStr.length, pos + insertStr.length);// 计算鼠标位置
|
|||
|
|
vnode.ctx.emit('update:modelValue', event.target.value);// 双向绑定更新
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
export const xssEscape = (str:string) => replaceAll(str, xssTokenReplace);// 替换渲染中的非法字符（如果需要保留v-html的元素渲染，请勿使用）
|
|||
|
|
let handleMoveInput:any = null;
|
|||
|
|
let handleMovePaste:any = null;
|
|||
|
|
export default {
|
|||
|
|
mounted(el, binding, vnode) {
|
|||
|
|
el.addEventListener('paste', handleMovePaste = handlePaste.bind(null, vnode));
|
|||
|
|
el.addEventListener('keypress', handleMoveInput = handleInput.bind(null, vnode));
|
|||
|
|
},
|
|||
|
|
beforeUnmount(el) {
|
|||
|
|
el.removeEventListener('paste', handleMovePaste);
|
|||
|
|
el.removeEventListener('keypress', handleMoveInput);
|
|||
|
|
}
|
|||
|
|
} as Directive;
|
|||
|
|
|