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

57
pages/tripartite/okBarcode.html
View File

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