mirror of https://github.com/nocodb/nocodb
Daniel Spaude
2 years ago
9 changed files with 120 additions and 202 deletions
@ -1,68 +0,0 @@ |
|||||||
import { defineComponent, h } from 'vue' |
|
||||||
import JsBarcode from 'jsbarcode' |
|
||||||
|
|
||||||
// TODO: add proper reference for the origin of this code here
|
|
||||||
export default defineComponent({ |
|
||||||
name: 'JsBarcodeWrapper', |
|
||||||
|
|
||||||
props: { |
|
||||||
/** |
|
||||||
* The value of the bar code. |
|
||||||
*/ |
|
||||||
value: { |
|
||||||
type: String, |
|
||||||
default: undefined, |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* The options for the bar code generator. |
|
||||||
* {@link https://github.com/lindell/JsBarcode#options}
|
|
||||||
*/ |
|
||||||
options: { |
|
||||||
type: Object, |
|
||||||
default: undefined, |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* The tag name of the component's root element. |
|
||||||
*/ |
|
||||||
tag: { |
|
||||||
type: String, |
|
||||||
default: 'canvas', |
|
||||||
}, |
|
||||||
}, |
|
||||||
|
|
||||||
watch: { |
|
||||||
$props: { |
|
||||||
deep: true, |
|
||||||
immediate: true, |
|
||||||
|
|
||||||
/** |
|
||||||
* Update the bar code when props changed. |
|
||||||
*/ |
|
||||||
handler() { |
|
||||||
if (this.$el) { |
|
||||||
this.generate() |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
|
|
||||||
mounted() { |
|
||||||
this.generate() |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
/** |
|
||||||
* Generate bar code. |
|
||||||
*/ |
|
||||||
generate() { |
|
||||||
// debugger
|
|
||||||
JsBarcode(this.$el, String(this.value), this.options) |
|
||||||
}, |
|
||||||
}, |
|
||||||
|
|
||||||
render() { |
|
||||||
return h(this.tag, this.$slots.default) |
|
||||||
}, |
|
||||||
}) |
|
||||||
@ -0,0 +1,42 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import JsBarcode from 'jsbarcode' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
barcodeValue: { type: String, required: true }, |
||||||
|
barcodeFormat: { type: String, required: true }, |
||||||
|
}) |
||||||
|
const emit = defineEmits(['onClickBarcode']) |
||||||
|
const barcodeSvgRef = ref(null) |
||||||
|
const errorForCurrentInput = ref(false) |
||||||
|
const generate = () => { |
||||||
|
try { |
||||||
|
JsBarcode(barcodeSvgRef.value, String(props.barcodeValue), { |
||||||
|
format: props.barcodeFormat, |
||||||
|
}) |
||||||
|
errorForCurrentInput.value = false |
||||||
|
} catch (e) { |
||||||
|
console.log('e', e) |
||||||
|
errorForCurrentInput.value = true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onBarcodeClick = (ev: MouseEvent) => { |
||||||
|
ev.stopPropagation() |
||||||
|
emit('onClickBarcode') |
||||||
|
} |
||||||
|
|
||||||
|
watch(() => props.barcodeValue, generate) |
||||||
|
watch(() => props.barcodeFormat, generate) |
||||||
|
onMounted(generate) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<svg v-show="!errorForCurrentInput" ref="barcodeSvgRef" @click="onBarcodeClick"></svg> |
||||||
|
<slot v-if="errorForCurrentInput" name="barcodeRenderError" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
svg { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue