iview modal 弹框 模板

<!--
* @description 上传图片
* @fileName camera.vue
* @author 彭成刚
* @date // ::
* @version V1.0.0
!-->
<template>
<div>
<Modal @on-cancel="modalCancel"
class="uploadPhoto"
v-model="modalVmodel"
width=""
:mask-closable="false"
title="上传图片">
<div class='divFormClass'> </div> <div slot="footer">
<Button @click="modalCancel">关闭</Button> <Button type="primary"
@click="modalSave">保存</Button> </div>
</Modal>
</div>
</template> <script>
export default {
data () {
return {
modalVmodel: false
}
}, components: {}, computed: {}, mounted () {
this.modalVmodel = true
}, methods: {
modalCancel () {
this.modalVmodel = false
},
modalSave () { }
}
} </script>
<style lang='less' scoped>
.uploadPhoto {
.divFormClass {
height: calc(~"100vh - 350px");
overflow-y: auto;
padding-right: 15px;
}
}
</style>

iview modal 弹框 模板的更多相关文章

  1. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  2. 关于微信小程序 modal弹框组件的介绍

    微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

  3. vue iview modal弹出框 form表单验证

    一.ref="addApply" :model="addApply" :rules="ruleValidate"   不要忘记prop 二. ...

  4. 网页全屏,modal 弹框无法显示的问题

    问题描述页面主体部分全屏后,页面中的所有弹窗不能显示,退出全屏后,弹窗正常.解决方法校园项目中,所有用到的弹窗为iview的弹窗组件,该弹窗组件会生成在body中,和项目主体app为平行关系,项目主体 ...

  5. vue 弹框

    弹框展示: 代码: <template> <div> <el-col :span="9" style="text-align: right; ...

  6. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

  7. 微信小程序之----弹框组件modal

    modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 ...

  8. 常用UI模板,loading框,提醒框,弹框确认框

    css部分 #public_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(0,0 ...

  9. 弹框modal, 获取id与绑定id

    var span2 = '<span class="replaceBlue cursor" data-target="#myModalMember" da ...

随机推荐

  1. 哈希表的C实现(一)

    哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.具体的介绍网上有很详 ...

  2. Video.js事件

    Home 膘叔 » Archives 文章: 备份一个video的JS [打印] 分类: Javascript 作者: gouki 2012-02-16 17:58 备份一个JS,不是为了代码很优秀, ...

  3. Laravel配置nginx环境

    前言: 之前坑的!一直在尝试配置,但都失败了,只能用着apache,但是最近想整合swoole到laravel,无奈当前测试服务器是nginx,我只能再尝试在nginx上搭laravel环境 方法如下 ...

  4. HDU-5538 House Building

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Submissio ...

  5. finalize方法的作用

            finalize是在对象回收前做一些清扫工作,以及可清理栈上的内存,比如调用本地方法可能在栈上创建对象.即使对象不可达,也并不是非死不可,还是可以抢救一下,当一个对象没有与GCroot ...

  6. 任务13:在Core Mvc中使用Options

    13 新建Controllers文件夹,在里面添加HomeController控制器 新建Views文件夹,再新建Home文件夹.再新建Index.cshtml的视图页面 注释上节课的代码,否则我们的 ...

  7. 【WEB基础】HTML & CSS 基础入门(4)列表及其样式

    前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...

  8. 洛谷 - P2805 - 植物大战僵尸 - 最大流 - 最大权闭合子图

    https://www.luogu.org/problemnew/show/P2805 最大权闭合子图的特点是,假如你要选一个结点,则要先选中它的所有子节点.正权连S负权连T,容量为绝对值,原图有向边 ...

  9. 你真的懂了redis的数据结构吗?redis内部数据结构和外部数据结构揭秘

    原文链接:https://mp.weixin.qq.com/s/hKpAxPE-9HJgV6GEdV4WoA Redis有哪些数据结构? 字符串String.字典Hash.列表List.集合Set.有 ...

  10. 鸟哥私房菜基础篇:Linux 的档案权限与目录配置习题

    猫宁!!! 参考链接:http://linux.vbird.org/linux_basic/0210filepermission.php 鸟哥是为中国信息技术发展做出巨大贡献的人. 1-早期的 Uni ...