uni-app 遮罩模板
1. common新建mask.vue文件。
<template>
<view>
<view class="cpt-mask">
</view>
</view>
</template> <script>
export default { }
</script> <style>
.cpt-mask {
position: fixed;
top: ;
left: ;
width: %;
height: %;
background-color: #;
opacity: 0.5;
z-index: ;
}
</style>
2. 引入mask.vue文件。
<template>
<view>
<!-- 关闭遮罩 -->
<view @click="remove(1)">
<!-- 遮罩组件 -->
<Mask v-if="mask"></Mask>
</view>
<view class="masks">
<button type="primary" @click="remove(2)">显示遮罩</button>
</view>
</view>
</template>
<script>
import Mask from '../../common/mask.vue';
export default {
components: {
Mask
},
data() {
return {
mask: false
}
},
methods: {
remove (val) {
val == ? this.mask = false : this.mask = true;
}
}
}
</script> <style lang="less">
page {
background: #f8f8f8;
}
.masks {
position: absolute;
bottom: ;left: %-100rpx;right: %-100rpx;
}
</style>
uni-app 遮罩模板的更多相关文章
- 拼图类APP原型模板分享——简拼
简拼是一款记录美好.抒写情怀的拼图APP,模板设计风格简约文艺,种类齐全. 此原型模板所用到的组件有标签组.水平分隔线.圆形工具.交互动作有结合标签组实现页面跳转,选择组件触发按钮状态变化等. 此原型 ...
- Web移动端商城 移动端商城手机网站html整套模板,web移动商城仿app手机模板下载
--Web移动端商城移动端商城手机网站html整套模板,web移动商城仿app手机模板下载.原生的js和jquery-1.6.2.min.js,页面才有html5自适应.包括首页(轮播,导航).兼职( ...
- 基于vuecli3构建一个快速开发h5 APP的模板
基于vuecli3构建的一个快速开发h5 APP的模板,集成了高德地图.mint-ui,以及antv-f2可视化框架 vue-cli3安装 查看vue cli版本 vue --version 要求no ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
- django系列7:修改404页面展示,优化模板,降低urlconf和模板之间的耦合,命名app将模板和app绑定
为了增加程序的友好和健壮性,修改view代码,处理以下如果出现404,页面的UI展示. 修改view代码 from django.http import Http404 from django.sho ...
- 旅游类的APP原型模板分享——Priceline
Priceline是一款旅游服务的APP应用.功能有查找预订酒店.车票.机票等服务. 本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 先简单看看动图: 点击这里,可 ...
- 社交类APP原型模板分享——QQ
QQ是一款社交类的APP应用——聊天软件,支持多人群聊以及丰富有趣的娱乐功能. 此模板交互效果很丰富,主要有抽屉侧拉效果,滚动内容界面.标签组切换.选择组件触发按钮状态变化.点击下拉展开列表.点击弹出 ...
- 旅游类APP原型模板分享——爱彼迎
这是一款专为游客提供全球范围内短租服务的APP,可以让你不论出门在外或在家附近都能开展探索之旅,并且还可以获取世界各地独特房源.当地体验及好去处等相关信息. 这款APP层级清晰简明,此原型模板所用到的 ...
- 社交类APP原型模板分享——Tinder
Tinder是国外的一款手机交友APP,作用是基于用户的地理位置,每天“推荐”一定距离内的四个对象,根据用户在 Facebook 上面的共同好友数量.共同兴趣和关系网给出评分,得分最高的推荐对象优先展 ...
随机推荐
- Service层在MVC框架中的意义和职责
https://blog.csdn.net/u012562943/article/details/53462157 mvc框架由model,view,controller组成,执行流程一般是:在con ...
- 概念--Maven仓库
转:Maven:mirror和repository 区别 Tip: 默认中央仓库的地址:https://repo.maven.apache.org/maven2 1.Maven仓库主要有2种 remo ...
- python标准库-array 模块
原文地址:http://www.bugingcode.com/blog/python_module_array.html array 模块是python中实现的一种高效的数组存储类型.它和list相似 ...
- [洛谷P4556] 雨天的尾巴
这道题可以用线段树合并做,网上的题解基本上都是线段树合并的. 但是为什么我就偏偏要用dsu on tree...... 题目传送门 dsu on tree的方法类似[CF1009F] Dominant ...
- python返回值进行unpack
最近在写yolov3,因为yolov3的多输出性质,所以我打算写适配多输出的工具函数,在numpy中可以在一个array中包含多个不同维度的array,但在tensorflow中一个tensor只能保 ...
- 从一道网易面试题浅谈 Tagged Pointer - darcy_tang 的博客
前言 这篇博客九月就想写了,因为赶项目拖了到现在,抓住17年尾巴写吧~ 正文 上次看了一篇 <从一道网易面试题浅谈OC线程安全> 的博客,主要内容是: 作者去网易面试,面试官出了一道面试题 ...
- MySQL树形结构的数据库表设计和查询
1.邻接表(Adjacency List) 实例:现在有一个要存储一下公司的人员结构,大致层次结构如下: 那么怎么存储这个结构?并且要获取以下信息: 1.查询小天的直接上司. 2.查询老宋管理下的直属 ...
- python爬虫之数据加密解密
一.什么叫数据加密 数据加密是指利用加密算法和秘钥将明文转变为密文的过程. 二.数据加密的方式 1.单向加密 指只能加密数据而不能解密数据,这种加密方式主要是为了保证数据的完整性,常见的加密算法有MD ...
- Ubuntu 18.04 国内的 apt 源
一.Ubuntu 18.04 国内的 apt 源 1. 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted univers ...
- Samtec与Neoconix达成合作并和II-VI推出新产品
序言:Samtec近日动作不断, 近日Samtec与Neoconix达成合作并和II-VI推出新产品,以下是详细内容. Samtec与Neoconix签订Neoconix PCBeam 技术授权协议, ...