Merge pull request #17 from yanbowe/main
feat(projects): 增加Icon以及打印功能示例
This commit is contained in:
commit
2ede7cf85c
@ -28,6 +28,7 @@
|
||||
"form-data": "^4.0.0",
|
||||
"naive-ui": "^2.20.3",
|
||||
"pinia": "^2.0.3",
|
||||
"print-js": "^1.6.0",
|
||||
"qs": "^6.10.1",
|
||||
"swiper": "^7.2.0",
|
||||
"vditor": "^3.8.7",
|
||||
|
@ -40,6 +40,7 @@ specifiers:
|
||||
pinia: ^2.0.3
|
||||
postinstall-postinstall: ^2.1.0
|
||||
prettier: ^2.4.1
|
||||
print-js: ^1.6.0
|
||||
qs: ^6.10.1
|
||||
rollup-plugin-visualizer: ^5.5.2
|
||||
sass: ^1.43.4
|
||||
@ -70,6 +71,7 @@ dependencies:
|
||||
form-data: 4.0.0
|
||||
naive-ui: registry.npmmirror.com/naive-ui/2.20.3_eslint@8.2.0+vue@3.2.20
|
||||
pinia: registry.npmmirror.com/pinia/2.0.3_typescript@4.4.4+vue@3.2.20
|
||||
print-js: 1.6.0
|
||||
qs: 6.10.1
|
||||
swiper: registry.npmmirror.com/swiper/7.2.0
|
||||
vditor: registry.npmmirror.com/vditor/3.8.7
|
||||
@ -122,6 +124,23 @@ devDependencies:
|
||||
|
||||
packages:
|
||||
|
||||
/@commitlint/load/14.1.0:
|
||||
resolution: {integrity: sha512-p+HbgjhkqLsnxyjOUdEYHztHCp8n2oLVUJTmRPuP5FXLNevh6Gwmxf+NYC2J0sgD084aV2CFi3qu1W4yHWIknA==}
|
||||
engines: {node: '>=v12'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@commitlint/execute-rule': registry.npmmirror.com/@commitlint/execute-rule/14.0.0
|
||||
'@commitlint/resolve-extends': registry.npmmirror.com/@commitlint/resolve-extends/14.1.0
|
||||
'@commitlint/types': registry.npmmirror.com/@commitlint/types/14.0.0
|
||||
'@endemolshinegroup/cosmiconfig-typescript-loader': registry.nlark.com/@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_3fdcc7bc724bd900a681b5e9457ed94a
|
||||
chalk: registry.nlark.com/chalk/4.1.2
|
||||
cosmiconfig: registry.nlark.com/cosmiconfig/7.0.1
|
||||
lodash: registry.nlark.com/lodash/4.17.21
|
||||
resolve-from: registry.nlark.com/resolve-from/5.0.0
|
||||
typescript: registry.npmmirror.com/typescript/4.4.4
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@vue/eslint-config-prettier/6.0.0_5ef9ff6669b626527300390dc84546fb:
|
||||
resolution: {integrity: sha1-rVkSswj0rkaEWOAqKwXbC50kZwA=, tarball: '@vue/eslint-config-prettier/download/@vue/eslint-config-prettier-6.0.0.tgz'}
|
||||
peerDependencies:
|
||||
@ -238,6 +257,14 @@ packages:
|
||||
resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=, tarball: fs.realpath/download/fs.realpath-1.0.0.tgz}
|
||||
dev: true
|
||||
|
||||
/fsevents/2.3.2:
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/get-intrinsic/1.1.1:
|
||||
resolution: {integrity: sha1-FfWfN2+FXERpY5SPDSTNNje0q8Y=, tarball: get-intrinsic/download/get-intrinsic-1.1.1.tgz}
|
||||
dependencies:
|
||||
@ -271,6 +298,11 @@ packages:
|
||||
which: registry.nlark.com/which/1.3.1
|
||||
dev: true
|
||||
|
||||
/graceful-fs/4.2.8:
|
||||
resolution: {integrity: sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==}
|
||||
requiresBuild: true
|
||||
optional: true
|
||||
|
||||
/homedir-polyfill/1.0.3:
|
||||
resolution: {integrity: sha1-dDKYzvTlrz4ZQWH7rcwhUdOgWOg=, tarball: homedir-polyfill/download/homedir-polyfill-1.0.3.tgz}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@ -318,7 +350,7 @@ packages:
|
||||
/jsonfile/4.0.0:
|
||||
resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=, tarball: jsonfile/download/jsonfile-4.0.0.tgz}
|
||||
optionalDependencies:
|
||||
graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
|
||||
graceful-fs: 4.2.8
|
||||
dev: true
|
||||
|
||||
/lodash.map/4.6.0:
|
||||
@ -376,6 +408,10 @@ packages:
|
||||
fast-diff: 1.2.0
|
||||
dev: true
|
||||
|
||||
/print-js/1.6.0:
|
||||
resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==}
|
||||
dev: false
|
||||
|
||||
/qs/6.10.1:
|
||||
resolution: {integrity: sha1-STFIL6jWR6Wqt5nFJx0hM7mB+2o=, tarball: qs/download/qs-6.10.1.tgz}
|
||||
engines: {node: '>=0.6'}
|
||||
@ -468,6 +504,12 @@ packages:
|
||||
os-tmpdir: 1.0.2
|
||||
dev: true
|
||||
|
||||
/uglify-to-browserify/1.0.2:
|
||||
resolution: {integrity: sha1-bgkk1r2mta/jSeOabWMoUKD4grc=}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/universalify/0.1.2:
|
||||
resolution: {integrity: sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=, tarball: universalify/download/universalify-0.1.2.tgz}
|
||||
engines: {node: '>= 4.0.0'}
|
||||
@ -1088,7 +1130,7 @@ packages:
|
||||
normalize-path: registry.nlark.com/normalize-path/3.0.0
|
||||
readdirp: registry.nlark.com/readdirp/3.6.0
|
||||
optionalDependencies:
|
||||
fsevents: registry.npmmirror.com/fsevents/2.3.2
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
||||
registry.nlark.com/chroma-js/2.1.2:
|
||||
@ -1323,7 +1365,7 @@ packages:
|
||||
longest: 2.0.1
|
||||
word-wrap: 1.2.3
|
||||
optionalDependencies:
|
||||
'@commitlint/load': registry.npmmirror.com/@commitlint/load/14.1.0
|
||||
'@commitlint/load': 14.1.0
|
||||
dev: true
|
||||
|
||||
registry.nlark.com/cz-conventional-changelog/3.3.0:
|
||||
@ -1339,7 +1381,7 @@ packages:
|
||||
longest: 2.0.1
|
||||
word-wrap: 1.2.3
|
||||
optionalDependencies:
|
||||
'@commitlint/load': registry.npmmirror.com/@commitlint/load/14.1.0
|
||||
'@commitlint/load': 14.1.0
|
||||
dev: true
|
||||
|
||||
registry.nlark.com/cz-customizable/6.3.0:
|
||||
@ -2717,7 +2759,7 @@ packages:
|
||||
name: jsonfile
|
||||
version: 4.0.0
|
||||
optionalDependencies:
|
||||
graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
|
||||
graceful-fs: 4.2.8
|
||||
|
||||
registry.nlark.com/jsonfile/6.1.0:
|
||||
resolution: {integrity: sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jsonfile/download/jsonfile-6.1.0.tgz}
|
||||
@ -2726,7 +2768,7 @@ packages:
|
||||
dependencies:
|
||||
universalify: registry.nlark.com/universalify/2.0.0
|
||||
optionalDependencies:
|
||||
graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
|
||||
graceful-fs: 4.2.8
|
||||
dev: true
|
||||
|
||||
registry.nlark.com/jsonparse/1.3.1:
|
||||
@ -4149,14 +4191,6 @@ packages:
|
||||
version: 2.5.0
|
||||
dev: false
|
||||
|
||||
registry.nlark.com/uglify-to-browserify/1.0.2:
|
||||
resolution: {integrity: sha1-bgkk1r2mta/jSeOabWMoUKD4grc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/uglify-to-browserify/download/uglify-to-browserify-1.0.2.tgz}
|
||||
name: uglify-to-browserify
|
||||
version: 1.0.2
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
registry.nlark.com/unbox-primitive/1.0.1:
|
||||
resolution: {integrity: sha1-CF4hViXsMWJXTciFmr7nilmxRHE=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/unbox-primitive/download/unbox-primitive-1.0.1.tgz}
|
||||
name: unbox-primitive
|
||||
@ -5961,16 +5995,6 @@ packages:
|
||||
path-exists: registry.nlark.com/path-exists/4.0.0
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/fsevents/2.3.2:
|
||||
resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fsevents/download/fsevents-2.3.2.tgz}
|
||||
name: fsevents
|
||||
version: 2.3.2
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/generate-source-map/0.0.5:
|
||||
resolution: {integrity: sha1-8SVfMWU8sCMeZxOn3IN1r08zpQk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/generate-source-map/download/generate-source-map-0.0.5.tgz}
|
||||
name: generate-source-map
|
||||
@ -6462,7 +6486,7 @@ packages:
|
||||
engines: {node: '>=10.0.0'}
|
||||
hasBin: true
|
||||
optionalDependencies:
|
||||
fsevents: registry.npmmirror.com/fsevents/2.3.2
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/rw/1.3.3:
|
||||
@ -6687,7 +6711,7 @@ packages:
|
||||
source-map: registry.nlark.com/source-map/0.5.7
|
||||
yargs: registry.npmmirror.com/yargs/3.10.0
|
||||
optionalDependencies:
|
||||
uglify-to-browserify: registry.nlark.com/uglify-to-browserify/1.0.2
|
||||
uglify-to-browserify: 1.0.2
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/unidragger/2.3.1:
|
||||
@ -6850,7 +6874,7 @@ packages:
|
||||
resolve: registry.nlark.com/resolve/1.20.0
|
||||
rollup: registry.npmmirror.com/rollup/2.59.0
|
||||
optionalDependencies:
|
||||
fsevents: registry.npmmirror.com/fsevents/2.3.2
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/vooks/0.2.10_vue@3.2.20:
|
||||
|
@ -22,6 +22,8 @@ export enum EnumRoutePath {
|
||||
'component_swiper' = '/component/swiper',
|
||||
'feat' = '/feat',
|
||||
'feat_copy' = '/feat/copy',
|
||||
'feat_icon' = '/feat/icon',
|
||||
'feat_print' = '/feat/print',
|
||||
'multi-menu' = '/multi-menu',
|
||||
'multi-menu_first' = '/multi-menu/first',
|
||||
'multi-menu_first_second' = '/multi-menu/first/second',
|
||||
@ -56,6 +58,8 @@ export enum EnumRouteTitle {
|
||||
'component_swiper' = 'Swiper插件',
|
||||
'feat' = '功能示例',
|
||||
'feat_copy' = '剪贴板',
|
||||
'feat_icon' = '图标',
|
||||
'feat_print' = '打印',
|
||||
'multi-menu' = '多级菜单',
|
||||
'multi-menu_first' = '一级菜单',
|
||||
'multi-menu_first_second' = '二级菜单',
|
||||
|
@ -3,8 +3,12 @@ import { EnumRoutePath, EnumRouteTitle } from '@/enum';
|
||||
import { BasicLayout } from '@/layouts';
|
||||
import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
|
||||
import FeatCopy from '@/views/feat/copy/index.vue';
|
||||
import FeatIcon from '@/views/feat/icon/index.vue';
|
||||
import FeatPrint from '@/views/feat/print/index.vue';
|
||||
|
||||
setRouterCacheName(FeatCopy, ROUTE_NAME_MAP.get('feat_copy'));
|
||||
setRouterCacheName(FeatIcon, ROUTE_NAME_MAP.get('feat_icon'));
|
||||
setRouterCacheName(FeatPrint, ROUTE_NAME_MAP.get('feat_print'));
|
||||
|
||||
const FEAT: CustomRoute = {
|
||||
name: ROUTE_NAME_MAP.get('feat'),
|
||||
@ -26,6 +30,24 @@ const FEAT: CustomRoute = {
|
||||
title: EnumRouteTitle.feat_copy,
|
||||
fullPage: true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: ROUTE_NAME_MAP.get('feat_icon'),
|
||||
path: EnumRoutePath.feat_icon,
|
||||
component: FeatIcon,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: EnumRouteTitle.feat_icon
|
||||
}
|
||||
},
|
||||
{
|
||||
name: ROUTE_NAME_MAP.get('feat_print'),
|
||||
path: EnumRoutePath.feat_print,
|
||||
component: FeatPrint,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: EnumRouteTitle.feat_print
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
33
src/views/feat/icon/index.vue
Normal file
33
src/views/feat/icon/index.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="Icon组件示例" class="shadow-sm rounded-16px">
|
||||
<div class="flex justify-around">
|
||||
<template v-for="item in icons" :key="item">
|
||||
<Icon :icon="item" class="text-30px" />
|
||||
</template>
|
||||
</div>
|
||||
<template #footer>
|
||||
<web-site-link label="iconify地址:" link="https://icones.js.org/" class="mt-10px" />
|
||||
</template>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NCard } from 'naive-ui';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { WebSiteLink } from '@/components';
|
||||
|
||||
const icons = [
|
||||
'mdi:emoticon',
|
||||
'mdi:ab-testing',
|
||||
'ph:alarm',
|
||||
'ph:android-logo',
|
||||
'ph:align-bottom',
|
||||
'ph:archive-box-light',
|
||||
'uil:basketball',
|
||||
'uil:brightness-plus',
|
||||
'uil:capture'
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
40
src/views/feat/print/index.vue
Normal file
40
src/views/feat/print/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="打印" class="shadow-sm rounded-16px">
|
||||
<n-button type="primary" class="mr-10px" @click="printTable">打印表格</n-button>
|
||||
<n-button type="primary" @click="printImage">打印图片</n-button>
|
||||
<template #footer>
|
||||
<github-link label="printJS:" link="https://github.com/crabbly/Print.js" class="mt-10px" />
|
||||
</template>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NCard, NButton } from 'naive-ui';
|
||||
import printJS from 'print-js';
|
||||
import { GithubLink } from '@/components';
|
||||
|
||||
function printTable() {
|
||||
printJS({
|
||||
printable: [
|
||||
{ name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' },
|
||||
{ name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' }
|
||||
],
|
||||
properties: ['name', 'wechat', 'remark'],
|
||||
type: 'json'
|
||||
});
|
||||
}
|
||||
function printImage() {
|
||||
printJS({
|
||||
printable: [
|
||||
'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG',
|
||||
'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG'
|
||||
],
|
||||
type: 'image',
|
||||
header: 'Multiple Images',
|
||||
imageStyle: 'width:100%;'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
Loading…
Reference in New Issue
Block a user