页面水印 Watermark ​

<template>
	<tm-app>
		<tm-sheet :followDark="false">
			<tm-text _class="text-weight-b" label="页面水印"></tm-text>
			<tm-text :font-size="24" label="简单点，满足就好"></tm-text>
		</tm-sheet>
		<tm-watermark
			selectable
			:font-size="opts.fontSize"
			:line-height="opts.lineHeight"
			:fullscreen="opts.fullscreen"
			:width="opts.width"
			:height="opts.height"
			:x-offset="opts.xOffset"
			:y-offset="opts.yOffset"
			:x-gap="opts.xGap"
			:y-gap="opts.yGap"
			:rotate="opts.rotate"
			:content="opts.content"
			:image="opts.image"
			:image-width="opts.imageWidth"
			:image-height="opts.imageHeight"
			:image-opacity="opts.imageOpacity"
		>
			<tm-sheet>
				<view class="flex flex-row flex-row-bottom-start">
					<tm-text label="属性设置"></tm-text>
					<tm-text :font-size="22" _class="ml-10" label="(实时生效)"></tm-text>
				</view>
				<tm-divider></tm-divider>
				<tm-radio-group v-model="opts.fullscreen" :defaultValue="false">
					<tm-radio :value="true" label="全屏幕"></tm-radio>
					<tm-radio :value="false" label="包围内"></tm-radio>
				</tm-radio-group>
				<tm-divider></tm-divider>
				<tm-input prefixLabel="文本内容" align="right" placeholder="请输入文本" v-model="opts.content"></tm-input>
				<tm-input
					:margin="[0, 24]"
					prefixLabel="字体大小"
					align="right"
					placeholder="请输入字号"
					v-model.number="opts.fontSize"
					type="number"
				></tm-input>
				<tm-input prefixLabel="字体行高" align="right" placeholder="请输入行高" v-model.number="opts.lineHeight" type="number"></tm-input>
				<tm-input
					:margin="[0, 24]"
					prefixLabel="旋转角度"
					align="right"
					placeholder="请输入旋转角度"
					v-model.number="opts.rotate"
					type="number"
				></tm-input>
				<tm-input prefixLabel="宽度" align="right" placeholder="请输入宽度" v-model.number="opts.width" type="number"></tm-input>
				<tm-input
					:margin="[0, 24]"
					prefixLabel="高度"
					align="right"
					placeholder="请输入高度"
					v-model.number="opts.height"
					type="number"
				></tm-input>
				<tm-input prefixLabel="x 轴间隔" align="right" placeholder="请输入x 轴间隔" v-model.number="opts.xGap" type="number"></tm-input>
				<tm-input
					:margin="[0, 24]"
					prefixLabel="y 轴间隔"
					align="right"
					placeholder="请输入y 轴间隔"
					v-model.number="opts.yGap"
					type="number"
				></tm-input>
				<tm-input prefixLabel="x 轴偏移" align="right" placeholder="请输入x 轴偏移" v-model.number="opts.xOffset" type="number"></tm-input>
				<tm-input
					:margin="[0, 24]"
					prefixLabel="y 轴偏移"
					align="right"
					placeholder="请输入y 轴偏移"
					v-model.number="opts.yOffset"
					type="number"
				></tm-input>
				<tm-upload
					:width="636"
					@change="handleUpload"
					:rows="1"
					:maxFile="1"
					url="https://mockapi.eolink.com/tNYKNA7ac71aa90bcbe83c5815871a5b419601e96a5524d/upload"
				></tm-upload>
				<tm-input
					:margin="[0, 24]"
					prefixLabel="图片宽度"
					align="right"
					placeholder="请输入图片宽度"
					v-model.number="opts.imageWidth"
					type="number"
				></tm-input>
				<tm-input
					prefixLabel="图片高度"
					align="right"
					placeholder="请输入图片高度"
					v-model.number="opts.imageHeight"
					type="number"
				></tm-input>
				<tm-input
					:margin="[0, 24]"
					prefixLabel="图片透明度"
					align="right"
					placeholder="请输入图片透明度"
					v-model.number="opts.imageOpacity"
					type="number"
				></tm-input>
			</tm-sheet>
		</tm-watermark>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TmWatermark from '../../tmui/components/tm-watermark/tm-watermark.vue'
import TmSheet from '../../tmui/components/tm-sheet/tm-sheet.vue'
import TmText from '../../tmui/components/tm-text/tm-text.vue'
import TmDivider from '../../tmui/components/tm-divider/tm-divider.vue'
import TmRadio from '../../tmui/components/tm-radio/tm-radio.vue'
import TmRadioGroup from '../../tmui/components/tm-radio-group/tm-radio-group.vue'
import TmInput from '../../tmui/components/tm-input/tm-input.vue'
import TmApp from '../../tmui/components/tm-app/tm-app.vue'
import TmUpload from '../../tmui/components/tm-upload/tm-upload.vue'

const opts = ref({
	content: 'TMUI',
	fontSize: 12,
	lineHeight: 12,
	fullscreen: false,
	width: 60,
	height: 60,
	xGap: 0,
	yGap: 0,
	xOffset: 14,
	yOffset: 30,
	rotate: -20,
	image: '',
	imageOpacity: 0.24,
	imageWidth: 60,
	imageHeight: 60
})
function handleUpload(res) {
	opts.value.image = res[0].url
}
</script>