Skip to content
On this page

组件库文档 tmui.design

页面水印 Watermark

给页面加个水印,或给组件加个水印。[此组件,作者还未审核修改,目前权支持h5和web端,其它端待我有时间来适配下。]


🌶️ 页面水印 Watermark 示例

查看模拟效果
示例模板
vue
<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>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️

🌱 参数

参数名类型默认值描述
contentstringundefined水印文本
crossbooleanfalse是否跨越边界显示
debugbooleanfalse是否显示调试信息
font-sizenumber14字体大小
font-familystringundefined字体族
font-style'normal''italic' / 'oblique ${number}deg'normal
font-variantstring''字型
font-weightnumber400字重
font-colorstringrgba(128, 128, 128, .3)字体颜色
fullscreenbooleanfalse是否展示全屏
line-heightnumber14行高
heightnumber32高度
imagestringundefined图片路径
image-heightnumberundefined图片高度
image-opacitynumber1图片不透明度
image-widthnumberundefined图片宽度
rotatenumber0旋转角度
selectablebooleantrue被水印覆盖的内容是否可选中
widthnumber32宽度
x-gapnumber0x 轴间隔
x-offsetnumber0x 轴偏移
y-gapnumber0y 轴间隔
y-offsetnumber0y 轴偏移
z-indexnumber10z 轴高度

🌽 slot插槽

默认default

🥗 ref方法

方法名参数返回值描述

😡 贡献者:小超1263375375