optimize(projects): optimize code

This commit is contained in:
Soybean 2024-05-08 22:57:22 +08:00
parent 0478154db8
commit 12d7bf94ee

View File

@ -1,91 +1,114 @@
<script setup lang="ts"> <script setup lang="ts">
import JsBarcode from 'jsbarcode'; import JsBarcode from 'jsbarcode';
import type { Options } from 'jsbarcode';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
const text = 'Soybean'; const text = 'Soybean';
interface CodeConfig {
id: string;
title: string;
text: string;
options: Options;
}
const codes: CodeConfig[] = [
{
id: 'code39',
title: 'CODE 39 正常尺寸',
text: 'Hello',
options: { format: 'code39' }
},
{
id: 'code128',
title: 'CODE 128 正常尺寸',
text,
options: {}
},
{
id: 'ean-13',
title: 'ENA-13 商品条形码',
text: '1234567890128',
options: { format: 'ean13' }
},
{
id: 'upc-a',
title: 'UPC-A 商品条形码',
text: '123456789012',
options: { format: 'upc' }
},
{
id: 'barcode',
title: '不一样的高度,不一样的颜色',
text: 'Hello',
options: {
height: 30,
lineColor: '#9ca3af'
}
},
{
id: 'barcode1',
title: '加个背景色',
text,
options: {
background: '#9ca3af',
lineColor: '#ffffff'
}
},
{
id: 'barcode2',
title: '字体好大',
text,
options: {
fontSize: 40
}
},
{
id: 'barcode3',
title: '粗狂的条码,文字离远点',
text: 'Hi',
options: {
textMargin: 30,
width: 4
}
},
{
id: 'barcode4',
title: '字体跑上面来,还是粗体',
text,
options: {
textPosition: 'top',
fontOptions: 'bold'
}
}
];
function generateBarcode() {
codes.forEach(code => {
JsBarcode(`#${code.id}`, code.text, code.options);
});
}
onMounted(() => { onMounted(() => {
JsBarcode('#code39', 'Hello', { format: 'code39' }); generateBarcode();
JsBarcode('#code128', text);
JsBarcode('#ean-13', '1234567890128', { format: 'ean13' });
JsBarcode('#upc-a', '123456789012', { format: 'upc' });
JsBarcode('#barcode', 'Hello', {
height: 30,
lineColor: '#9ca3af'
});
JsBarcode('#barcode1', text, {
background: '#9ca3af',
lineColor: '#ffffff'
});
JsBarcode('#barcode2', text, {
fontSize: 40
});
JsBarcode('#barcode3', 'Hi', {
textMargin: 30,
width: 4
});
JsBarcode('#barcode4', text, {
textPosition: 'top',
fontOptions: 'bold'
});
}); });
</script> </script>
<template> <template>
<div> <div class="overflow-hidden">
<NCard title="条形码" :bordered="false" class="h-full card-wrapper"> <NCard title="条形码" :bordered="false" class="h-full card-wrapper" content-class="overflow-hidden">
<NGrid cols="s:1 m:1 l:3" x-gap="12px" y-gap="24px" responsive="screen" item-responsive class="grid-wrapper"> <NScrollbar class="h-full">
<NGi> <NGrid cols="1 s:2 l:3" :x-gap="12" :y-gap="24" responsive="screen" item-responsive>
CODE 39 正常尺寸 <NGi v-for="item in codes" :key="item.id">
<svg id="code39" /> <div class="flex-col-center">
</NGi> <h3>{{ item.title }}</h3>
<NGi> <svg :id="item.id" class="h-130px" />
CODE 128 正常尺寸 </div>
<svg id="code128" /> </NGi>
</NGi> </NGrid>
<NGi> </NScrollbar>
ENA-13 商品条形码
<svg id="ean-13" />
</NGi>
<NGi>
UPC-A 商品条形码
<svg id="upc-a" />
</NGi>
<NGi>
不一样的高度不一样的颜色
<svg id="barcode" />
</NGi>
<NGi>
加个背景色
<svg id="barcode1" />
</NGi>
<NGi>
字体好大
<svg id="barcode2" />
</NGi>
<NGi>
粗狂的条码文字离远点
<svg id="barcode3" />
</NGi>
<NGi>
字体跑上面来还是粗体
<svg id="barcode4" />
</NGi>
</NGrid>
</NCard> </NCard>
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
.grid-wrapper {
display: flex;
flex-wrap: wrap;
}
.grid-wrapper > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
</style>