feat: 条形码组件
This commit is contained in:
WANGFAN\wangf
parent
19a0f12336
commit
e7402da940
27
src/components.d.ts
vendored
27
src/components.d.ts
vendored
@ -5,19 +5,20 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
CodeView: typeof import('./components/code-view/index.vue')['default']
|
||||
ExternalLinkPage: typeof import('./components/external-link-page/index.vue')['default']
|
||||
FillPage: typeof import('./components/fill-page/index.vue')['default']
|
||||
InternalLinkPage: typeof import('./components/internal-link-page/index.vue')['default']
|
||||
LangProvider: typeof import('./components/lang-provider/index.vue')['default']
|
||||
MainTransition: typeof import('./components/main-transition/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SelectIcon: typeof import('./components/select-icon/index.vue')['default']
|
||||
SvgAndIcon: typeof import('./components/svg-and-icon/index.vue')['default']
|
||||
SvgIcon: typeof import('./components/svg-icon/index.vue')['default']
|
||||
VerifyCode: typeof import('./components/verify-code/index.vue')['default']
|
||||
CodeView: (typeof import("./components/code-view/index.vue"))["default"];
|
||||
DrawBarcode: (typeof import("./components/draw-barcode/index.vue"))["default"];
|
||||
ExternalLinkPage: (typeof import("./components/external-link-page/index.vue"))["default"];
|
||||
FillPage: (typeof import("./components/fill-page/index.vue"))["default"];
|
||||
InternalLinkPage: (typeof import("./components/internal-link-page/index.vue"))["default"];
|
||||
LangProvider: (typeof import("./components/lang-provider/index.vue"))["default"];
|
||||
MainTransition: (typeof import("./components/main-transition/index.vue"))["default"];
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
|
||||
SvgAndIcon: (typeof import("./components/svg-and-icon/index.vue"))["default"];
|
||||
SvgIcon: (typeof import("./components/svg-icon/index.vue"))["default"];
|
||||
VerifyCode: (typeof import("./components/verify-code/index.vue"))["default"];
|
||||
}
|
||||
}
|
||||
|
||||
32
src/components/draw-barcode/index.vue
Normal file
32
src/components/draw-barcode/index.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<component :is="tag" ref="nodes" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import JsBarcode from "jsbarcode";
|
||||
const props = defineProps({
|
||||
// 节点类型，可接收svg、img、canvas
|
||||
tag: {
|
||||
type: String,
|
||||
default: "svg"
|
||||
},
|
||||
// 条形码具体内容
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 条形码配置
|
||||
// https://github.com/lindell/JsBarcode/wiki/Options
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const nodes = ref();
|
||||
onMounted(() => {
|
||||
JsBarcode(nodes.value, props.text, props.options);
|
||||
});
|
||||
</script>
|
||||
@ -26,7 +26,6 @@ let { isFooter } = storeToRefs(themeStore);
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
height: 100vh;
|
||||
border: 1px solid red;
|
||||
}
|
||||
.layout-right {
|
||||
display: grid;
|
||||
|
||||
@ -1,98 +1,98 @@
|
||||
import NProgress from "@/config/nprogress";
|
||||
import pinia from "@/store/index";
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import { staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
|
||||
import { currentlyRoute } from "@/router/route-output";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useUserInfoStore } from "@/store/modules/user-info";
|
||||
import { useRoutesConfigStore } from "@/store/modules/route-config";
|
||||
import { useRoutingMethod } from "@/hooks/useRoutingMethod";
|
||||
import { loadingPage } from "@/utils/loading-page";
|
||||
|
||||
/**
|
||||
* 创建vue的路由示例
|
||||
* @method createRouter(options: RouterOptions): Router
|
||||
* @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
|
||||
*/
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
/**
|
||||
* 设置静态路由，其它的路由通过addRoute动态添加
|
||||
* 1、staticRoutes登录页
|
||||
* 2、notFoundAndNoPower 添加默认 404、401界面，防止提示 No match found for location with path 'xxx'
|
||||
* 2、后端控制路由中也需要添加 notFoundAndNoPower 404、401界面
|
||||
* 静态添加 notFoundAndNoPower 404、401界面将全屏显示
|
||||
* 如果要 notFoundAndNoPower 在layout容器展示，则需要移除静态添加并将其添加到缓存路由树
|
||||
*/
|
||||
routes: [...staticRoutes, ...notFoundAndNoPower]
|
||||
});
|
||||
|
||||
/**
|
||||
* 路由加载前需要判断用户是否登录
|
||||
* 1、去登录页，无token，放行
|
||||
* 2、没有token，直接重定向到登录页
|
||||
* 3、去登录页，有token，直接重定向到home页
|
||||
* 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
|
||||
* 注意：
|
||||
* 全局routeTree不能持久化缓存
|
||||
* 页面刷新会导致addRoute动态添加的路由失效，需要重新初始化路由
|
||||
*/
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
NProgress.start(); // 开启进度条
|
||||
const store = useUserInfoStore(pinia);
|
||||
const { token } = storeToRefs(store);
|
||||
console.log("去", to, "来自", from);
|
||||
// next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach
|
||||
if (to.path === "/login" && !token.value) {
|
||||
// 1、去登录页，无token，放行
|
||||
next();
|
||||
} else if (!token.value) {
|
||||
// 2、没有token，直接重定向到登录页
|
||||
next("/login");
|
||||
} else if (to.path === "/login" && token.value) {
|
||||
// 3、去登录页，有token，直接重定向到home页
|
||||
next("/home");
|
||||
// 项目内的跳转，处理跳转路由高亮
|
||||
currentlyRoute(to.name as string);
|
||||
} else {
|
||||
// 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
|
||||
const routeStore = useRoutesConfigStore(pinia);
|
||||
const { routeTree } = storeToRefs(routeStore);
|
||||
|
||||
// 获取外链路由的处理函数
|
||||
// 所有的路由正常放行，只不过额外判断是否是外链，如果是，则打开新窗口跳转外链
|
||||
// 外链的页面依旧正常打开，只不过不会参与缓存与tabs显示，符合路由跳转的直觉
|
||||
const { openExternalLinks } = useRoutingMethod();
|
||||
|
||||
// 如果缓存的路由是0，则说明未动态添加路由，先添加再跳转
|
||||
// 解决刷新页面404的问题
|
||||
if (routeTree.value.length == 0) {
|
||||
loadingPage.start();
|
||||
await routeStore.initSetRouter();
|
||||
// 处理外链跳转
|
||||
openExternalLinks(to);
|
||||
// 处理完重新跳转
|
||||
next({ path: to.path, query: to.query });
|
||||
} else {
|
||||
// 处理外链跳转
|
||||
openExternalLinks(to);
|
||||
// 动态路由添加过走这里，直接放行
|
||||
next();
|
||||
// 项目内的跳转，处理跳转路由高亮
|
||||
currentlyRoute(to.name as string);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 路由跳转错误
|
||||
router.onError((error: any) => {
|
||||
NProgress.done();
|
||||
console.warn("路由错误", error.message);
|
||||
});
|
||||
|
||||
// 路由加载后
|
||||
router.afterEach(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
export default router;
|
||||
import NProgress from "@/config/nprogress";
|
||||
import pinia from "@/store/index";
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import { staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
|
||||
import { currentlyRoute } from "@/router/route-output";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useUserInfoStore } from "@/store/modules/user-info";
|
||||
import { useRoutesConfigStore } from "@/store/modules/route-config";
|
||||
import { useRoutingMethod } from "@/hooks/useRoutingMethod";
|
||||
import { loadingPage } from "@/utils/loading-page";
|
||||
|
||||
/**
|
||||
* 创建vue的路由示例
|
||||
* @method createRouter(options: RouterOptions): Router
|
||||
* @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
|
||||
*/
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
/**
|
||||
* 设置静态路由，其它的路由通过addRoute动态添加
|
||||
* 1、staticRoutes登录页
|
||||
* 2、notFoundAndNoPower 添加默认 404、401界面，防止提示 No match found for location with path 'xxx'
|
||||
* 2、后端控制路由中也需要添加 notFoundAndNoPower 404、401界面
|
||||
* 静态添加 notFoundAndNoPower 404、401界面将全屏显示
|
||||
* 如果要 notFoundAndNoPower 在layout容器展示，则需要移除静态添加并将其添加到缓存路由树
|
||||
*/
|
||||
routes: [...staticRoutes, ...notFoundAndNoPower]
|
||||
});
|
||||
|
||||
/**
|
||||
* 路由加载前需要判断用户是否登录
|
||||
* 1、去登录页，无token，放行
|
||||
* 2、没有token，直接重定向到登录页
|
||||
* 3、去登录页，有token，直接重定向到home页
|
||||
* 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
|
||||
* 注意：
|
||||
* 全局routeTree不能持久化缓存
|
||||
* 页面刷新会导致addRoute动态添加的路由失效，需要重新初始化路由
|
||||
*/
|
||||
router.beforeEach(async (to, _, next) => {
|
||||
NProgress.start(); // 开启进度条
|
||||
const store = useUserInfoStore(pinia);
|
||||
const { token } = storeToRefs(store);
|
||||
// console.log("去", to, "来自", from);
|
||||
// next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach
|
||||
if (to.path === "/login" && !token.value) {
|
||||
// 1、去登录页，无token，放行
|
||||
next();
|
||||
} else if (!token.value) {
|
||||
// 2、没有token，直接重定向到登录页
|
||||
next("/login");
|
||||
} else if (to.path === "/login" && token.value) {
|
||||
// 3、去登录页，有token，直接重定向到home页
|
||||
next("/home");
|
||||
// 项目内的跳转，处理跳转路由高亮
|
||||
currentlyRoute(to.name as string);
|
||||
} else {
|
||||
// 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
|
||||
const routeStore = useRoutesConfigStore(pinia);
|
||||
const { routeTree } = storeToRefs(routeStore);
|
||||
|
||||
// 获取外链路由的处理函数
|
||||
// 所有的路由正常放行，只不过额外判断是否是外链，如果是，则打开新窗口跳转外链
|
||||
// 外链的页面依旧正常打开，只不过不会参与缓存与tabs显示，符合路由跳转的直觉
|
||||
const { openExternalLinks } = useRoutingMethod();
|
||||
|
||||
// 如果缓存的路由是0，则说明未动态添加路由，先添加再跳转
|
||||
// 解决刷新页面404的问题
|
||||
if (routeTree.value.length == 0) {
|
||||
loadingPage.start();
|
||||
await routeStore.initSetRouter();
|
||||
// 处理外链跳转
|
||||
openExternalLinks(to);
|
||||
// 处理完重新跳转
|
||||
next({ path: to.path, query: to.query });
|
||||
} else {
|
||||
// 处理外链跳转
|
||||
openExternalLinks(to);
|
||||
// 动态路由添加过走这里，直接放行
|
||||
next();
|
||||
// 项目内的跳转，处理跳转路由高亮
|
||||
currentlyRoute(to.name as string);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 路由跳转错误
|
||||
router.onError((error: any) => {
|
||||
NProgress.done();
|
||||
console.warn("路由错误", error.message);
|
||||
});
|
||||
|
||||
// 路由加载后
|
||||
router.afterEach(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
// 设置滚动条的样式
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// 基于 WebKit 内核的浏览器
|
||||
// 设置滚动条的样式，宽、圆角、背景颜色
|
||||
::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-3;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@ -14,16 +16,19 @@
|
||||
// 设置滚动条hover样式，宽、圆角、背景颜色
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-4;
|
||||
}
|
||||
|
||||
// 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同
|
||||
::-ms-scrollbar-thumb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-3;
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-ms-scrollbar-thumb:hover {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-4;
|
||||
}
|
||||
|
||||
@ -1,36 +1,90 @@
|
||||
<template>
|
||||
<div class="snow-page">
|
||||
<div class="snow-inner">
|
||||
<svg id="imgcode"></svg>
|
||||
<div class="code-box">
|
||||
<a-card v-for="item in codeList" :key="item.id" :title="item.docs" :style="{ width: '400px' }" hoverable>
|
||||
<div class="card-content">
|
||||
<draw-barcode :text="item.text" :options="item.options" />
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import JsBarcode from "jsbarcode";
|
||||
|
||||
const createCode = () => {
|
||||
JsBarcode("#imgcode", "123", {
|
||||
format: "CODE39", //选择要使用的条形码类型
|
||||
width: 3, //设置条之间的宽度
|
||||
height: 100, //高度
|
||||
displayValue: true, //是否在条形码下方显示文字
|
||||
text: "456", //覆盖显示的文本
|
||||
fontOptions: "bold italic", //使文字加粗体或变斜体
|
||||
font: "fantasy", //设置文本的字体
|
||||
textAlign: "left", //设置文本的水平对齐方式
|
||||
textPosition: "top", //设置文本的垂直位置
|
||||
textMargin: 5, //设置条形码和文本之间的间距
|
||||
fontSize: 15, //设置文本的大小
|
||||
background: "#eee", //设置条形码的背景
|
||||
lineColor: "#2196f3", //设置条和文本的颜色。
|
||||
margin: 15 //设置条形码周围的空白边距
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
createCode();
|
||||
});
|
||||
const codeList = ref([
|
||||
{
|
||||
id: 1,
|
||||
text: "SnowAdmin",
|
||||
docs: "CODE128-默认条形码",
|
||||
options: {
|
||||
format: "CODE128",
|
||||
height: 100
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "SnowAdmin",
|
||||
docs: "自定义高度和颜色",
|
||||
options: {
|
||||
format: "CODE128",
|
||||
height: 50,
|
||||
background: "#f7f8fa",
|
||||
lineColor: "#2962ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "SnowAdmin",
|
||||
docs: "设置字体和倾斜",
|
||||
options: {
|
||||
format: "CODE128",
|
||||
height: 100,
|
||||
font: "fantasy",
|
||||
fontOptions: "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: "SnowAdmin",
|
||||
docs: "CODE39-商品条形码",
|
||||
options: {
|
||||
format: "CODE39",
|
||||
height: 100
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
text: "6971318501227",
|
||||
docs: "EAN13-商品条形码",
|
||||
options: {
|
||||
format: "EAN13",
|
||||
height: 100
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
text: "123456789999",
|
||||
docs: "UPC-商品条形码",
|
||||
options: {
|
||||
format: "UPC",
|
||||
height: 100
|
||||
}
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.code-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $margin;
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user