Sard

Appearance

100%
在新窗口打开⤴

Barcode条形码

介绍 ​

根据内容生成对应条形码图形。

代码演示 ​

基础用法 ​

通过 value 属性设置条形码内容，format 属性设置条形码类型，默认为 CODE128。

vue
<template>
  <s-barcode value="123456789012" />
</template>

条形码类型 ​

当前支持 4 种条形码类型：CODE128、EAN13、UPC-A、ITF14。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-segmented v-model="format" :options="formatOptions" :ellipsis="false" />
    </s-list-item>
    <s-list-item>
      <s-barcode :value="samples[format]" :format="format" />
    </s-list-item>
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type BarcodeFormat } from 'sard'

const formatOptions: BarcodeFormat[] = ['CODE128', 'EAN13', 'UPC-A', 'ITF14']

const samples: Record<BarcodeFormat, string> = {
  CODE128: 'Hello123',
  EAN13: '590123412345',
  'UPC-A': '12345678901',
  ITF14: '1234567890123',
}

const format = ref<BarcodeFormat>('CODE128')
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-segmented v-model="format" :options="formatOptions" :ellipsis="false" />
    </s-list-item>
    <s-list-item>
      <s-barcode :value="samples[format]" :format="format" />
    </s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import 'sard'
const formatOptions = ['CODE128', 'EAN13', 'UPC-A', 'ITF14']
const samples = {
  CODE128: 'Hello123',
  EAN13: '590123412345',
  'UPC-A': '12345678901',
  ITF14: '1234567890123',
}
const format = ref('CODE128')
</script>

自定义样式 ​

可以通过以下属性自定义条形码外观：

  • width 条形码单个条纹宽度
  • height 条形码高度
  • color 条形码颜色
  • background 背景颜色
vue
<template>
  <s-list card>
    <s-list-item title="模块宽度">
      <template #value>
        <s-slider v-model="moduleWidth" :min="2" :max="6" show-scale style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item title="模块高度">
      <template #value>
        <s-slider v-model="moduleHeight" :min="10" :max="100" style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item title="条颜色">
      <template #value>
        <div style="width: 250px">
          <s-color-picker-input v-model="color" show-alpha show-presets clearable />
        </div>
      </template>
    </s-list-item>
    <s-list-item title="背景色">
      <template #value>
        <div style="width: 250px">
          <s-color-picker-input v-model="background" show-alpha show-presets clearable />
        </div>
      </template>
    </s-list-item>
    <s-list-item>
      <s-barcode
        value="123456789012"
        :width="moduleWidth"
        :height="moduleHeight"
        :background="background"
        :color="color"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const moduleWidth = ref(2)
const moduleHeight = ref(100)
const color = ref('#000')
const background = ref('#d3e4ff')
</script>
vue
<template>
  <s-list card>
    <s-list-item title="模块宽度">
      <template #value>
        <s-slider v-model="moduleWidth" :min="2" :max="6" show-scale style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item title="模块高度">
      <template #value>
        <s-slider v-model="moduleHeight" :min="10" :max="100" style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item title="条颜色">
      <template #value>
        <div style="width: 250px">
          <s-color-picker-input v-model="color" show-alpha show-presets clearable />
        </div>
      </template>
    </s-list-item>
    <s-list-item title="背景色">
      <template #value>
        <div style="width: 250px">
          <s-color-picker-input v-model="background" show-alpha show-presets clearable />
        </div>
      </template>
    </s-list-item>
    <s-list-item>
      <s-barcode
        value="123456789012"
        :width="moduleWidth"
        :height="moduleHeight"
        :background="background"
        :color="color"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const moduleWidth = ref(2)
const moduleHeight = ref(100)
const color = ref('#000')
const background = ref('#d3e4ff')
</script>

文本 ​

通过 display-value 控制文本显示，通过 text-position、text-align、text-margin、font-style、font-weight、font-size、font-family 自定义文本样式。

