root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add:okBarcode使用方法

master
bobi 2019-11-02 13:53:57 +08:00
parent 07b7378929
commit 0bac0eb878
1 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
pages/tripartite/okBarcode.html
View File

@ -8,17 +8,17 @@
</head> </head>
<body> <body>
<div class="ok-body"> <div class="ok-body">
<div id="barcode"></div> <blockquote class="layui-elem-quote">
</div> <p>创建条形码</p>
<!--js逻辑--> </blockquote>
<script src="../../lib/layui/layui.js"></script> <pre>
<script>
layui.use(["okBarcode"], function () { layui.use(["okBarcode"], function () {
let $ = layui.jquery; let $ = layui.jquery;
<br/>
$("#barcode").barcode("153510264086cc8e", "code128", { $("#barcode").barcode("153510264086cc8e", "code128", {
output: 'css', //渲染方式 css/bmp/svg/canvas output: "css", // 渲染方式 css|bmp|svg|canvas
//bgColor: '#ff0000', //条码背景颜色 //bgColor: "#ff0000", // 条码背景颜色
//color: '#00ff00', //条码颜色 //color: "#00ff00", // 条码颜色
barWidth: 1, // 单条条码宽度 barWidth: 1, // 单条条码宽度
barHeight: 30, // 单体条码高度 barHeight: 30, // 单体条码高度
// moduleSize: 10, // 条码大小 // moduleSize: 10, // 条码大小
@ -27,6 +27,39 @@
showHRI: true, // 是否在条码下方显示内容 showHRI: true, // 是否在条码下方显示内容
addQuietZone: false // 是否添加空白区（内边距） addQuietZone: false // 是否添加空白区（内边距）
}); });
});
</pre>
<button type="button" class="layui-btn" id="try">试一下</button>
<br/>
<br/>
<div id="barcode"></div>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["code", "okBarcode"], function () {
let code = layui.code;
let $ = layui.jquery;
code({
elem: 'pre',
title: "代码示例"
});
$("#try").click(function () {
$("#barcode").barcode("153510264086cc8e", "code128", {
output: "css", // 渲染方式 css|bmp|svg|canvas
//bgColor: "#ff0000", // 条码背景颜色
//color: "#00ff00", // 条码颜色
barWidth: 1, // 单条条码宽度
barHeight: 30, // 单体条码高度
// moduleSize: 10, // 条码大小
// posX: 10, // 条码坐标X
// posY: 5, // 条码坐标Y
showHRI: true, // 是否在条码下方显示内容
addQuietZone: false // 是否添加空白区（内边距）
});
});
}); });
</script> </script>
</body> </body>