mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-06 03:57:56 +08:00
feat(ui): 添加二维码，图片组件
This commit is contained in:
roymondchen
jia000
parent
dbcd4201ea
commit
8c287ecace
109
package-lock.json
generated
109
package-lock.json
generated
@ -4329,6 +4329,14 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
|
||||
},
|
||||
"@types/qrcode": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.4.2.tgz",
|
||||
"integrity": "sha512-7uNT9L4WQTNJejHTSTdaJhfBSCN73xtXaHFyBJ8TSwiLhe4PRuTue7Iph0s2nG9R/ifUaSnGhLUOZavlBEqDWQ==",
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "17.0.44",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
|
||||
@ -6979,8 +6987,7 @@
|
||||
"decamelize": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
|
||||
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
|
||||
"dev": true
|
||||
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
|
||||
},
|
||||
"decamelize-keys": {
|
||||
"version": "1.1.0",
|
||||
@ -7109,6 +7116,11 @@
|
||||
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
|
||||
"dev": true
|
||||
},
|
||||
"dijkstrajs": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
|
||||
"integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
|
||||
},
|
||||
"dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
@ -7234,6 +7246,11 @@
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"encode-utf8": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
|
||||
"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
|
||||
},
|
||||
"encoding": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
|
||||
@ -12450,6 +12467,11 @@
|
||||
"semver-compare": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"pngjs": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
|
||||
"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.12",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
|
||||
@ -12602,6 +12624,76 @@
|
||||
"integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
|
||||
"dev": true
|
||||
},
|
||||
"qrcode": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.0.tgz",
|
||||
"integrity": "sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==",
|
||||
"requires": {
|
||||
"dijkstrajs": "^1.0.1",
|
||||
"encode-utf8": "^1.0.3",
|
||||
"pngjs": "^5.0.0",
|
||||
"yargs": "^15.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"camelcase": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
|
||||
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
|
||||
},
|
||||
"cliui": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
|
||||
"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
|
||||
"requires": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.0",
|
||||
"wrap-ansi": "^6.2.0"
|
||||
}
|
||||
},
|
||||
"wrap-ansi": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
|
||||
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
|
||||
"requires": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"y18n": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
|
||||
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
|
||||
},
|
||||
"yargs": {
|
||||
"version": "15.4.1",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
|
||||
"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
|
||||
"requires": {
|
||||
"cliui": "^6.0.0",
|
||||
"decamelize": "^1.2.0",
|
||||
"find-up": "^4.1.0",
|
||||
"get-caller-file": "^2.0.1",
|
||||
"require-directory": "^2.1.1",
|
||||
"require-main-filename": "^2.0.0",
|
||||
"set-blocking": "^2.0.0",
|
||||
"string-width": "^4.2.0",
|
||||
"which-module": "^2.0.0",
|
||||
"y18n": "^4.0.0",
|
||||
"yargs-parser": "^18.1.2"
|
||||
}
|
||||
},
|
||||
"yargs-parser": {
|
||||
"version": "18.1.3",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
|
||||
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
|
||||
"requires": {
|
||||
"camelcase": "^5.0.0",
|
||||
"decamelize": "^1.2.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.5.3",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
|
||||
@ -13084,6 +13176,11 @@
|
||||
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
|
||||
"dev": true
|
||||
},
|
||||
"require-main-filename": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
|
||||
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
|
||||
@ -13310,8 +13407,7 @@
|
||||
"set-blocking": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
|
||||
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
|
||||
"dev": true
|
||||
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
|
||||
},
|
||||
"setimmediate": {
|
||||
"version": "1.0.5",
|
||||
@ -14833,6 +14929,11 @@
|
||||
"is-symbol": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"which-module": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
|
||||
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
|
||||
},
|
||||
"wide-align": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
|
||||
|
||||
@ -13,11 +13,13 @@
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "^1.0.0-rc.2",
|
||||
"delegate": "^3.2.0",
|
||||
"qrcode": "^1.5.0",
|
||||
"tiny-emitter": "^2.1.0",
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/vue": "^6.4.2",
|
||||
"@types/qrcode": "^1.4.2",
|
||||
"@vue/compiler-sfc": "^3.2.0",
|
||||
"@vue/test-utils": "^2.0.0-rc.12"
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="display()"
|
||||
:id="config.id"
|
||||
:id="`${config.id || ''}`"
|
||||
:class="`magic-ui-container${config.className ? ` ${config.className}` : ''}`"
|
||||
:style="style"
|
||||
>
|
||||
|
||||
24
packages/ui/src/img/index.ts
Normal file
24
packages/ui/src/img/index.ts
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Img from './src/index.vue';
|
||||
|
||||
export { default as config } from './src/formConfig';
|
||||
export { default as value } from './src/initValue';
|
||||
|
||||
export default Img;
|
||||
28
packages/ui/src/img/src/formConfig.ts
Normal file
28
packages/ui/src/img/src/formConfig.ts
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
{
|
||||
text: '图片',
|
||||
name: 'src',
|
||||
},
|
||||
{
|
||||
text: '链接',
|
||||
name: 'url',
|
||||
},
|
||||
];
|
||||
30
packages/ui/src/img/src/index.vue
Normal file
30
packages/ui/src/img/src/index.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<img class="magic-ui-img" :src="config.src" @click="clickHandler" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
|
||||
import { MImg } from '../../types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'magic-ui-img',
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MImg>,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
clickHandler() {
|
||||
window.location.href = props.config.url;
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
28
packages/ui/src/img/src/initValue.ts
Normal file
28
packages/ui/src/img/src/initValue.ts
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default {
|
||||
src: 'https://puui.qpic.cn/vupload/0/1573555382625_bhp0wud8l6w.png/0',
|
||||
url: '',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '57',
|
||||
width: '176',
|
||||
height: '176',
|
||||
},
|
||||
};
|
||||
@ -18,7 +18,9 @@
|
||||
|
||||
import Button from './button';
|
||||
import Container from './container';
|
||||
import Img from './img';
|
||||
import Page from './page';
|
||||
import Qrcode from './qrcode';
|
||||
import Text from './text';
|
||||
|
||||
const ui: Record<string, any> = {
|
||||
@ -26,6 +28,8 @@ const ui: Record<string, any> = {
|
||||
container: Container,
|
||||
button: Button,
|
||||
text: Text,
|
||||
img: Img,
|
||||
qrcode: Qrcode,
|
||||
};
|
||||
|
||||
export default ui;
|
||||
|
||||
24
packages/ui/src/qrcode/index.ts
Normal file
24
packages/ui/src/qrcode/index.ts
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Qrcode from './src/index.vue';
|
||||
|
||||
export { default as config } from './src/formConfig';
|
||||
export { default as value } from './src/initValue';
|
||||
|
||||
export default Qrcode;
|
||||
24
packages/ui/src/qrcode/src/formConfig.ts
Normal file
24
packages/ui/src/qrcode/src/formConfig.ts
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
{
|
||||
text: '链接',
|
||||
name: 'url',
|
||||
},
|
||||
];
|
||||
47
packages/ui/src/qrcode/src/index.vue
Normal file
47
packages/ui/src/qrcode/src/index.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<img class="magic-ui-qrcode" :src="imgUrl" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, watch } from 'vue';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import { MQrcode } from '../../types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'magic-ui-qrcode',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MQrcode>,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const imgUrl = ref();
|
||||
|
||||
watch(
|
||||
() => props.config.url,
|
||||
(url = '') => {
|
||||
QRCode.toDataURL(url, (e: any, url: string) => {
|
||||
if (e) console.error(e);
|
||||
imgUrl.value = url;
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
imgUrl,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
27
packages/ui/src/qrcode/src/initValue.ts
Normal file
27
packages/ui/src/qrcode/src/initValue.ts
Normal file
@ -0,0 +1,27 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default {
|
||||
url: 'https://m.film.qq.com',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '57',
|
||||
width: '176',
|
||||
height: '176',
|
||||
},
|
||||
};
|
||||
@ -230,3 +230,18 @@ export type MButtonInstance =
|
||||
| undefined;
|
||||
|
||||
export type ArrayOneOrMore = { 0: string } & string[];
|
||||
|
||||
export interface MImg {
|
||||
src: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface MQrcode {
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface MPop extends MComponent {
|
||||
items?: MComponent[] | MContainer[];
|
||||
closeButtonStyle?: any;
|
||||
closeButton?: boolean;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
:component-group-list="componentGroupList"
|
||||
:default-selected="defaultSelected"
|
||||
:moveable-options="moveableOptions"
|
||||
:auto-scroll-into-view="true"
|
||||
></m-editor>
|
||||
|
||||
<el-dialog v-model="previewVisible" destroy-on-close :width="375" custom-class="pre-viewer" title="预览">
|
||||
@ -26,7 +27,16 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, toRaw } from 'vue';
|
||||
import { Coin, Connection, Document, FolderOpened, SwitchButton, Tickets } from '@element-plus/icons';
|
||||
import {
|
||||
Coin,
|
||||
Connection,
|
||||
Document,
|
||||
FolderOpened,
|
||||
Grid,
|
||||
PictureFilled,
|
||||
SwitchButton,
|
||||
Tickets,
|
||||
} from '@element-plus/icons';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import serialize from 'serialize-javascript';
|
||||
|
||||
@ -162,6 +172,16 @@ export default defineComponent({
|
||||
text: '按钮',
|
||||
type: 'button',
|
||||
},
|
||||
{
|
||||
icon: PictureFilled,
|
||||
text: '图片',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
icon: Grid,
|
||||
text: '二维码',
|
||||
type: 'qrcode',
|
||||
},
|
||||
],
|
||||
},
|
||||
]),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user