feat: tagInput组件
This commit is contained in:
april
parent
76d7780bde
commit
8329eb1c75
|
|
@ -40,13 +40,16 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@types/lodash": "^4.14.195",
|
||||||
"@vitejs/plugin-vue": "^4.2.3",
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
"@vueuse/core": "^10.1.2",
|
"@vueuse/core": "^10.1.2",
|
||||||
"@wangeditor/editor": "^5.1.23",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
"@wangeditor/editor-for-vue": "5.1.10",
|
"@wangeditor/editor-for-vue": "5.1.10",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
|
"codemirror": "^5.65.13",
|
||||||
"echarts": "^5.2.2",
|
"echarts": "^5.2.2",
|
||||||
"element-plus": "^2.3.4",
|
"element-plus": "^2.3.4",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
"path-to-regexp": "^6.2.0",
|
"path-to-regexp": "^6.2.0",
|
||||||
|
|
@ -60,6 +63,7 @@
|
||||||
"@commitlint/cli": "^17.6.3",
|
"@commitlint/cli": "^17.6.3",
|
||||||
"@commitlint/config-conventional": "^17.6.3",
|
"@commitlint/config-conventional": "^17.6.3",
|
||||||
"@iconify-json/ep": "^1.1.10",
|
"@iconify-json/ep": "^1.1.10",
|
||||||
|
"@types/codemirror": "^5.60.7",
|
||||||
"@types/nprogress": "^0.2.0",
|
"@types/nprogress": "^0.2.0",
|
||||||
"@types/path-browserify": "^1.0.0",
|
"@types/path-browserify": "^1.0.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
||||||
|
|
@ -98,4 +102,4 @@
|
||||||
"repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
|
"repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
|
||||||
"author": "有来开源组织",
|
"author": "有来开源组织",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,493 @@
|
||||||
|
<template>
|
||||||
|
<div :class="['tagInputarea', className]">
|
||||||
|
<div
|
||||||
|
ref="cmEle"
|
||||||
|
:class="[
|
||||||
|
'tagInputareaIuput',
|
||||||
|
'ThemeBorderColor3',
|
||||||
|
!!readonly ? 'readonlyBg' : '',
|
||||||
|
]"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import CodeMirror from "codemirror";
|
||||||
|
import "codemirror/lib/codemirror.css";
|
||||||
|
import { getRePosFromStr, MODE } from "./util";
|
||||||
|
// import { isFunction } from "lodash-es";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
mode: {
|
||||||
|
type: Number,
|
||||||
|
default: MODE.TEXT,
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
defaultValue: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
renderTag: {
|
||||||
|
type: Function,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
minHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 20,
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
noCursor: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
operatorsSetMargin: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
autoComma: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 是否禁用复制
|
||||||
|
disabledCopy: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(["onChange", "onBlur", "onFocus"]);
|
||||||
|
//编辑器挂载dom节点
|
||||||
|
const cmEle = ref();
|
||||||
|
|
||||||
|
//编辑器实例
|
||||||
|
let cmInstance: any = null;
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (cmEle.value) {
|
||||||
|
//编辑器初始化
|
||||||
|
cmInstance = CodeMirror(cmEle.value, {
|
||||||
|
value: props.defaultValue,
|
||||||
|
mode: "",
|
||||||
|
lineWrapping: true,
|
||||||
|
cursorHeight: props.noCursor || props.readonly ? 0 : 1,
|
||||||
|
});
|
||||||
|
//最小高度初始化
|
||||||
|
if (props.minHeight) {
|
||||||
|
let height =
|
||||||
|
typeof props.minHeight === "number"
|
||||||
|
? `${props.minHeight}px`
|
||||||
|
: props.minHeight;
|
||||||
|
//编辑器高度
|
||||||
|
cmInstance.setSize("100%", height);
|
||||||
|
//编辑内容高度
|
||||||
|
let codeEle = cmEle.value.getElementsByClassName("CodeMirror-code")[0];
|
||||||
|
codeEle && codeEle.setAttribute("style", `min-height:${height}`);
|
||||||
|
}
|
||||||
|
//默认值初始化
|
||||||
|
if (props.defaultValue) {
|
||||||
|
updateTextareaView();
|
||||||
|
cmInstance.execCommand("goDocEnd");
|
||||||
|
}
|
||||||
|
//监听 value change
|
||||||
|
cmInstance.on("change", cmChange);
|
||||||
|
//监听 value beforeChange
|
||||||
|
cmInstance.on("beforeChange", cmBeforeChange);
|
||||||
|
//监听表单聚焦
|
||||||
|
cmInstance.on("focus", () => {
|
||||||
|
cmEle.value.classList.add("active");
|
||||||
|
cmFocus();
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听表单失焦
|
||||||
|
cmInstance.on("blur", () => {
|
||||||
|
if (cmEle.value) {
|
||||||
|
cmEle.value.classList.remove("active");
|
||||||
|
}
|
||||||
|
cmBlur();
|
||||||
|
});
|
||||||
|
if (props.disabledCopy) {
|
||||||
|
// 禁止复制，防止tag复制的是id
|
||||||
|
cmInstance.on("copy", (cm: any, e: Event) => {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//编辑器change
|
||||||
|
const cmChange = (cm: any, obj: any): void => {
|
||||||
|
let value = cm.getValue();
|
||||||
|
if (obj.origin !== "setValue") {
|
||||||
|
emit("onChange", null, value, obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTextareaView();
|
||||||
|
};
|
||||||
|
|
||||||
|
//编辑器beforeChange
|
||||||
|
const cmBeforeChange = (cm: any, obj: any): any => {
|
||||||
|
let { text } = obj;
|
||||||
|
// 如果是自定义公式，只能允许数字+、-、*、/、( \ ) , .,大写字符
|
||||||
|
if (
|
||||||
|
props.mode === MODE.FORMULA &&
|
||||||
|
(obj.origin === "paste" ||
|
||||||
|
obj.origin === "+input" ||
|
||||||
|
obj.origin === "*compose")
|
||||||
|
) {
|
||||||
|
text = text.map((t: string) =>
|
||||||
|
t.replace(/[^+\-*\/0-9/a-z/A-Z\(\)\,\.]/gm, "").toUpperCase()
|
||||||
|
);
|
||||||
|
// 最大输入10000字符
|
||||||
|
if (text.map((t: string) => t).join("").length > 10000) {
|
||||||
|
text = text
|
||||||
|
.map((t: string) => t)
|
||||||
|
.join("")
|
||||||
|
.slice(0, 10000)
|
||||||
|
.split(",");
|
||||||
|
obj.update(obj.from, obj.to, text);
|
||||||
|
obj.cancel();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (obj.origin === "undo" || obj.origin === "redo") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 事件内，mode只能从每次props取，不然取不到最新
|
||||||
|
if (
|
||||||
|
props.readonly ||
|
||||||
|
(props.mode === MODE.ONLYTAG &&
|
||||||
|
obj.origin !== "+delete" &&
|
||||||
|
obj.origin !== "inserttag" &&
|
||||||
|
obj.origin !== "setValue")
|
||||||
|
) {
|
||||||
|
obj.cancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 事件内，mode只能从每次props取，不然取不到最新
|
||||||
|
if (
|
||||||
|
props.mode === MODE.FORMULA &&
|
||||||
|
obj.origin !== "+delete" &&
|
||||||
|
obj.origin !== "inserttag" &&
|
||||||
|
obj.origin !== "setValue"
|
||||||
|
) {
|
||||||
|
text = text.map((t: any) =>
|
||||||
|
t
|
||||||
|
.toUpperCase()
|
||||||
|
.split("")
|
||||||
|
.filter((t: any) =>
|
||||||
|
(obj.origin === "paste"
|
||||||
|
? /[0-9A-Z\+\-\*\/\(\)\,\.\$]/
|
||||||
|
: /[0-9A-Z\+\-\*\/\(\)\,\.]/
|
||||||
|
).test(t)
|
||||||
|
)
|
||||||
|
.join("")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
props.mode === MODE.DATE &&
|
||||||
|
obj.origin !== "+delete" &&
|
||||||
|
obj.origin !== "inserttag" &&
|
||||||
|
obj.origin !== "setValue"
|
||||||
|
) {
|
||||||
|
text = text.map((t: any) =>
|
||||||
|
t
|
||||||
|
.split("")
|
||||||
|
.filter((t: any) =>
|
||||||
|
(obj.origin === "paste" ? /[0-9YMdhm\+\-\$]/ : /[0-9YMdhm\+\-]/).test(
|
||||||
|
t
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.join("")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
obj.update(obj.from, obj.to, text);
|
||||||
|
};
|
||||||
|
|
||||||
|
//编辑器 foucus
|
||||||
|
const cmFocus = (): void => {
|
||||||
|
emit("onFocus");
|
||||||
|
};
|
||||||
|
|
||||||
|
//编辑器 blur
|
||||||
|
const cmBlur = (): void => {
|
||||||
|
emit("onBlur");
|
||||||
|
};
|
||||||
|
|
||||||
|
//设置 value
|
||||||
|
const setValue = (value: string): void => {
|
||||||
|
// const position = cmInstance.getCursor()
|
||||||
|
cmInstance.setValue(value || "");
|
||||||
|
// const newPosition = {
|
||||||
|
// line: position.line,
|
||||||
|
// ch: position.ch + value.length - 2,
|
||||||
|
// }
|
||||||
|
|
||||||
|
// cmInstance.focus()
|
||||||
|
// cmInstance.setCursor(newPosition)
|
||||||
|
// cmInstance.execCommand('goDocEnd')
|
||||||
|
};
|
||||||
|
const getValue = () => {
|
||||||
|
return cmInstance.getValue();
|
||||||
|
};
|
||||||
|
//回显，更新渲染
|
||||||
|
let markers: any = null;
|
||||||
|
const updateTextareaView = () => {
|
||||||
|
const { mode, operatorsSetMargin } = props;
|
||||||
|
const value = cmInstance.getValue();
|
||||||
|
if (markers) {
|
||||||
|
markers.forEach((marker: any) => marker.clear());
|
||||||
|
}
|
||||||
|
markers = [];
|
||||||
|
markColumns(markers, value);
|
||||||
|
if (mode === MODE.FORMULA || operatorsSetMargin) {
|
||||||
|
markOperators(markers, value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//光标行
|
||||||
|
const markColumns = (markers: any, value: any) => {
|
||||||
|
const poss = getRePosFromStr(value);
|
||||||
|
poss.forEach((pos: any, i: number) => {
|
||||||
|
renderColumnTag(pos.tag, { isLast: i === poss.length - 1 }, (node: any) => {
|
||||||
|
markers.push(
|
||||||
|
cmInstance.markText(
|
||||||
|
{ line: pos.line, ch: pos.start },
|
||||||
|
{ line: pos.line, ch: pos.stop },
|
||||||
|
{ replacedWith: node, handleMouseEvents: true }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//光标操作
|
||||||
|
const markOperators = (markers: any, value: any) => {
|
||||||
|
const poss = getRePosFromStr(value, /\+|\-|\*|\/|\(|\)|,/g);
|
||||||
|
poss.forEach((pos: any, i: number) => {
|
||||||
|
const operatorEle = document.createElement("span");
|
||||||
|
operatorEle.classList.add("operator");
|
||||||
|
operatorEle.innerHTML = pos.tag;
|
||||||
|
markers.push(
|
||||||
|
cmInstance.markText(
|
||||||
|
{ line: pos.line, ch: pos.start },
|
||||||
|
{ line: pos.line, ch: pos.stop },
|
||||||
|
{ replacedWith: operatorEle, handleMouseEvents: true }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//渲染 tag
|
||||||
|
const renderColumnTag = (id: any, options: any, cb: any) => {
|
||||||
|
const node = document.createElement("div");
|
||||||
|
node.classList.add("columnTagCon");
|
||||||
|
//自定义渲染tag
|
||||||
|
// if (props.renderTag && isFunction(props.renderTag)) {
|
||||||
|
// const tag = props.renderTag(id, options);
|
||||||
|
// if (tag instanceof HTMLElement) {
|
||||||
|
// node.appendChild(tag);
|
||||||
|
// cb(node);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
node.append(id);
|
||||||
|
cb(node);
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
|
||||||
|
//插入 tag
|
||||||
|
const insertColumnTag = (id: string) => {
|
||||||
|
const { mode, autoComma } = props;
|
||||||
|
const position = cmInstance.getCursor();
|
||||||
|
const editorValue = cmInstance.getValue();
|
||||||
|
|
||||||
|
cmInstance.replaceRange(
|
||||||
|
`${
|
||||||
|
mode === MODE.FORMULA && autoComma && editorValue[position.ch - 1] === "$"
|
||||||
|
? ","
|
||||||
|
: ""
|
||||||
|
}$${id}$`,
|
||||||
|
position,
|
||||||
|
undefined,
|
||||||
|
"inserttag"
|
||||||
|
);
|
||||||
|
cmInstance.focus();
|
||||||
|
cmInstance.execCommand("goDocEnd");
|
||||||
|
if (cmEle.value) {
|
||||||
|
cmEle.value.scrollTop = cmEle.value.scrollHeight - cmEle.value.clientHeight;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 获取光标位置
|
||||||
|
const getCursor = () => {
|
||||||
|
return cmInstance.getCursor();
|
||||||
|
};
|
||||||
|
// 设置光标位置
|
||||||
|
const setCustomCursor = (position: { line: number; ch: number }) => {
|
||||||
|
cmInstance.setCursor(position);
|
||||||
|
};
|
||||||
|
// 插入公式
|
||||||
|
const insertFormula = (value: string) => {
|
||||||
|
const { mode, autoComma } = props;
|
||||||
|
const position = cmInstance.getCursor();
|
||||||
|
|
||||||
|
cmInstance.replaceRange(value, position, undefined, "insertFormula");
|
||||||
|
setTimeout(() => {
|
||||||
|
const newPosition = {
|
||||||
|
line: position.line,
|
||||||
|
ch: position.ch + value.length - 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
cmInstance.focus();
|
||||||
|
cmInstance.setCursor(newPosition);
|
||||||
|
// cmInstance.execCommand('goDocEnd')
|
||||||
|
}, 0);
|
||||||
|
if (cmEle.value) {
|
||||||
|
cmEle.value.scrollTop = cmEle.value.scrollHeight - cmEle.value.clientHeight;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
insertColumnTag,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tagInputarea {
|
||||||
|
min-width: 0;
|
||||||
|
:deep {
|
||||||
|
.tagInputareaIuput {
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #409eff;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
&:not(.active) {
|
||||||
|
border-color: #ccc !important;
|
||||||
|
}
|
||||||
|
// &.hasRightIcon {
|
||||||
|
// border-radius: 3px 0 0 3px;
|
||||||
|
// }
|
||||||
|
&.readonlyBg {
|
||||||
|
.CodeMirror {
|
||||||
|
background-color: #eee !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// .rightIcon {
|
||||||
|
// background-color: #f5f5f5;
|
||||||
|
// font-size: 20px;
|
||||||
|
// color: #757575;
|
||||||
|
// height: 34px;
|
||||||
|
// line-height: 33px;
|
||||||
|
// padding: 0 7px;
|
||||||
|
// border: 1px solid #ccc;
|
||||||
|
// border-left: none;
|
||||||
|
// border-radius: 0 3px 3px 0;
|
||||||
|
// }
|
||||||
|
.CodeMirror {
|
||||||
|
font-family: inherit !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: auto !important;
|
||||||
|
|
||||||
|
.CodeMirror-vscrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .CodeMirror-scroll {
|
||||||
|
// height: auto;
|
||||||
|
// overflow-y: hidden;
|
||||||
|
// overflow-x: auto;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.CodeMirror-lines {
|
||||||
|
padding: 6px 0;
|
||||||
|
min-height: 35px;
|
||||||
|
}
|
||||||
|
.CodeMirror-line {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.columnTagCon {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 2px 4px;
|
||||||
|
max-width: 100%;
|
||||||
|
background: #d8eeff;
|
||||||
|
color: #174c76;
|
||||||
|
border: 1px solid #bbd6ea;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.columnTag {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 24px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid #90caf9;
|
||||||
|
border-radius: 24px;
|
||||||
|
.columnName,
|
||||||
|
.columnValue {
|
||||||
|
display: inline-block;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.columnName {
|
||||||
|
color: #2196f3;
|
||||||
|
background-color: rgba(33, 150, 243, 0.06);
|
||||||
|
}
|
||||||
|
.columnValue {
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 0 22px 22px 0;
|
||||||
|
background-color: #249eff;
|
||||||
|
.ellipsis {
|
||||||
|
max-width: 9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.onlytag {
|
||||||
|
margin-right: 6px;
|
||||||
|
&:after {
|
||||||
|
content: ",";
|
||||||
|
position: absolute;
|
||||||
|
right: -6px;
|
||||||
|
top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.deleted {
|
||||||
|
border-color: #f44336;
|
||||||
|
.columnName {
|
||||||
|
color: #f44336;
|
||||||
|
background-color: rgba(244, 67, 54, 0.06);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
border-color: #f44336;
|
||||||
|
.columnName {
|
||||||
|
color: #f44336;
|
||||||
|
background-color: rgba(244, 67, 54, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
border-color: #ddd;
|
||||||
|
.columnName {
|
||||||
|
color: #9e9e9e;
|
||||||
|
background-color: rgba(158, 158, 158, 0.06);
|
||||||
|
}
|
||||||
|
.columnValue {
|
||||||
|
background-color: #bdbdbd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.operator {
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
/**
|
||||||
|
* getRePosFromStr 正则匹配字段返回位置信息
|
||||||
|
* */
|
||||||
|
export function getRePosFromStr(text: any = '', re: any = /\$.+?\$/g) {
|
||||||
|
const lines = text.split('\n')
|
||||||
|
const positions: any = []
|
||||||
|
let m
|
||||||
|
for (let i = 0; i < lines.length; i++) {
|
||||||
|
const l = lines[i]
|
||||||
|
while ((m = re.exec(l)) !== null) {
|
||||||
|
var tag = m[0].substring(1, m[0].length - 1)
|
||||||
|
positions.push({
|
||||||
|
line: i,
|
||||||
|
start: m.index,
|
||||||
|
stop: m.index + m[0].length,
|
||||||
|
tag,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return positions
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 输入框模式
|
||||||
|
*/
|
||||||
|
export enum MODE {
|
||||||
|
// 文本
|
||||||
|
TEXT = 1,
|
||||||
|
// 公式
|
||||||
|
FORMULA,
|
||||||
|
// 只允许选择tag
|
||||||
|
ONLYTAG,
|
||||||
|
// 日期
|
||||||
|
DATE
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
// Generated by 'unplugin-auto-import'
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-auto-import
|
||||||
export {}
|
export {}
|
||||||
declare global {
|
declare global {
|
||||||
const EffectScope: typeof import('vue')['EffectScope']
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
const ElForm: typeof import('element-plus/es')['ElForm']
|
|
||||||
const ElMessage: typeof import('element-plus/es')['ElMessage']
|
const ElMessage: typeof import('element-plus/es')['ElMessage']
|
||||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
|
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
|
||||||
const ElTree: typeof import('element-plus/es')['ElTree']
|
|
||||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||||
const computed: typeof import('vue')['computed']
|
const computed: typeof import('vue')['computed']
|
||||||
|
|
@ -76,7 +77,6 @@ declare global {
|
||||||
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
||||||
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
||||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||||
const resolveDirective: typeof import('vue')['resolveDirective']
|
|
||||||
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
||||||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
||||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||||
|
|
@ -91,6 +91,7 @@ declare global {
|
||||||
const toReactive: typeof import('@vueuse/core')['toReactive']
|
const toReactive: typeof import('@vueuse/core')['toReactive']
|
||||||
const toRef: typeof import('vue')['toRef']
|
const toRef: typeof import('vue')['toRef']
|
||||||
const toRefs: typeof import('vue')['toRefs']
|
const toRefs: typeof import('vue')['toRefs']
|
||||||
|
const toValue: typeof import('vue')['toValue']
|
||||||
const triggerRef: typeof import('vue')['triggerRef']
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
||||||
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
||||||
|
|
@ -267,15 +268,18 @@ declare global {
|
||||||
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
||||||
const whenever: typeof import('@vueuse/core')['whenever']
|
const whenever: typeof import('@vueuse/core')['whenever']
|
||||||
}
|
}
|
||||||
|
// for type re-export
|
||||||
|
declare global {
|
||||||
|
// @ts-ignore
|
||||||
|
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
|
||||||
|
}
|
||||||
// for vue template auto import
|
// for vue template auto import
|
||||||
import { UnwrapRef } from 'vue'
|
import { UnwrapRef } from 'vue'
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
interface ComponentCustomProperties {
|
interface ComponentCustomProperties {
|
||||||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
|
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
|
||||||
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
|
|
||||||
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
|
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
|
||||||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
|
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
|
||||||
readonly ElTree: UnwrapRef<typeof import('element-plus/es')['ElTree']>
|
|
||||||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
|
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
|
||||||
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
|
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
|
||||||
readonly computed: UnwrapRef<typeof import('vue')['computed']>
|
readonly computed: UnwrapRef<typeof import('vue')['computed']>
|
||||||
|
|
@ -346,7 +350,6 @@ declare module 'vue' {
|
||||||
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
|
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
|
||||||
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
|
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
|
||||||
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
|
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
|
||||||
readonly resolveDirective: UnwrapRef<typeof import('vue')['resolveDirective']>
|
|
||||||
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
|
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
|
||||||
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
|
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
|
||||||
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
|
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
|
||||||
|
|
@ -361,6 +364,274 @@ declare module 'vue' {
|
||||||
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
|
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
|
||||||
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
|
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
|
||||||
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
||||||
|
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
|
||||||
|
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
||||||
|
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
|
||||||
|
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
|
||||||
|
readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
|
||||||
|
readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
|
||||||
|
readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
|
||||||
|
readonly unref: UnwrapRef<typeof import('vue')['unref']>
|
||||||
|
readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
|
||||||
|
readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
|
||||||
|
readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
|
||||||
|
readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
|
||||||
|
readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
|
||||||
|
readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
|
||||||
|
readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
|
||||||
|
readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
|
||||||
|
readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
|
||||||
|
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
|
||||||
|
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
|
||||||
|
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
|
||||||
|
readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
|
||||||
|
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
|
||||||
|
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
|
||||||
|
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
|
||||||
|
readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
|
||||||
|
readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
|
||||||
|
readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
|
||||||
|
readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
|
||||||
|
readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
|
||||||
|
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
|
||||||
|
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
|
||||||
|
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
|
||||||
|
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
|
||||||
|
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
|
||||||
|
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
|
||||||
|
readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
|
||||||
|
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
|
||||||
|
readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
|
||||||
|
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
|
||||||
|
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
|
||||||
|
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
|
||||||
|
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
|
||||||
|
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
|
||||||
|
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
|
||||||
|
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
|
||||||
|
readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
|
||||||
|
readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
|
||||||
|
readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
|
||||||
|
readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
|
||||||
|
readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
|
||||||
|
readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
|
||||||
|
readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
|
||||||
|
readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
|
||||||
|
readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
|
||||||
|
readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
|
||||||
|
readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
|
||||||
|
readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
|
||||||
|
readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
|
||||||
|
readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
|
||||||
|
readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
|
||||||
|
readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
|
||||||
|
readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
|
||||||
|
readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
|
||||||
|
readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
|
||||||
|
readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
|
||||||
|
readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
|
||||||
|
readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
|
||||||
|
readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
|
||||||
|
readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
|
||||||
|
readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
|
||||||
|
readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
|
||||||
|
readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
|
||||||
|
readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
|
||||||
|
readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
|
||||||
|
readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
|
||||||
|
readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
|
||||||
|
readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
|
||||||
|
readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
|
||||||
|
readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
|
||||||
|
readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
|
||||||
|
readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
|
||||||
|
readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
|
||||||
|
readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
|
||||||
|
readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
|
||||||
|
readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
|
||||||
|
readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
|
||||||
|
readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
|
||||||
|
readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
|
||||||
|
readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
|
||||||
|
readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
|
||||||
|
readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
|
||||||
|
readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
|
||||||
|
readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
|
||||||
|
readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
|
||||||
|
readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
|
||||||
|
readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
|
||||||
|
readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
|
||||||
|
readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
|
||||||
|
readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
|
||||||
|
readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
|
||||||
|
readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
|
||||||
|
readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
|
||||||
|
readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
|
||||||
|
readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
|
||||||
|
readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
|
||||||
|
readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
|
||||||
|
readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
|
||||||
|
readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
|
||||||
|
readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
|
||||||
|
readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
|
||||||
|
readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
|
||||||
|
readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
|
||||||
|
readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
|
||||||
|
readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
|
||||||
|
readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
|
||||||
|
readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
|
||||||
|
readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
|
||||||
|
readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
|
||||||
|
readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
|
||||||
|
readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
|
||||||
|
readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
|
||||||
|
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
|
||||||
|
readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
|
||||||
|
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
|
||||||
|
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
|
||||||
|
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
|
||||||
|
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
|
||||||
|
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
|
||||||
|
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
|
||||||
|
readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
|
||||||
|
readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
|
||||||
|
readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
|
||||||
|
readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
|
||||||
|
readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
|
||||||
|
readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
|
||||||
|
readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
|
||||||
|
readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
|
||||||
|
readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
|
||||||
|
readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
|
||||||
|
readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
|
||||||
|
readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
|
||||||
|
readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
|
||||||
|
readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
|
||||||
|
readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
|
||||||
|
readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
|
||||||
|
readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
|
||||||
|
readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
|
||||||
|
readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
|
||||||
|
readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
|
||||||
|
readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
|
||||||
|
readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
|
||||||
|
readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
|
||||||
|
readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
|
||||||
|
readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
|
||||||
|
readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
|
||||||
|
readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
|
||||||
|
readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
|
||||||
|
readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
|
||||||
|
readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
|
||||||
|
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
|
||||||
|
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
|
||||||
|
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
|
||||||
|
readonly watch: UnwrapRef<typeof import('vue')['watch']>
|
||||||
|
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
|
||||||
|
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
|
||||||
|
readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
|
||||||
|
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
|
||||||
|
readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
|
||||||
|
readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
|
||||||
|
readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
|
||||||
|
readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
|
||||||
|
readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
|
||||||
|
readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
|
||||||
|
readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
|
||||||
|
readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
|
||||||
|
readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
interface ComponentCustomProperties {
|
||||||
|
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
|
||||||
|
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
|
||||||
|
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
|
||||||
|
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
|
||||||
|
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
|
||||||
|
readonly computed: UnwrapRef<typeof import('vue')['computed']>
|
||||||
|
readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
|
||||||
|
readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
|
||||||
|
readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
|
||||||
|
readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
|
||||||
|
readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
|
||||||
|
readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
|
||||||
|
readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
|
||||||
|
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
|
||||||
|
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
|
||||||
|
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
|
||||||
|
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
|
||||||
|
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
|
||||||
|
readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
|
||||||
|
readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
|
||||||
|
readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
|
||||||
|
readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
|
||||||
|
readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
|
||||||
|
readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
|
||||||
|
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
|
||||||
|
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
|
||||||
|
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
|
||||||
|
readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
|
||||||
|
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
|
||||||
|
readonly h: UnwrapRef<typeof import('vue')['h']>
|
||||||
|
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
|
||||||
|
readonly inject: UnwrapRef<typeof import('vue')['inject']>
|
||||||
|
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
|
||||||
|
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
|
||||||
|
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
|
||||||
|
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
|
||||||
|
readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
|
||||||
|
readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
|
||||||
|
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
|
||||||
|
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
|
||||||
|
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
|
||||||
|
readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
|
||||||
|
readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
|
||||||
|
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
|
||||||
|
readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
|
||||||
|
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
|
||||||
|
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
|
||||||
|
readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
|
||||||
|
readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
|
||||||
|
readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
|
||||||
|
readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
|
||||||
|
readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
|
||||||
|
readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
|
||||||
|
readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
|
||||||
|
readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
|
||||||
|
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
|
||||||
|
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
|
||||||
|
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
|
||||||
|
readonly provide: UnwrapRef<typeof import('vue')['provide']>
|
||||||
|
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
|
||||||
|
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
|
||||||
|
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
|
||||||
|
readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
|
||||||
|
readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
|
||||||
|
readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
|
||||||
|
readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
|
||||||
|
readonly ref: UnwrapRef<typeof import('vue')['ref']>
|
||||||
|
readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
|
||||||
|
readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
|
||||||
|
readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
|
||||||
|
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
|
||||||
|
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
|
||||||
|
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
|
||||||
|
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
|
||||||
|
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
|
||||||
|
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
|
||||||
|
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
|
||||||
|
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
|
||||||
|
readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
|
||||||
|
readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
|
||||||
|
readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
|
||||||
|
readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
|
||||||
|
readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
|
||||||
|
readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
|
||||||
|
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
|
||||||
|
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
|
||||||
|
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
||||||
|
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
|
||||||
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
||||||
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
|
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
|
||||||
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
|
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
// generated by unplugin-vue-components
|
/* eslint-disable */
|
||||||
// We suggest you to commit this file into source control
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
import '@vue/runtime-core'
|
import '@vue/runtime-core'
|
||||||
|
|
||||||
|
|
@ -72,6 +74,7 @@ declare module '@vue/runtime-core' {
|
||||||
SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default']
|
SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default']
|
||||||
SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default']
|
SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default']
|
||||||
SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
|
SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
|
||||||
|
TagInput: typeof import('./../components/TagInput/index.vue')['default']
|
||||||
WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
|
WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
|
||||||
}
|
}
|
||||||
export interface ComponentCustomProperties {
|
export interface ComponentCustomProperties {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import TagTextInput from "@/components/TagInput/index.vue";
|
||||||
|
|
||||||
|
//假数据
|
||||||
|
let arrName = new Array(20).fill("tag");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* renderTag 渲染 tag
|
||||||
|
* @param {any} id $$匹配到的之间的值
|
||||||
|
* @param {object} options 一些参数
|
||||||
|
* @return {element} 返回一个dom节点
|
||||||
|
* */
|
||||||
|
const renderTag = (id: any, options: any) => {
|
||||||
|
//拼接tag名称
|
||||||
|
let tagName = `${arrName[Number(id)]}-${id}`;
|
||||||
|
//创建tag元素
|
||||||
|
const ele = document.createElement("div");
|
||||||
|
ele.classList.add("tag-demo-con");
|
||||||
|
ele.innerHTML = `<div class="tag-demo">${tagName}</div>`;
|
||||||
|
return ele;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 触发增加 tag
|
||||||
|
const refTagTextarea = ref();
|
||||||
|
const addTag = (id: any) => {
|
||||||
|
refTagTextarea.value.insertColumnTag(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑器 change 监听
|
||||||
|
* @param {any} error 默认为 null
|
||||||
|
* @param {string} value 返回编辑器内容
|
||||||
|
* @param {object} obj 返回一个编辑事件描述对象
|
||||||
|
* */
|
||||||
|
const onChange = (error: any, value: string, obj: any): void => {
|
||||||
|
console.log("onChange", error, value, obj);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onFocus = (): void => {
|
||||||
|
console.log("onFocus");
|
||||||
|
};
|
||||||
|
|
||||||
|
const onBlur = (): void => {
|
||||||
|
console.log("onBlur");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="demo-tagInput">
|
||||||
|
<TagTextInput
|
||||||
|
ref="refTagTextarea"
|
||||||
|
class-name="demo"
|
||||||
|
:default-value="`April$18$`"
|
||||||
|
:readonly="false"
|
||||||
|
:no-cursor="false"
|
||||||
|
:min-height="200"
|
||||||
|
:render-tag="renderTag"
|
||||||
|
@on-change="onChange"
|
||||||
|
@on-focus="onFocus"
|
||||||
|
@on-blur="onBlur"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="tag-wrap">
|
||||||
|
<el-button v-for="item in 5" :key="item" @click="addTag(item)">
|
||||||
|
{{ item }}</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.demo-tagInput {
|
||||||
|
width: 500px;
|
||||||
|
height: auto;
|
||||||
|
margin: 10px;
|
||||||
|
:deep {
|
||||||
|
.tag-demo-con {
|
||||||
|
.tag-demo {
|
||||||
|
padding: 4px;
|
||||||
|
margin: 4px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
line-height: 1em;
|
||||||
|
min-width: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tag-wrap {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -149,6 +149,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||||||
"@wangeditor/editor",
|
"@wangeditor/editor",
|
||||||
"@wangeditor/editor-for-vue",
|
"@wangeditor/editor-for-vue",
|
||||||
"vue-i18n",
|
"vue-i18n",
|
||||||
|
'codemirror'
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue