低代码高性能原生UI框架Signature 签名
组件类型：UxSignatureComponentPublicInstance
支持横竖屏切换、支持背景色、笔触大小、笔触颜色、背景颜色配置
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| text | String | '签名区' | 背景文字 |
| size | Number | 2 | 笔触大小 |
| theme | String | primary | 主题颜色 |
| color | string | $ux.Conf.infoColor | 笔触颜色 |
| background | String | $ux.Conf.backgroundColor | 背景颜色 |
| confirm | String | '确定' | 确定文字 |
| confirmColor | String | $ux.Conf.primaryColor | 确定文字颜色 |
| minWidth | Number | 2 | 最小宽度 |
| maxWidth | Number | 6 | 最大宽度 |
| minSpeed | Number | 1.5 | 最小速度 |
| maxHistory | Number | 20 | 最大可撤销记录 |
| fullScreen | Boolean | false | 全屏 |
| format | String | 'png' | 图片格式 |
| showBtns | Boolean | true | 显示操作按钮 |
| disableScroll | Boolean | true | 禁止屏幕滚动 |
| disabled | Boolean | false | 是否禁用 |
theme
| 值 | 说明 |
|---|---|
| primary | 主色 |
| warning | 警告 |
| success | 成功 |
| error | 错误 |
| info | 文本 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
format
| 值 | 说明 |
|---|---|
| png | png格式 |
| jpg | jpg格式 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 调用 make 生成签名事件 | event: Function(tempFilePath: string) |
API
| 方法名 | 说明 | 参数 |
|---|---|---|
| undo | 撤销 | - |
| redo | 重做 | - |
| clear | 清空 | - |
| make | 生成签名 | - |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="手写板签名" :bold="true">
<ux-text text="支持横竖屏切换、支持背景色、笔触大小、笔触颜色、背景颜色配置"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="手写板签名" text="https://www.uxframe.cn/component/func/signature.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<!-- #ifdef APP -->
<ux-signature ref="signature" :fullScreen="false" :color="color" :size="5" :mt="30" @change="onChange"></ux-signature>
<!-- #endif -->
<!-- #ifdef WEB -->
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="cry" text="官方bug,暂不支持Web"></ux-text>
</ux-row>
</ux-placeholder>
<!-- #endif -->
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="手写板签名" :bold="true">
<ux-text text="支持横竖屏切换、支持背景色、笔触大小、笔触颜色、背景颜色配置"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="手写板签名" text="https://www.uxframe.cn/component/func/signature.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<!-- #ifdef APP -->
<ux-signature ref="signature" :fullScreen="false" :color="color" :size="5" :mt="30" @change="onChange"></ux-signature>
<!-- #endif -->
<!-- #ifdef WEB -->
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="cry" text="官方bug,暂不支持Web"></ux-text>
</ux-row>
</ux-placeholder>
<!-- #endif -->
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
const color = ref('red')
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function onChange(path: string) {
uni.previewImage({
urls: [path]
})
}
</script><script setup>
let title = ''
const color = ref('red')
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function onChange(path: string) {
uni.previewImage({
urls: [path]
})
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>