youxi-app/pages/demo/other/sign.uvue

<template>
	<cl-page>
		<cl-sign ref="signRef" :height="height" :enable-brush="isBrush"></cl-sign>

		<view class="p-3">
			<cl-list>
				<cl-list-item label="操作">
					<cl-button type="info" @click="clear">清空</cl-button>
					<cl-button @click="preview">预览</cl-button>
				</cl-list-item>

				<cl-list-item label="大屏">
					<cl-switch v-model="isFullscreen"></cl-switch>
				</cl-list-item>

				<cl-list-item label="毛笔效果">
					<cl-switch v-model="isBrush"></cl-switch>
				</cl-list-item>
			</cl-list>
		</view>
	</cl-page>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const height = computed(() => {
	return isFullscreen.value ? uni.getWindowInfo().windowHeight - 200 : 200;
});

const isFullscreen = ref(false);
const isBrush = ref(true);
const signRef = ref<ClSignComponentPublicInstance | null>(null);

function clear() {
	signRef.value!.clear();
}

function preview() {
	signRef.value!.toPng().then((url) => {
		uni.previewImage({
			urls: [url]
		});
	});
}
</script>