Sard Uniapp

Appearance

在新窗口打开⤴

Barcode条形码1.29+

介绍 ​

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

引入 ​

js
import Barcode from 'sard-uniapp/components/barcode/barcode.vue'

代码演示 ​

基础用法 ​

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

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

条形码类型 ​

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

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

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

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>
  <sar-list card>
    <sar-list-item>
      <sar-segmented
        v-model="format"
        :options="formatOptions"
        :ellipsis="false"
      />
    </sar-list-item>
    <sar-list-item>
      <sar-barcode :value="samples[format]" :format="format" />
    </sar-list-item>
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
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>
  <sar-list card>
    <sar-list-item title="模块宽度">
      <template #value>
        <sar-slider
          v-model="moduleWidth"
          :min="2"
          :max="6"
          show-scale
          style="width: 500rpx"
        />
      </template>
    </sar-list-item>
    <sar-list-item title="模块高度">
      <template #value>
        <sar-slider
          v-model="moduleHeight"
          :min="10"
          :max="100"
          style="width: 500rpx"
        />
      </template>
    </sar-list-item>
    <sar-list-item title="条颜色">
      <template #value>
        <view style="width: 500rpx">
          <sar-color-picker-input
            v-model="color"
            show-alpha
            show-presets
            clearable
          />
        </view>
      </template>
    </sar-list-item>
    <sar-list-item title="背景色">
      <template #value>
        <view style="width: 500rpx">
          <sar-color-picker-input
            v-model="background"
            show-alpha
            show-presets
            clearable
          />
        </view>
      </template>
    </sar-list-item>
    <sar-list-item>
      <sar-barcode
        value="123456789012"
        :width="moduleWidth"
        :height="moduleHeight"
        :background="background"
        :color="color"
      />
    </sar-list-item>
  </sar-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>
  <sar-list card>
    <sar-list-item title="模块宽度">
      <template #value>
        <sar-slider
          v-model="moduleWidth"
          :min="2"
          :max="6"
          show-scale
          style="width: 500rpx"
        />
      </template>
    </sar-list-item>
    <sar-list-item title="模块高度">
      <template #value>
        <sar-slider
          v-model="moduleHeight"
          :min="10"
          :max="100"
          style="width: 500rpx"
        />
      </template>
    </sar-list-item>
    <sar-list-item title="条颜色">
      <template #value>
        <view style="width: 500rpx">
          <sar-color-picker-input
            v-model="color"
            show-alpha
            show-presets
            clearable
          />
        </view>
      </template>
    </sar-list-item>
    <sar-list-item title="背景色">
      <template #value>
        <view style="width: 500rpx">
          <sar-color-picker-input
            v-model="background"
            show-alpha
            show-presets
            clearable
          />
        </view>
      </template>
    </sar-list-item>
    <sar-list-item>
      <sar-barcode
        value="123456789012"
        :width="moduleWidth"
        :height="moduleHeight"
        :background="background"
        :color="color"
      />
    </sar-list-item>
  </sar-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>
  <sar-list card>
    <sar-list-item title="显示文本">
      <template #value>
        <sar-switch v-model="displayValue" />
      </template>
    </sar-list-item>
    <sar-list-item title="加粗">
      <template #value>
        <sar-switch v-model="bold" />
      </template>
    </sar-list-item>
    <sar-list-item title="倾斜">
      <template #value>
        <sar-switch v-model="italic" />
      </template>
    </sar-list-item>
    <sar-list-item title="字号">
      <template #value>
        <sar-slider
          v-model="fontSize"
          :min="10"
          :max="30"
          style="width: 500rpx"
        />
      </template>
    </sar-list-item>
    <sar-list-item title="文本边距">
      <template #value>
        <sar-slider
          v-model="textMargin"
          :min="0"
          :max="30"
          style="width: 500rpx"
        />
      </template>
    </sar-list-item>
    <sar-list-item>
      <sar-segmented v-model="textPosition" :options="textPositionOptions" />
    </sar-list-item>
    <sar-list-item>
      <sar-segmented v-model="textAlign" :options="textAlignOptions" />
    </sar-list-item>
    <sar-list-item>
      <sar-barcode
        value="123456789012"
        :display-value="displayValue"
        :text-position="textPosition"
        :text-align="textAlign"
        :font-style="italic ? 'italic' : 'normal'"
        :font-weight="bold ? 'bold' : 'normal'"
        font="Arial"
        :font-size="fontSize"
        :text-margin="textMargin"
      />
    </sar-list-item>
  </sar-list>
</template>

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

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

<script setup lang="js">
import { ref } from "vue";
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 ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
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文本与条形码间距number2
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'
show-menu-by-longpress长按图片显示菜单(微信小程序)booleanfalse

BarcodeEmits ​

事件描述类型
success条形码图片绘制成功后触发，可用于获取临时文件路径(tempFilePath: string) => void

BarcodeFormat ​

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

Released under the MIT License.

Copyright © 2023-present wuzhitao