图片

图片控件用于展示图片内容，支持动态设置图片地址和图片弹窗浏览。

属性

sg-url

• 说明：图片的 URL 地址
• 类型：string
• 默认值：""

示例:

"sg-url":"/images/avatar.jpg"

方法

setSrcById

通过控件 ID 设置图片地址。

语法:

setSrcById(id, src)

参数:

参数名	类型	必填	说明
id	string	是	图片控件 id
src	string	是	新的图片地址

示例:

// 通过 id 改变图片
setSrcById("avatarImg", "/images/new_avatar.jpg");

setSrcByName

通过控件 name 设置图片地址。

语法:

setSrcByName(name, src)

参数:

参数名	类型	必填	说明
name	string	是	图片控件的 name
src	string	是	指定的图片地址

示例:

// 通过 name 改变图片
setSrcByName("avatar", "/images/new_avatar.jpg");

openImg

打开图片全屏浏览弹窗。

语法:

openImg(src, params)

参数:

参数名	类型	必填	说明
src	string	是	图片地址
params	Object	是	附加参数

示例:

// 打开图片浏览弹窗
openImg("/images/photo.jpg", {title: "照片预览", width: 800, height: 600});

showPictureFile

前端预览上传的图片文件。

语法:

showPictureFile(file, cb)

参数:

参数名	类型	必填	说明
file	Object	是	上传文件对象
cb	function	是	回调函数

示例:

// 前端预览图片
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
showPictureFile(file, function(base64Data) {
    document.getElementById("previewImg").src = base64Data;
});

formatFileSize

格式化文件大小（如 KB、MB）。

语法:

formatFileSize(fileSize)

参数:

参数名	类型	必填	说明
fileSize	number	是	文件大小

返回值:

返回带单位的文件大小字符串。

示例:

// 格式化文件大小
var size = formatFileSize(1024);
console.log(size); // 输出: 1KB

var size2 = formatFileSize(1048576);
console.log(size2); // 输出: 1MB

render_barcode

调用条码渲染接口（基于 jsbarcode 封装），调用后 suger 会自动加载 jsbarcode。

语法:

render_barcode(selector, content, params, callback)

参数:

参数名	类型	必填	说明
selector	string	是	选择器
content	string	是	条码内容
params	Object	否	条码参数，详见 JsBarcode 文档
callback	Object	否	回调对象，包含 success、error 两种方法（可以放空）

params 参数说明:

参数名	类型	默认值	说明
format	string	"auto" (CODE128)	条码类型，如 EAN13、CODE39、upc、pharmacode 等
width	number	2	单个条码宽度
height	number	100	条码高度
displayValue	boolean	true	是否显示文字
text	string	undefined	覆盖底部显示的文字
fontOptions	string	""	文字样式，可设置 bold（加粗）、italic（斜体）
font	string	"monospace"	字体
textAlign	string	"center"	文字水平对齐方式，left/center/right
textPosition	string	"bottom"	文字垂直位置，bottom/top
textMargin	number	2	文字与条码的间距
fontSize	number	20	文字字体大小
background	string	"#ffffff"	背景颜色
lineColor	string	"#000000"	条码线与文字颜色
margin	number	10	条码外边距
marginTop	number	undefined	上边距
marginBottom	number	undefined	下边距
marginLeft	number	undefined	左边距
marginRight	number	undefined	右边距
flat	boolean	false	仅用于 EAN8/EAN13
valid	function	-	校验回调

callback 参数说明:

参数名	类型	说明
success	function	成功回调
error	function	失败回调

示例:

// 基本用法
render_barcode("#barcode", "123456789012", {
  format: "EAN13",
  width: 2,
  height: 100,
  fontSize: 35,
  lineColor: "#000",
  textAlign: "center",
  margin: 20,
  displayValue: true
});

// 带回调
render_barcode("#barcode", "123456789012", {
  format: "CODE39"
}, {
  success: () => console.log("条码渲染成功"),
  error: () => console.log("条码渲染失败")
});

// EAN8 扁平模式
render_barcode("#barcode", "29012343", {
  format: "EAN8",
  flat: true
});