mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
refactor: ♻️ 重构signature组件 (#853)
This commit is contained in:
不如摸鱼去
GitHub
parent
c0d48b25c1
commit
21fbfbb49b
@ -1,8 +1,15 @@
|
||||
# Signature 组件
|
||||
`Signature`组件是一个用于生成手写签名的 Vue 组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮
|
||||
# Signature 签名 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
|
||||
|
||||
用于签名场景，基于 Canvas 实现的签名组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮。
|
||||
|
||||
:::tip 提醒
|
||||
如果遇到导出图片不清晰，可以将`exportScale`设置为`2`以上。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```html
|
||||
<wd-signature @confirm="confirm" />
|
||||
<wd-signature @submit="confirm" @clear="clear" />
|
||||
<wd-img :height="img.height" :width="img.width" :src="img.src" v-if="img.src" />
|
||||
```
|
||||
|
||||
@ -12,36 +19,60 @@ const img = ref({
|
||||
height: 0,
|
||||
src: ''
|
||||
})
|
||||
function confirm(result: FileType) {
|
||||
|
||||
function confirm(result: SignatureResult) {
|
||||
img.value.src = result.tempFilePath
|
||||
img.value.height = result.height
|
||||
img.value.width = result.width
|
||||
}
|
||||
```
|
||||
## 自定义颜色
|
||||
`pen-color`设置签名笔的颜色，默认为`黑色`
|
||||
|
||||
## 自定义画笔颜色
|
||||
|
||||
`pen-color`设置签名笔的颜色，默认为`黑色`。
|
||||
|
||||
```html
|
||||
<wd-signature pen-color="red" />
|
||||
```
|
||||
|
||||
## 自定义画笔宽度
|
||||
|
||||
## 自定义宽度
|
||||
`line-width`设置签名笔的宽度，默认为`2`。
|
||||
|
||||
```html
|
||||
<wd-signature :line-width="6" />
|
||||
```
|
||||
|
||||
## 自定义背景色
|
||||
|
||||
`background-color`设置画板的背景色，无默认值。
|
||||
|
||||
```html
|
||||
<wd-signature background-color="lightgray" />
|
||||
```
|
||||
|
||||
## 禁用滚动
|
||||
|
||||
`disable-scroll`设置是否禁用画布滚动，默认为`true`。
|
||||
|
||||
```html
|
||||
<wd-signature :disable-scroll="false" />
|
||||
```
|
||||
|
||||
## 自定义按钮
|
||||
通过`footer`插槽可以自定义按钮
|
||||
|
||||
通过`footer`插槽可以自定义按钮。
|
||||
|
||||
```html
|
||||
<wd-signature :disabled="disabled">
|
||||
<template #footer="{ clear, confirm }">
|
||||
<wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
|
||||
<wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
|
||||
<wd-button v-if="!disabled" size="small" style="margin-left: 4px" @click="confirm">确认</wd-button>
|
||||
<wd-button v-if="!disabled" size="small" custom-style="margin-left: 4px" @click="confirm">确认</wd-button>
|
||||
</template>
|
||||
</wd-signature>
|
||||
```
|
||||
|
||||
```typescript
|
||||
const disabled = ref(true)
|
||||
|
||||
@ -49,39 +80,45 @@ function changeDisabled() {
|
||||
disabled.value = false
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
| penColor | 签名笔颜色 | String | -- | #000000 | -- |
|
||||
| lineWidth | 签名笔宽度 | Number | -- | 2 | -- |
|
||||
| height | 画布的高度 | Number | -- | 200 | -- |
|
||||
| width | 画布的宽度 | Number | -- | 300 | -- |
|
||||
| clearText | 清空按钮的文本 | String |-- | 清空 | -- |
|
||||
| confirmText | 确认按钮的文本 | String | -- | 确认 | -- |
|
||||
| fileType | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | String | -- | png | -- |
|
||||
| quality | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | Number | -- | 1 |-- |
|
||||
| exportScale | 导出图片的缩放比例 | Number | -- | 1 |-- |
|
||||
| disabled | 是否禁用签名板 | Boolean | -- | false | -- |
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----------------|----------------------------------------------------------------------|---------|--------|----------|----------|
|
||||
| penColor | 签名笔颜色 | String | -- | #000000 | -- |
|
||||
| lineWidth | 签名笔宽度 | Number | -- | 2 | -- |
|
||||
| height | 画布的高度 | Number | -- | 200 | -- |
|
||||
| width | 画布的宽度 | Number | -- | 300 | -- |
|
||||
| clearText | 清空按钮的文本 | String | -- | 清空 | -- |
|
||||
| confirmText | 确认按钮的文本 | String | -- | 确认 | -- |
|
||||
| fileType | 目标文件的类型，[uni.canvasToTempFilePath属性介绍](https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html) | String | -- | png | -- |
|
||||
| quality | 图片的质量，取值范围为 `(0, 1]`，不在范围内时当作1.0处理，[uni.canvasToTempFilePath属性介绍](https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html) | Number | -- | 1 | -- |
|
||||
| exportScale | 导出图片的缩放比例 | Number | -- | 1 | -- |
|
||||
| disabled | 是否禁用签名板 | Boolean | -- | false | -- |
|
||||
| backgroundColor | 画板的背景色 | String | -- | -- | -- |
|
||||
| disableScroll | 是否禁用画布滚动 | Boolean | -- | true | -- |
|
||||
|
||||
## Slot
|
||||
|
||||
| name | 说明 |参数 | 最低版本 |
|
||||
| ------- | ------------------------ |--- | -------- |
|
||||
| footer | 自定义footer | `{ clear, confirm }` |- |
|
||||
| name | 说明 | 参数 | 最低版本 |
|
||||
|--------|----------------|-----------------------|----------|
|
||||
| footer | 自定义footer | `{ clear, confirm }` | - |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - |
|
||||
| clear | 点击清空按钮时触发 | - | - |
|
||||
| touchstart | 按下时触发 | `event`| - |
|
||||
| touchend | 按下结束时触发 | `event` | - |
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|-----------|--------------------|-------------------------------------------|----------|
|
||||
| start | 开始签名时触发 | - | - |
|
||||
| end | 结束签名时触发 | - | - |
|
||||
| signing | 签名过程中触发 | `event` | - |
|
||||
| confirm | 点击确定按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - |
|
||||
| clear | 点击清空按钮时触发 | - | - |
|
||||
|
||||
## Methods
|
||||
|
||||
对外暴露函数
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - |
|
||||
| clear | 点击清空按钮时触发 | - | - |
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|-----------|--------------------|-------------------------------------------|----------|
|
||||
| confirm | 点击确认按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | - |
|
||||
| clear | 点击清空按钮时触发 | - | - |
|
||||
|
||||
@ -1,24 +1,19 @@
|
||||
<!--
|
||||
* @Author: 810505339
|
||||
* @Date: 2025-01-10 15:49:26
|
||||
* @LastEditors: 810505339
|
||||
* @LastEditTime: 2025-01-11 22:10:22
|
||||
* @FilePath: \wot-design-uni\src\pages\signature\Index.vue
|
||||
* 记得注释
|
||||
-->
|
||||
<template>
|
||||
<page-wraper>
|
||||
<demo-block title="基础用法">
|
||||
<wd-signature @confirm="confirm" />
|
||||
<wd-img :height="img.height" :width="img.width" :src="img.src" v-if="img.src" />
|
||||
<wd-signature @confirm="confirm" @clear="clear" :export-scale="2" />
|
||||
<wd-img v-if="img.tempFilePath" mode="widthFix" width="100%" :src="img.tempFilePath" />
|
||||
</demo-block>
|
||||
<demo-block title="自定义颜色">
|
||||
<demo-block title="自定义画笔颜色">
|
||||
<wd-signature pen-color="red" />
|
||||
</demo-block>
|
||||
<demo-block title="自定义宽度">
|
||||
<demo-block title="自定义画笔宽度">
|
||||
<wd-signature :line-width="6" />
|
||||
</demo-block>
|
||||
<demo-block title="自定义按钮">
|
||||
<demo-block title="自定义背景颜色">
|
||||
<wd-signature background-color="lightgray" />
|
||||
</demo-block>
|
||||
<demo-block title="自定义插槽">
|
||||
<wd-signature :disabled="disabled">
|
||||
<template #footer="{ clear, confirm }">
|
||||
<wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
|
||||
@ -29,20 +24,23 @@
|
||||
</demo-block>
|
||||
</page-wraper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FileType } from '@/uni_modules/wot-design-uni/components/wd-signature/types'
|
||||
import type { SignatureResult } from '@/uni_modules/wot-design-uni/components/wd-signature/types'
|
||||
import { ref } from 'vue'
|
||||
const img = ref({
|
||||
width: 0,
|
||||
height: 0,
|
||||
src: ''
|
||||
})
|
||||
|
||||
const img = ref<Partial<SignatureResult>>({})
|
||||
|
||||
const disabled = ref(true)
|
||||
function confirm(result: FileType) {
|
||||
img.value.src = result.tempFilePath
|
||||
img.value.height = result.height
|
||||
img.value.width = result.width
|
||||
|
||||
function confirm(result: SignatureResult) {
|
||||
img.value = result
|
||||
}
|
||||
|
||||
function clear() {
|
||||
img.value = {}
|
||||
}
|
||||
|
||||
function changeDisabled() {
|
||||
disabled.value = false
|
||||
}
|
||||
|
||||
@ -958,3 +958,8 @@ $-floating-panel-content-bg: var(--wot-floating-panel-content-bg, $-color-white)
|
||||
$-signature-bg: var(--wot-signature-bg, $-color-white) !default; // 背景色
|
||||
$-signature-radius: var(--wot-signature-radius, 4px) !default; // 圆角
|
||||
$-signature-border: var(--wot-signature-border, 1px solid $-color-gray-5) !default; // 边框圆角
|
||||
$-signature-footer-margin-top: var(--wot-signature-footer-margin-top, 8px) !default; // 底部按钮上边距
|
||||
$-signature-button-margin-left: var(--wot-signature-button-margin-left, 8px) !default; // 底部按钮左边距
|
||||
|
||||
|
||||
|
||||
|
||||
@ -237,9 +237,10 @@ export type RectResultType<T extends boolean> = T extends true ? UniApp.NodeInfo
|
||||
* @param selector 节点选择器 #id,.class
|
||||
* @param all 是否返回所有 selector 对应的节点
|
||||
* @param scope 作用域（支付宝小程序无效）
|
||||
* @param useFields 是否使用 fields 方法获取节点信息
|
||||
* @returns 节点信息或节点信息数组
|
||||
*/
|
||||
export function getRect<T extends boolean>(selector: string, all: T, scope?: any): Promise<RectResultType<T>> {
|
||||
export function getRect<T extends boolean>(selector: string, all: T, scope?: any, useFields?: boolean): Promise<RectResultType<T>> {
|
||||
return new Promise<RectResultType<T>>((resolve, reject) => {
|
||||
let query: UniNamespace.SelectorQuery | null = null
|
||||
if (scope) {
|
||||
@ -247,17 +248,24 @@ export function getRect<T extends boolean>(selector: string, all: T, scope?: any
|
||||
} else {
|
||||
query = uni.createSelectorQuery()
|
||||
}
|
||||
query[all ? 'selectAll' : 'select'](selector)
|
||||
.boundingClientRect((rect) => {
|
||||
if (all && isArray(rect) && rect.length > 0) {
|
||||
resolve(rect as RectResultType<T>)
|
||||
} else if (!all && rect) {
|
||||
resolve(rect as RectResultType<T>)
|
||||
} else {
|
||||
reject(new Error('No nodes found'))
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
|
||||
const method = all ? 'selectAll' : 'select'
|
||||
|
||||
const callback = (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
|
||||
if (all && isArray(rect) && rect.length > 0) {
|
||||
resolve(rect as RectResultType<T>)
|
||||
} else if (!all && rect) {
|
||||
resolve(rect as RectResultType<T>)
|
||||
} else {
|
||||
reject(new Error('No nodes found'))
|
||||
}
|
||||
}
|
||||
|
||||
if (useFields) {
|
||||
query[method](selector).fields({ size: true, node: true }, callback).exec()
|
||||
} else {
|
||||
query[method](selector).boundingClientRect(callback).exec()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -459,7 +467,7 @@ export const pause = (ms: number = 1000 / 30) => {
|
||||
* @returns 深拷贝后的对象副本
|
||||
*/
|
||||
export function deepClone<T>(obj: T, cache: Map<any, any> = new Map()): T {
|
||||
// 如果对象为 null 或者不是对象类型，则直接返回该对象
|
||||
// 如果对象为 null 或或者不是对象类型，则直接返回该对象
|
||||
if (obj === null || typeof obj !== 'object') {
|
||||
return obj
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2024-01-25 23:06:48
|
||||
* @LastEditTime: 2024-01-26 14:00:48
|
||||
* @LastEditTime: 2025-01-16 21:30:14
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\composables\useTranslate.ts
|
||||
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import { camelCase, getPropByPath, isFunction } from '../common/util'
|
||||
|
||||
@ -540,32 +540,28 @@ function handleConfirm() {
|
||||
*/
|
||||
function canvasToImage() {
|
||||
const { fileType, quality, exportScale } = props
|
||||
try {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
width: cutWidth.value * exportScale,
|
||||
height: Math.round(cutHeight.value * exportScale),
|
||||
destWidth: cutWidth.value * exportScale,
|
||||
destHeight: Math.round(cutHeight.value * exportScale),
|
||||
fileType,
|
||||
quality,
|
||||
canvasId: 'wd-img-cropper-canvas',
|
||||
success: (res: any) => {
|
||||
const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
|
||||
// #ifdef MP-DINGTALK
|
||||
result.tempFilePath = res.filePath
|
||||
// #endif
|
||||
emit('confirm', result)
|
||||
},
|
||||
complete: () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
width: cutWidth.value * exportScale,
|
||||
height: Math.round(cutHeight.value * exportScale),
|
||||
destWidth: cutWidth.value * exportScale,
|
||||
destHeight: Math.round(cutHeight.value * exportScale),
|
||||
fileType,
|
||||
quality,
|
||||
canvasId: 'wd-img-cropper-canvas',
|
||||
success: (res: any) => {
|
||||
const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
|
||||
// #ifdef MP-DINGTALK
|
||||
result.tempFilePath = res.filePath
|
||||
// #endif
|
||||
emit('confirm', result)
|
||||
},
|
||||
proxy
|
||||
)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
complete: () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
},
|
||||
proxy
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -2,22 +2,29 @@
|
||||
@import '../common/abstracts/mixin';
|
||||
|
||||
@include b(signature) {
|
||||
@include e(context){
|
||||
@include e(content) {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background: $-signature-bg;
|
||||
border-radius:$-signature-radius;
|
||||
border:$-signature-border;
|
||||
border-radius: $-signature-radius;
|
||||
border: $-signature-border;
|
||||
}
|
||||
@include e(footer)
|
||||
{
|
||||
margin-top: 4px;
|
||||
|
||||
@include e(content-canvas) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include e(footer) {
|
||||
margin-top: $-signature-footer-margin-top;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
& .wd-button + .wd-button{
|
||||
margin-left: 4px;
|
||||
|
||||
:deep(){
|
||||
.wd-button{
|
||||
margin-left: $-signature-button-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,65 +1,115 @@
|
||||
/*
|
||||
* @Author: 810505339
|
||||
* @Date: 2025-01-10 20:03:57
|
||||
* @LastEditors: 810505339
|
||||
* @LastEditTime: 2025-01-11 23:03:44
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-signature\types.ts
|
||||
* @LastEditors: weisheng
|
||||
* @LastEditTime: 2025-01-17 16:43:19
|
||||
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import type { ExtractPropTypes, Prop, PropType } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
|
||||
import { baseProps, numericProp } from '../common/props'
|
||||
|
||||
export const signatureProps = {
|
||||
...baseProps,
|
||||
/**
|
||||
* 签名笔颜色
|
||||
* 类型：string
|
||||
* 默认值：#000
|
||||
*/
|
||||
penColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
/**
|
||||
* 签名笔宽度
|
||||
* 类型：number
|
||||
* 默认值：3
|
||||
*/
|
||||
lineWidth: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
clearText: {
|
||||
type: String,
|
||||
default: '清空'
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认'
|
||||
},
|
||||
/**
|
||||
* 清空按钮的文本
|
||||
* 类型：string
|
||||
*/
|
||||
clearText: String,
|
||||
/**
|
||||
* 确认按钮的文本
|
||||
* 类型：string
|
||||
*/
|
||||
confirmText: String,
|
||||
/**
|
||||
* 目标文件的类型
|
||||
* 类型：string
|
||||
* 默认值：png
|
||||
*/
|
||||
fileType: {
|
||||
type: String,
|
||||
default: 'png'
|
||||
},
|
||||
/**
|
||||
* 目标文件的质量
|
||||
* 类型：number
|
||||
* 默认值：1
|
||||
*/
|
||||
quality: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
/**
|
||||
* 导出图片的缩放比例
|
||||
* 类型：number
|
||||
* 默认值：1
|
||||
*/
|
||||
exportScale: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
/**
|
||||
* 是否禁用签名板
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 画布的高度
|
||||
* 类型：number
|
||||
*/
|
||||
height: numericProp,
|
||||
/**
|
||||
* 画布的宽度
|
||||
* 类型：number
|
||||
*/
|
||||
width: numericProp,
|
||||
/**
|
||||
* 画板的背景色
|
||||
* 类型：string
|
||||
*/
|
||||
backgroundColor: String,
|
||||
/**
|
||||
* 是否禁用画布滚动
|
||||
* 类型：boolean
|
||||
* 默认值：true
|
||||
*/
|
||||
disableScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
export type FileType = {
|
||||
|
||||
export type SignatureResult = {
|
||||
tempFilePath: string
|
||||
success: boolean
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export type SignatureExpose = {
|
||||
/** 点击清除按钮清除签名 */
|
||||
clear: () => void
|
||||
/** 点击确定按钮 */
|
||||
confirm: (result: FileType) => void
|
||||
confirm: (result: SignatureResult) => void
|
||||
}
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
<!--
|
||||
* @Author: 810505339
|
||||
* @Date: 2025-01-10 15:41:12
|
||||
* @LastEditors: 810505339
|
||||
* @LastEditTime: 2025-01-11 22:53:54
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-signature\wd-signature.vue
|
||||
* 记得注释
|
||||
-->
|
||||
<template>
|
||||
<view class="wd-signature">
|
||||
<view class="wd-signature__context">
|
||||
<view class="wd-signature__content" :style="canvasStyle">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<canvas
|
||||
:style="canvasStyle"
|
||||
class="wd-signature__content-canvas"
|
||||
:width="canvasState.canvasWidth"
|
||||
:height="canvasState.canvasHeight"
|
||||
:canvas-id="canvasId"
|
||||
:id="canvasId"
|
||||
:disable-scroll="disableScroll"
|
||||
@touchstart="startDrawing"
|
||||
@touchend="stopDrawing"
|
||||
@touchmove="draw"
|
||||
@ -22,11 +17,12 @@
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<canvas
|
||||
:height="height"
|
||||
:width="width"
|
||||
:style="canvasStyle"
|
||||
class="wd-signature__content-canvas"
|
||||
:canvas-id="canvasId"
|
||||
:width="canvasState.canvasWidth"
|
||||
:height="canvasState.canvasHeight"
|
||||
:id="canvasId"
|
||||
:disable-scroll="disableScroll"
|
||||
@touchstart="startDrawing"
|
||||
@touchend="stopDrawing"
|
||||
@touchmove="draw"
|
||||
@ -35,8 +31,8 @@
|
||||
</view>
|
||||
<view class="wd-signature__footer">
|
||||
<slot name="footer" :clear="clear" :confirm="confirmSignature">
|
||||
<wd-button size="small" plain @click="clear">{{ clearText }}</wd-button>
|
||||
<wd-button size="small" @click="confirmSignature">{{ confirmText }}</wd-button>
|
||||
<wd-button size="small" plain @click="clear">{{ clearText || translate('clearText') }}</wd-button>
|
||||
<wd-button size="small" @click="confirmSignature">{{ confirmText || translate('confirmText') }}</wd-button>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
@ -53,31 +49,32 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, defineExpose } from 'vue'
|
||||
import { addUnit, objToStyle, uuid } from '../common/util'
|
||||
import { signatureProps, type SignatureExpose } from './types'
|
||||
import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
|
||||
import { addUnit, getRect, isDef, objToStyle, uuid } from '../common/util'
|
||||
import { signatureProps, type SignatureExpose, type SignatureResult } from './types'
|
||||
import { useTranslate } from '../composables/useTranslate'
|
||||
// #ifdef MP-WEIXIN
|
||||
import { canvas2dAdapter } from '../common/canvasHelper'
|
||||
// #endif
|
||||
|
||||
const props = defineProps(signatureProps)
|
||||
const emit = defineEmits(['clear', 'confirm', 'touchstart', 'touchend'])
|
||||
const emit = defineEmits(['start', 'end', 'signing', 'confirm', 'clear'])
|
||||
const { translate } = useTranslate('signature')
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
const canvasId = ref<string>(`signature${uuid()}`) // canvas 组件的唯一标识符
|
||||
let canvas: null = null //canvas对象 微信小程序生成图片必须传入
|
||||
let ctx: UniApp.CanvasContext | null = null // canvas上下文
|
||||
const drawing = ref<boolean>(false) // 是否正在绘制
|
||||
const pixelRatio = ref<number>(1) // 像素比
|
||||
const canvasDom = ref({
|
||||
w: 0,
|
||||
h: 0
|
||||
const canvasState = reactive({
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
ctx: null as UniApp.CanvasContext | null // canvas上下文
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.penColor,
|
||||
() => {
|
||||
setLine()
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
@ -85,43 +82,63 @@ watch(
|
||||
() => props.lineWidth,
|
||||
() => {
|
||||
setLine()
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const canvasStyle = computed(() => {
|
||||
const style = {
|
||||
height: addUnit(props.height),
|
||||
width: addUnit(props.width)
|
||||
const style: CSSProperties = {}
|
||||
if (isDef(props.width)) {
|
||||
style.width = addUnit(props.width)
|
||||
}
|
||||
|
||||
if (isDef(props.height)) {
|
||||
style.height = addUnit(props.height)
|
||||
}
|
||||
|
||||
return `${objToStyle(style)};`
|
||||
})
|
||||
|
||||
const disableScroll = computed(() => props.disableScroll)
|
||||
|
||||
/* 开始画线 */
|
||||
const startDrawing = (e: TouchEvent) => {
|
||||
e.preventDefault()
|
||||
drawing.value = true
|
||||
setLine()
|
||||
emit('touchstart', e)
|
||||
emit('start', e)
|
||||
draw(e)
|
||||
}
|
||||
|
||||
/* 结束画线 */
|
||||
const stopDrawing = (e: TouchEvent) => {
|
||||
e.preventDefault()
|
||||
drawing.value = false
|
||||
const { ctx } = canvasState
|
||||
if (ctx) ctx.beginPath()
|
||||
emit('touchend', e)
|
||||
emit('end', e)
|
||||
}
|
||||
|
||||
// 初始化 canvas
|
||||
const initCanvas = () => {
|
||||
getContext()
|
||||
getContext().then(() => {
|
||||
const { ctx } = canvasState
|
||||
if (ctx && isDef(props.backgroundColor)) {
|
||||
ctx.setFillStyle(props.backgroundColor)
|
||||
ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
|
||||
ctx.draw()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 清空 canvas
|
||||
const clear = () => {
|
||||
const { w, h } = canvasDom.value
|
||||
const { canvasWidth, canvasHeight, ctx } = canvasState
|
||||
if (ctx) {
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight)
|
||||
if (isDef(props.backgroundColor)) {
|
||||
ctx.setFillStyle(props.backgroundColor)
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight)
|
||||
}
|
||||
ctx.draw()
|
||||
}
|
||||
emit('clear')
|
||||
@ -134,59 +151,77 @@ const confirmSignature = () => {
|
||||
|
||||
//canvas划线
|
||||
const draw = (e: any) => {
|
||||
if (!drawing.value) return
|
||||
if (props.disabled) return
|
||||
if (!ctx) return
|
||||
e.preventDefault()
|
||||
const { ctx } = canvasState
|
||||
|
||||
if (!drawing.value || props.disabled || !ctx) return
|
||||
const { x, y } = e.touches[0]
|
||||
ctx.lineTo(x, y)
|
||||
ctx.stroke()
|
||||
ctx.draw(true) //是否记住上一次画线
|
||||
ctx.moveTo(x, y)
|
||||
emit('signing', e)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initCanvas()
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
// #ifdef MP
|
||||
pixelRatio.value = uni.getSystemInfoSync().pixelRatio
|
||||
// #endif
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取canvas上下文
|
||||
*/
|
||||
function getContext() {
|
||||
return new Promise<UniApp.CanvasContext>((resolve) => {
|
||||
const { ctx } = canvasState
|
||||
|
||||
if (ctx) {
|
||||
return resolve(ctx)
|
||||
}
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(proxy)
|
||||
.select(`#${canvasId.value}`)
|
||||
.node((res) => {
|
||||
if (res && res.node) {
|
||||
const canvasInstance = res.node
|
||||
// #ifndef MP-WEIXIN
|
||||
ctx = uni.createCanvasContext(canvasId.value, proxy)
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
ctx = canvas2dAdapter(canvasInstance.getContext('2d') as CanvasRenderingContext2D)
|
||||
canvasInstance.width = props.width * pixelRatio.value
|
||||
canvasInstance.height = props.height * pixelRatio.value
|
||||
ctx.scale(pixelRatio.value, pixelRatio.value)
|
||||
// #endif
|
||||
canvas = canvasInstance
|
||||
canvasDom.value = {
|
||||
w: canvasInstance.width,
|
||||
h: canvasInstance.height
|
||||
}
|
||||
resolve(ctx)
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
// #ifndef MP-WEIXIN
|
||||
getRect(`#${canvasId.value}`, false, proxy).then((canvasRect) => {
|
||||
setcanvasState(canvasRect.width!, canvasRect.height!)
|
||||
canvasState.ctx = uni.createCanvasContext(canvasId.value, proxy)
|
||||
if (canvasState.ctx) {
|
||||
canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
|
||||
}
|
||||
resolve(canvasState.ctx)
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
getRect(`#${canvasId.value}`, false, proxy, true).then((canvasRect: any) => {
|
||||
if (canvasRect && canvasRect.node) {
|
||||
const canvasInstance = canvasRect.node
|
||||
canvasState.ctx = canvas2dAdapter(canvasInstance.getContext('2d') as CanvasRenderingContext2D)
|
||||
canvasInstance.width = canvasRect.width * pixelRatio.value
|
||||
canvasInstance.height = canvasRect.height * pixelRatio.value
|
||||
canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
|
||||
canvas = canvasInstance
|
||||
setcanvasState(canvasRect.width, canvasRect.height)
|
||||
resolve(canvasState.ctx)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置 canvasState
|
||||
*/
|
||||
function setcanvasState(width: number, height: number) {
|
||||
canvasState.canvasHeight = height * pixelRatio.value
|
||||
canvasState.canvasWidth = width * pixelRatio.value
|
||||
}
|
||||
|
||||
/* 设置线段 */
|
||||
function setLine() {
|
||||
const { ctx } = canvasState
|
||||
if (ctx) {
|
||||
ctx.setLineWidth(props.lineWidth)
|
||||
ctx.setStrokeStyle(props.penColor)
|
||||
@ -194,39 +229,47 @@ function setLine() {
|
||||
ctx.setLineCap('round')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* canvas 绘制图片输出成文件类型
|
||||
*/
|
||||
function canvasToImage() {
|
||||
const { fileType, quality, exportScale } = props
|
||||
const { w, h } = canvasDom.value
|
||||
try {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
width: w * exportScale,
|
||||
height: h * exportScale,
|
||||
destWidth: w * exportScale,
|
||||
destHeight: h * exportScale,
|
||||
fileType,
|
||||
quality,
|
||||
canvasId: canvasId.value,
|
||||
canvas: canvas,
|
||||
success: (res: any) => {
|
||||
const result = { tempFilePath: res.tempFilePath, width: (w * exportScale) / pixelRatio.value, height: (h * exportScale) / pixelRatio.value }
|
||||
// #ifdef MP-DINGTALK
|
||||
result.tempFilePath = res.filePath
|
||||
// #endif
|
||||
emit('confirm', result)
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error(error)
|
||||
const { canvasWidth, canvasHeight } = canvasState
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
width: canvasWidth * exportScale,
|
||||
height: canvasHeight * exportScale,
|
||||
destWidth: canvasWidth * exportScale,
|
||||
destHeight: canvasHeight * exportScale,
|
||||
fileType,
|
||||
quality,
|
||||
canvasId: canvasId.value,
|
||||
canvas: canvas,
|
||||
success: (res) => {
|
||||
const result: SignatureResult = {
|
||||
tempFilePath: res.tempFilePath,
|
||||
width: (canvasWidth * exportScale) / pixelRatio.value,
|
||||
height: (canvasHeight * exportScale) / pixelRatio.value,
|
||||
success: true
|
||||
}
|
||||
// #ifdef MP-DINGTALK
|
||||
result.tempFilePath = (res as any).filePath
|
||||
// #endif
|
||||
emit('confirm', result)
|
||||
},
|
||||
proxy
|
||||
)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
fail: () => {
|
||||
const result: SignatureResult = {
|
||||
tempFilePath: '',
|
||||
width: (canvasWidth * exportScale) / pixelRatio.value,
|
||||
height: (canvasHeight * exportScale) / pixelRatio.value,
|
||||
success: false
|
||||
}
|
||||
emit('confirm', result)
|
||||
}
|
||||
},
|
||||
proxy
|
||||
)
|
||||
}
|
||||
|
||||
defineExpose<SignatureExpose>({
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-04-05 21:32:56
|
||||
* @LastEditTime: 2024-04-01 20:40:34
|
||||
* @LastEditTime: 2025-01-16 21:43:47
|
||||
* @LastEditors: weisheng
|
||||
* @Description: 水印组件
|
||||
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref, watch, nextTick } from 'vue'
|
||||
import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
|
||||
import { addUnit, buildUrlWithParams, isBase64Image, objToStyle, uuid } from '../common/util'
|
||||
import { watermarkProps } from './types'
|
||||
|
||||
@ -68,7 +68,7 @@ const rootClass = computed(() => {
|
||||
* 水印样式
|
||||
*/
|
||||
const rootStyle = computed(() => {
|
||||
const style: Record<string, string | number> = {
|
||||
const style: CSSProperties = {
|
||||
opacity: props.opacity,
|
||||
backgroundSize: addUnit(props.width + props.gutterX)
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'فهرس'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'تأكيد',
|
||||
clearText: 'مسح'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'Index'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'Bestätigen',
|
||||
clearText: 'Löschen'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'index'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'OK',
|
||||
clearText: 'Clear'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'Índice'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'Confirmar',
|
||||
clearText: 'Limpiar'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'Indice'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'Signer',
|
||||
clearText: 'Effacer'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: '索引'
|
||||
},
|
||||
signature: {
|
||||
confirmText: '確認',
|
||||
clearText: 'クリア'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: '인덱스'
|
||||
},
|
||||
signature: {
|
||||
confirmText: '확인',
|
||||
clearText: '지우기'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'Número'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'Concluir',
|
||||
clearText: 'Limpar'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: '№'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'Подтвердить',
|
||||
clearText: 'Очистить'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'หมายเลขซีเรียล'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'ยืนยัน',
|
||||
clearText: 'ล้าง'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: 'Sıra No'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'İmzala',
|
||||
clearText: 'Temizle'
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,5 +64,9 @@ export default {
|
||||
textarea: { placeholder: 'Vui lòng nhập...' },
|
||||
tableCol: {
|
||||
indexLabel: 'Số sê-ri'
|
||||
},
|
||||
signature: {
|
||||
confirmText: 'Xác nhận',
|
||||
clearText: 'Xóa'
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,5 +123,9 @@ export default {
|
||||
},
|
||||
tableCol: {
|
||||
indexLabel: '序号'
|
||||
},
|
||||
signature: {
|
||||
confirmText: '确认',
|
||||
clearText: '清空'
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,5 +57,9 @@ export default {
|
||||
textarea: { placeholder: '請輸入...' },
|
||||
tableCol: {
|
||||
indexLabel: '序號'
|
||||
},
|
||||
signature: {
|
||||
confirmText: '確認',
|
||||
clearText: '清空'
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,5 +57,9 @@ export default {
|
||||
textarea: { placeholder: '請輸入...' },
|
||||
tableCol: {
|
||||
indexLabel: '序號'
|
||||
},
|
||||
signature: {
|
||||
confirmText: '確認',
|
||||
clearText: '清空'
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user