页面水印 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>