【从0开始vue】点击后弹出对话框（其他部分变灰度） + 导航栏之间的切换动画

从什么都不会到按照自己的意思开始瞎几把搜

1、相关网址这些都没啥用。。多少给点启发吧

网址https://segmentfault.com/q/1010000016889624
https://segmentfault.com/q/1010000011476017?sort=created#answers-title
https://segmentfault.com/q/1010000009287430
https://segmentfault.com/q/1010000011476017

2、继续找

opacity:0.5;
IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。2/

简单发现这三个还是可以的: 但是会吧router-view里面的内容一起给灰度掉

this.$router.push('/contact/confirm_float')

window.document.body.style.backgroundColor="black"

window.document.body.style.opacity="0.5"

这两行我先给删了 qaq 可以用的就是非常鸡肋 qaq

啊啊啊啊... qaq

而且好像也不能取消 qaq

而且qaq 好像【body是改的全体的body 所以。。。会有问题】

3、

这个用vue里面的modal 试试

这个教程里面写到了插槽 qaq

https://cn.vuejs.org/v2/guide/components-slots.html

但是我看不太懂qvq

就自己瞎看还是这个网址

所提供的内容将会替换 <slot> 标记。

为了保证 <slot> 对应的区域有我们想要的类名，最好用一个容器将每个 <slot> 包裹起来。

http://ju.outofmemory.cn/entry/341866

好的好的，这个基本可以实现蒙版效果了。

关闭按钮自己也做好了。

props 和 slot的数据

总之用好了会很省事的要认真学习i

@close 这个方法还没写

直接写个

@click="$router.back(-1)"

就可以了！！！

关闭框写的是 this.$emit('close');

我不知道为啥没用。。。单解决了qaq

4、

这里还可以继续加一个transition 很棒！！渐入渐出的效果。在上面那个列表里都可以直接看到~

原来这个是css3 的新特性

我们再来看看其他：

在这里！https://cn.vuejs.org/v2/guide/transitions.html

这个是官方，还有 https://www.cnblogs.com/ccyinghua/p/7872694.html

但是，我的这里进入不行，退出有动画

查询了一下，可能是因为，路由，这边只有，v-if v-show 动态组件根元素有效。

如果是动态传值鼠标点击的进入也可以但大概显然我。。。

还有那就直接用二级路由做动画

又有before to 一堆麻烦的先算了qaq

====================

下午：

其实解决起来so easy啊，最简单的就是

把蒙版 <transition>套在router view外面

直接就实现了好不好 qaq 气死了而且还是路由的方式

也可以用子组件向父组件传值的方式

不过这样有点麻烦

一般是用v-if 直接来处理了就会好很多吧(大概)

其实这样做也可以想直接在APP.vue里面写一个v-show 这样就可以把底部导航栏一起屏蔽掉了 qaq

5、

真的很好玩，你发现了吗…… 太好玩了，所以我野心勃勃，想做个切换动画

找了半天，发现都是router-view。我很生气，给人家都关了，结果发现，，，，，，

我在APP。vue里面写的就是router-view，只是footerbar给套在外面了而已qaq。。。

是看这个链接来的https://blog.csdn.net/u010394015/article/details/79263873

人家也讲得真好啊百度和谷歌帮我学了好多东西（看文档和书本看不懂只会实践的我）

（1） meta

（2）外面套上transition

好的，按照这个方法完全给ok的

那就这样吧……

这个还有个小坑就是页面会抖动，还有footerbar那里没有加入蒙板（这个其实多加个？？？也能解决。。？？？）

我先去学布局了555555555

父子组件传: https://blog.csdn.net/qq_43642812/article/details/89492130

【从0开始vue】点击后弹出对话框（其他部分变灰度） + 导航栏之间的切换动画相关推荐

android webview监听软键盘弹出和隐藏来修改虚拟导航栏颜色
最近项目中用到了webview,然后里面有输入框,当我们点击输入框的时候,软键盘挡住了布局,这就尴尬了,并且产品说,只有在软键盘弹出的时候底部的虚拟导航栏为黑色,软键盘隐藏的时候虚拟导航栏应该也隐藏. ...
html5加vue弹窗,Vue制作弹出对话框组件
之前写过一个组件的文章,算是入门,也是官网的例子,这个纯粹自己再写一遍,之前的文章 html结构这也是官网的一个例子首先我把生成后的html复制过来,分成两部分,一部分是一个按钮,用来弹出对话框, ...
如何让文件下载可以弹出对话框并且设置下载位置
本文主要针对的是Springmvc框架进行讲解,有些人做这个下载页面的时候,点击下载,却只能在当前网页上打开下载的东西,却不能在本地进行下载,而且还不能选择下载的路径,现在来简单讲述一下如何去设置下载 ...
vue中新增弹出对话框操作
情景: 点击新增用户或者新增订单,弹出对话框页面进行信息输入操作分析: 这个对话框组件是直接放到用户组件代码中的,自带一个属性,控制是否显示,默认为false不显示,需要显示的时候拿到此属性对应的变 ...
arcgis for js 4.X自定义气泡点击地图对象弹出对话框
题目的意思是,arcgis for js 4.X自定义气泡,点击地图对象弹出对话框,而不是弹出气泡.对话框是vue页面组成的自定义对话框,不是地图页面的对象. 基本思路: 1)气泡模板(PopupTe ...
jquery easyui 弹出对话框被activex控件遮挡问题
为什么80%的码农都做不了架构师?>>> 参考:http://bbs.csdn.net/topics/390375764 本人遇到jquery easyui 弹出对话框被act ...
异步任务下载apk文件并弹出对话框提示当前进度，文件下载结束后弹出安装界面
主要任务 1.下载apk保存到sd卡指定目录 2.下载时显示下载的进度 3.下载完成后弹出对话框提示安装分析过程: 联网操作不能在UI线程(主线程)进行需要开启线程下载,为了效率我们这里采用异步线 ...
JavaScript - JavaScript自定义弹出对话框
本脚本使用自定义的浮动窗口替代浏览器自己的对话框,效果非常不错.包含Error | Warning | Success | Prompt 四个对话框窗口兼容性:IE6+ FireFox2+ Oper ...
js弹出对话框的方法总结
1.最基本的js弹出对话框窗口代码 <script LANGUAGE="javascript"> window.open (" 地址 ") < ...

【从0开始vue】点击后弹出对话框（其他部分变灰度） + 导航栏之间的切换动画

【从0开始vue】点击后弹出对话框（其他部分变灰度） + 导航栏之间的切换动画相关推荐

最新文章

热门文章