如何实现uniapp界面中添加个性化水印效果？

本文共计423个文字，预计阅读时间需要2分钟。

目录- 正文字符- 界面引入组件- 实现思路- 实现代码- 正文字符- 界面引入组件- templateView- Ywatermark- :info=这里是要显示水印内容- Ywatermark- /view- /templateScript- import Ywatermark from '@components/Ywatermark/Ywatermark'- // 引入组件

目录

• 正文
• 界面引入组件
• 实现思路
• 实现代码

正文

界面引入组件

<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界面新增水印的资料请关注自由互联其它相关文章！