vue
<template>
  <s-list card>
    <s-list-item title="显示文本">
      <template #value>
        <s-switch v-model="displayValue" />
      </template>
    </s-list-item>
    <s-list-item title="加粗">
      <template #value>
        <s-switch v-model="bold" />
      </template>
    </s-list-item>
    <s-list-item title="倾斜">
      <template #value>
        <s-switch v-model="italic" />
      </template>
    </s-list-item>
    <s-list-item title="字号">
      <template #value>
        <s-slider v-model="fontSize" :min="10" :max="30" style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item title="文本边距">
      <template #value>
        <s-slider v-model="textMargin" :min="0" :max="30" style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="textPosition" :options="textPositionOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="textAlign" :options="textAlignOptions" />
    </s-list-item>
    <s-list-item>
      <s-barcode
        value="123456789012"
        :display-value="displayValue"
        :text-position="textPosition"
        :text-align="textAlign"
        :font-style="italic ? 'italic' : 'normal'"
        :font-weight="bold ? 'bold' : 'normal'"
        font-family="Arial"
        :font-size="fontSize"
        :text-margin="textMargin"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type BarcodeTextPosition, type CanvasTextAlign } from 'sard'

const textPositionOptions: BarcodeTextPosition[] = ['top', 'bottom']
const textAlignOptions: CanvasTextAlign[] = ['left', 'center', 'right']

const displayValue = ref(true)
const textPosition = ref<BarcodeTextPosition>('bottom')
const textAlign = ref<CanvasTextAlign>('center')

const bold = ref(false)
const italic = ref(false)
const fontSize = ref(18)
const textMargin = ref(5)
</script>
vue
<template>
  <s-list card>
    <s-list-item title="显示文本">
      <template #value>
        <s-switch v-model="displayValue" />
      </template>
    </s-list-item>
    <s-list-item title="加粗">
      <template #value>
        <s-switch v-model="bold" />
      </template>
    </s-list-item>
    <s-list-item title="倾斜">
      <template #value>
        <s-switch v-model="italic" />
      </template>
    </s-list-item>
    <s-list-item title="字号">
      <template #value>
        <s-slider v-model="fontSize" :min="10" :max="30" style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item title="文本边距">
      <template #value>
        <s-slider v-model="textMargin" :min="0" :max="30" style="width: 250px" />
      </template>
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="textPosition" :options="textPositionOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="textAlign" :options="textAlignOptions" />
    </s-list-item>
    <s-list-item>
      <s-barcode
        value="123456789012"
        :display-value="displayValue"
        :text-position="textPosition"
        :text-align="textAlign"
        :font-style="italic ? 'italic' : 'normal'"
        :font-weight="bold ? 'bold' : 'normal'"
        font-family="Arial"
        :font-size="fontSize"
        :text-margin="textMargin"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import 'sard'
const textPositionOptions = ['top', 'bottom']
const textAlignOptions = ['left', 'center', 'right']
const displayValue = ref(true)
const textPosition = ref('bottom')
const textAlign = ref('center')
const bold = ref(false)
const italic = ref(false)
const fontSize = ref(18)
const textMargin = ref(5)
</script>

API ​

BarcodeProps ​

属性描述类型默认值
value条形码内容string-
format条形码类型BarcodeFormat'CODE128'
width条形码单个条纹宽度number2
height条形码高度number100
color条形码颜色string'#000'
background背景颜色string'#fff'
display-value是否显示文本booleantrue
text-position文本位置'top' | 'bottom''bottom'
text-align文本对齐方式'left' | 'center' | 'right''center'
text-margin文本与条形码间距number5
font-style文本样式'normal' | 'italic' | 'oblique''normal'
font-weight文本加粗'normal' | 'bold' | number | 'lighter' | 'bolder''normal'
font-size文本字号number14
font-family文本字体string'monospace'
margin统一外边距number10
margin-top上外边距number'margin'
margin-bottom下外边距number'margin'
margin-left左外边距number'margin'
margin-right右外边距number'margin'

BarcodeFormat ​

ts
type BarcodeFormat = 'CODE128' | 'EAN13' | 'UPC-A' | 'ITF14'

Released under the MIT License.

Copyright © 2023-present wuzhitao