feat(signature): support tips slot (#13385)
This commit is contained in:
@@ -99,6 +99,12 @@ Use `background-color` prop to set the color of the background.
|
|||||||
| submit | Emitted when clicking the confirm button | _data: { image: string; canvas: HTMLCanvasElement }_ |
|
| submit | Emitted when clicking the confirm button | _data: { image: string; canvas: HTMLCanvasElement }_ |
|
||||||
| clear | Emitted when clicking the cancel button | - |
|
| clear | Emitted when clicking the cancel button | - |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
| Name | Description | SlotProps |
|
||||||
|
| ---- | ----------- | --------- |
|
||||||
|
| tips | Custom tips | - |
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Signature instance and call instance methods.
|
Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Signature instance and call instance methods.
|
||||||
|
|||||||
@@ -99,6 +99,12 @@ export default {
|
|||||||
| submit | 点击确定按钮时触发 | _data: { image: string; canvas: HTMLCanvasElement }_ |
|
| submit | 点击确定按钮时触发 | _data: { image: string; canvas: HTMLCanvasElement }_ |
|
||||||
| clear | 点击取消按钮时触发 | - |
|
| clear | 点击取消按钮时触发 | - |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
| 名称 | 说明 | 参数 |
|
||||||
|
| ---- | -------------- | ---- |
|
||||||
|
| tips | 自定义提示文案 | - |
|
||||||
|
|
||||||
### 方法
|
### 方法
|
||||||
|
|
||||||
通过 ref 可以获取到 Signature 实例并调用实例方法,详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
|
通过 ref 可以获取到 Signature 实例并调用实例方法,详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
emits: ['submit', 'clear', 'start', 'end', 'signing'],
|
emits: ['submit', 'clear', 'start', 'end', 'signing'],
|
||||||
|
|
||||||
setup(props, { emit }) {
|
setup(props, { emit, slots }) {
|
||||||
const canvasRef = ref<HTMLCanvasElement>();
|
const canvasRef = ref<HTMLCanvasElement>();
|
||||||
const wrapRef = ref<HTMLElement>();
|
const wrapRef = ref<HTMLElement>();
|
||||||
const ctx = computed(() => {
|
const ctx = computed(() => {
|
||||||
@@ -195,6 +195,8 @@ export default defineComponent({
|
|||||||
onTouchmove={touchMove}
|
onTouchmove={touchMove}
|
||||||
onTouchend={touchEnd}
|
onTouchend={touchEnd}
|
||||||
/>
|
/>
|
||||||
|
) : slots.tips ? (
|
||||||
|
slots.tips()
|
||||||
) : (
|
) : (
|
||||||
<p>{props.tips}</p>
|
<p>{props.tips}</p>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user