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

<template>
	<cl-page>
		<cl-sign
			ref="signRef"
			:height="isFullscreen ? windowHeight - 200 : 200"
			: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 { ref } from "vue";

const { windowHeight } = uni.getWindowInfo();

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>