index.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. var JsBarcode = require('jsbarcode');
  2. var VueBarcode = {
  3. render: function (createElement) {
  4. return createElement('div', [
  5. createElement(this.elementTag, {
  6. style: { display: this.valid ? undefined : 'none' },
  7. 'class': ['vue-barcode-element']
  8. }),
  9. createElement('div', {
  10. style: { display: this.valid ? 'none' : undefined }
  11. }, this.$slots.default),
  12. ]);
  13. },
  14. props: {
  15. value: [String, Number],
  16. format: [String],
  17. width: [String, Number],
  18. height: [String, Number],
  19. displayValue: {
  20. type: [String, Boolean],
  21. default: true
  22. },
  23. text: [String, Number],
  24. fontOptions : [String],
  25. font: [String],
  26. textAlign: [String],
  27. textPosition: [String],
  28. textMargin: [String, Number],
  29. fontSize: [String, Number],
  30. background: [String],
  31. lineColor: [String],
  32. margin: [String, Number],
  33. marginTop: [String, Number],
  34. marginBottom: [String, Number],
  35. marginLeft: [String, Number],
  36. marginRight: [String, Number],
  37. flat: [Boolean],
  38. ean128: [String, Boolean],
  39. elementTag: {
  40. type: String,
  41. default: 'svg',
  42. validator: function (value) {
  43. return ['canvas', 'svg', 'img'].indexOf(value) !== -1
  44. }
  45. }
  46. },
  47. mounted: function(){
  48. this.$watch('$props', render, { deep: true, immediate: true });
  49. render.call(this);
  50. },
  51. data: function(){
  52. return {valid: true};
  53. }
  54. };
  55. function render(){
  56. var that = this;
  57. var settings = {
  58. format: this.format,
  59. width: this.width,
  60. height: this.height,
  61. displayValue: this.displayValue,
  62. text: this.text,
  63. fontOptions: this.fontOptions,
  64. font: this.font,
  65. textAlign: this.textAlign,
  66. textPosition: this.textPosition,
  67. textMargin: this.textMargin,
  68. fontSize: this.fontSize,
  69. background: this.background,
  70. lineColor: this.lineColor,
  71. margin: this.margin,
  72. marginTop: this.marginTop,
  73. marginBottom: this.marginBottom,
  74. marginLeft: this.marginLeft,
  75. marginRight: this.marginRight,
  76. flat: this.flat,
  77. ean128: this.ean128,
  78. valid: function (valid) {
  79. that.valid = valid;
  80. },
  81. elementTag: this.elementTag
  82. };
  83. removeUndefinedProps(settings);
  84. JsBarcode(this.$el.querySelector('.vue-barcode-element'), String(this.value), settings);
  85. }
  86. function removeUndefinedProps(obj) {
  87. for (var prop in obj) {
  88. if (obj.hasOwnProperty(prop) && obj[prop] === undefined) {
  89. delete obj[prop];
  90. }
  91. }
  92. }
  93. module.exports = VueBarcode;