电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

uniapp界面新增水印實現(xiàn)示例詳解

瀏覽:6日期:2022-06-13 11:54:11
目錄正文界面引入組件實現(xiàn)思路實現(xiàn)代碼正文

界面引入組件<templeate><view> <Ywatermark :info=''這里是水印內容''></Ywatermark></view></tempate><script>import Ywatermark from '@/components/Ywatermark/Ywatermark' //引入組件 export default { data() {}}, components:{ Ywatermark //注冊組件 }</script>實現(xiàn)思路

首先需要一個透明蒙版蓋住頁面,然后將水印信息循環(huán)展示出來,展示完成后將蒙版旋轉傾斜,然后為了讓水印不影響下層頁面功能的正常使用,需要使用pointer-events: none;屬性讓事件穿透到下面去

實現(xiàn)代碼<template> <view class='make'><view class='list'> <view 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界面新增水印實現(xiàn)示例的詳細內容,更多關于uniapp界面新增水印的資料請關注好吧啦網(wǎng)其它相關文章!

標簽: JavaScript
主站蜘蛛池模板: 长沙网站建设制作「网站优化推广」-网页设计公司-速马科技官网 | 企业微信营销_企业微信服务商_私域流量运营_艾客SCRM官网 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 黑龙江京科脑康医院-哈尔滨精神病医院哪家好_哈尔滨精神科医院排名_黑龙江精神心理病专科医院 | 模切之家-专注服务模切行业的B2B平台! | 深圳展厅设计_企业展馆设计_展厅设计公司_数字展厅设计_深圳百艺堂 | 泰安塞纳春天装饰公司【网站】| 烟台游艇培训,威海游艇培训-烟台市邮轮游艇行业协会 | 济南品牌设计-济南品牌策划-即合品牌策划设计-山东即合官网 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 档案密集柜_手动密集柜_智能密集柜_内蒙古档案密集柜-盛隆柜业内蒙古密集柜直销中心 | BAUER减速机|ROSSI-MERSEN熔断器-APTECH调压阀-上海爱泽工业设备有限公司 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 自动检重秤-动态称重机-重量分选秤-苏州金钻称重设备系统开发有限公司 | 中山市派格家具有限公司【官网】 | 智能终端_RTU_dcm_北斗星空自动化科技| 防爆正压柜厂家_防爆配电箱_防爆控制箱_防爆空调_-盛通防爆 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 | 钢绞线万能材料试验机-全自动恒应力两用机-混凝土恒应力压力试验机-北京科达京威科技发展有限公司 | 自清洗过滤器_全自动过滤器_全自动反冲洗过滤器_量子过滤器-滑漮滴 | 合肥礼品公司-合肥礼品定制-商务礼品定制公司-安徽柏榽商贸有限公司 | 【孔氏陶粒】建筑回填陶粒-南京/合肥/武汉/郑州/重庆/成都/杭州陶粒厂家 | 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 棉服定制/厂家/公司_棉袄订做/价格/费用-北京圣达信棉服 | 硬度计_影像测量仪_维氏硬度计_佛山市精测计量仪器设备有限公司厂家 | 北京康百特科技有限公司-分子蒸馏-短程分子蒸馏设备-实验室分子蒸馏设备 | 有机废气处理-rto焚烧炉-催化燃烧设备-VOC冷凝回收装置-三梯环境 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 全自动五线打端沾锡机,全自动裁线剥皮双头沾锡机,全自动尼龙扎带机-东莞市海文能机械设备有限公司 | 昆明挖掘机修理厂_挖掘机翻新再制造-昆明聚力工程机械维修有限公司 | 智能楼宇-楼宇自控系统-楼宇智能化-楼宇自动化-三水智能化 | 纸塑分离机-纸塑分离清洗机设备-压力筛-碎浆机厂家金双联环保 | 非甲烷总烃分析仪|环控百科| 大型果蔬切片机-水果冬瓜削皮机-洗菜机切菜机-肇庆市凤翔餐饮设备有限公司 | 东莞注册公司-代办营业执照-东莞公司注册代理记账-极刻财税 | 旋转滴界面张力仪(张力测定仪器)-百科| 深圳办公室装修-写字楼装修设计-深圳标榜装饰公司 | 钢丝绳探伤仪-钢丝绳检测仪-钢丝绳探伤设备-洛阳泰斯特探伤技术有限公司 |