uniapp界面新增水印实现示例详解
更新时间:2023年07月10日 14:06:24 作者:小李不小
这篇文章主要为大家介绍了uniapp界面新增水印实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
界面引入组件
<templeate> <view> <Ywatermark :info="'这里是水印内容'"></Ywatermark> </view> </tempate> <script> import Ywatermark from '@/components/Ywatermark/Ywatermark' //引入组件 export default { data() {} }, components:{ Ywatermark //注册组件 } </script>
实现思路
首先需要一个透明蒙版盖住页面,然后将水印信息循环展示出来,展示完成后将蒙版旋转倾斜,然后为了让水印不影响下层页面功能的正常使用,需要使用pointer-events: none;属性让事件穿透到下面去
实现代码
<template> <view class="make"> <view class="list"> <view class="item" v-for="i in 500"> <text>{{info}}</text> </view> </view> </view> </template> <script> export default { name: "watermark", props: { info: { type: String, default: '全局水印' } }, data() { return { }; } } </script> <style lang="scss" scoped> .make { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; background: rgba(0, 0, 0, 0); pointer-events: none; .list { width: 500%; height: 400%; position: absolute; top: -50%; left: -50%; transform: rotate(-45deg); display: flex; flex-wrap: wrap; justify-content: space-between; pointer-events: none; .item { font-size: 28px; color: rgba(220, 220, 220, 0.3); font-weight: bold; padding: 30rpx; pointer-events: none; } } } </style>
以上就是uniapp界面新增水印实现示例的详细内容,更多关于uniapp界面新增水印的资料请关注脚本之家其它相关文章!
相关文章
仿google adsense颜色选择器代码,从中易广告联盟程序提取
仿google adsense颜色选择器代码,从中易广告联盟程序提取...2007-11-11
最新评论