vuejs 开发中踩到的坑
用 v-for 循环式 每个item的值相等的情况下,会影响v-model的双向绑定;
Modal 组件开发,主要用slot 标签来实现
<template>
<transition name="modal">
<div class="modal-mask" @click="$emit('close')">
<div class="modal-wrapper">
<div class="modal-container" @click.stop=''>
<div class="modal-header">
<slot name="header">
</slot>
</div>
<div class="modal-body">
<slot name="body">
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="modal-quit-button" @click="$emit('close')">取消</button>
<button class="modal-sure-button" @click="$emit('ok')">确定</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template> <script>
</script> <style lang="scss">
@import "../../css/public/modal.scss";
</style>
然后用sass写主要的样式
@import "../variable";
.modal-mask {
position: fixed;
z-index:;
top:;
left:;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
display: table;
transition: opacity .3s ease;
.modal-wrapper {
display: table-cell;
vertical-align: middle;
.modal-container {
width: 394px;
margin: 0 auto;
background-color: $white;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
text-align: center;
.modal-header {
padding: 24px 0 15px 0;
h3 {
font-size: 18px;
line-height:;
color: $mainFontColor;
}
input {
box-sizing: border-box;
width: 354px;
height: 30px;
padding-left: 14px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
}
.modal-body {
margin: 0 auto;
p {
width: 226px;
margin: 0 auto;
}
}
.modal-footer {
button {
width: 75px;
height: 30px;
margin: 20px 37.5px;
border-radius: 3px;
color: $white;
}
.modal-quit-button {
background-color: #d8d8d8;
}
.modal-sure-button {
background-color: $eyeballColor;
}
}
}
}
}
.modal-enter {
opacity:;
} .modal-leave-active {
opacity:;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
最后在组件里使用
<modal class="collect-modal"
v-if='newPrograme.bool'
@close='newPrograme.bool = false'
@ok='submitNewPrograme()'
>
<div slot="header" >
<span class="modal-title">收藏</span>
</div>
<div slot='body'>
<div class="content">
<div class="content-left">
<img src="../../static/testPic/fense.png" width="156" height="156">
</div> <div class="content-right">
<span class="choose-file">选择文件夹</span>
<div class="collect">
<span class="shoucang">one apple</span>
<span @click="changeTip" class="shoucang-btn">收 藏<span/>
</div>
<span class="fengge">地中海风格</span> <div class="new-file">
<img src="../assets/detail/新建.png" @click="changeModal()" width="20" height="20" />
<span class="xinjian" >新建文件夹</span>
</div>
<div/>
<div/>
</div>
</modal>
项目里有个需求是提示收藏成功,出现1秒就消失,最后也是用这个modal完成的代码如下
html:
<modal class="collect-tip"
v-if='tip'
@close='tip = false'
@ok='submitNewPrograme()'
>
<div slot="header">
<h6>收藏成功</h6>
</div>
<div slot="footer" style="display: none"></div>
</modal>
然后给他加一个定时器
changeTip () {
this.tip = !this.tip;
let self = this;
if (self.tip) {
setTimeout(() => {
self.tip = false;
}, 1000);
}
},
:class 绑定class样式时
获取data 里的数据不用加上this。
eslint中的坑:
禁用不必要的 .call()
和 .apply()
(no-useless-call)
函数的调用可以写成 Function.prototype.call()
和 Function.prototype.apply()
,但是 Function.prototype.call()
和 Function.prototype.apply()
比正常的函数调用效率低。
Rule Details
此规则的目的在于标记出可以被正常函数调用所替代的 Function.prototype.call()
和 Function.prototype.apply()
的使用。
错误 代码示例:
/*eslint no-useless-call: "error"*/
// These are same as `foo(1, 2, 3);`
foo.call(undefined, 1, 2, 3);
foo.apply(undefined, [1, 2, 3]);
foo.call(null, 1, 2, 3);
foo.apply(null, [1, 2, 3]);
// These are same as `obj.foo(1, 2, 3);`
obj.foo.call(obj, 1, 2, 3);
obj.foo.apply(obj, [1, 2, 3]);
正确 代码示例:
/*eslint no-useless-call: "error"*/
// The `this` binding is different.
foo.call(obj, 1, 2, 3);
foo.apply(obj, [1, 2, 3]);
obj.foo.call(null, 1, 2, 3);
obj.foo.apply(null, [1, 2, 3]);
obj.foo.call(otherObj, 1, 2, 3);
obj.foo.apply(otherObj, [1, 2, 3]);
// The argument list is variadic.
foo.apply(undefined, args);
foo.apply(null, args);
obj.foo.apply(obj, args);
Known Limitations
此规则通过静态地对比代码检测 thisArg
是否被改变。所以如果 thisArg
是个动态表达式,此规则不能作出正确的判断。
错误 代码示例:
/*eslint no-useless-call: "error"*/
a[i++].foo.call(a[i++], 1, 2, 3);
正确 代码示例:
/*eslint no-useless-call: "error"*/
a[++i].foo.call(a[i], 1, 2, 3);
使用vuex时,
...mapMutations({
setModalData: 'SET_MODAL_DATA',
getFavoriteFolder: 'GET_FAVORITE_FOLDER',
colletSingle: 'COLLET_SINGLE'
}),
...mapActions({
getFavoriteFolder: 'getFavoriteFolder',
colletSingle: 'colletSingle',
newFolder: 'newFolder'
})
mutation 要在action 之前,不然会报错
vuejs 开发中踩到的坑的更多相关文章
- 转:Flutter开发中踩过的坑
记录一下入手Flutter后实际开发中踩过的一些坑,这些坑希望后来者踩的越少越好.本文章默认读者已经掌握Flutter初步开发基础. 坑1问题:在debug模式下,App启动第一个页面会很慢,甚至是黑 ...
- vue项目开发中踩过的坑
一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...
- 那些年,我们在Django web开发中踩过的坑(一)——神奇的‘/’与ajax+iframe上传
一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...
- celery开发中踩的坑
celery开发中踩的坑 celery连接redis 当使用redis做broker,redis连接需要密码时: BROKER_URL='redis://:xxxxx@127.0.0.1:6379/0 ...
- Dcloud开发webApp踩过的坑
Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...
- 项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...
- 使用ffmpeg视频编码过程中踩的一个坑
今天说说使用ffmpeg在写视频编码程序中踩的一个坑,这个坑让我花了好多时间,回头想想,非常多时候一旦思维定势真的挺难突破的.以下是不对的编码结果: ...
- 记一次SpringBoot 开发中所遇到的坑和解决方法
记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...
- ng-zorro-antd中踩过的坑
ng-zorro-antd中踩过的坑 前端项目中,我们经常会使用阿里开源的组件库:ant-design,其提供的组件已经足以满足多数的需求,拿来就能直接用,十分方便,当然了,有些公司会对组件库进行二次 ...
随机推荐
- 协程:gevent模块,遇到i/o自动切换任务 038
协程 : gevent模块,遇到io自动切换任务 from gevent import monkey;monkey.patch_all() # 写在最上面 这样后面的所有阻塞就全部能够识别了 impo ...
- APP在实际开发中应注意的关键点
在APP开发过程中,开发者比较注重的是功能模块的实现,从而忽略了APP的设计问题,特别是企业开发APP,但是,APP设计是APP开发中非常重要的一个环节,APP界面设计直接影响到APP用户的感官,因此 ...
- java多线程之join方法使用
看这篇博客:http://www.cnblogs.com/skywang12345/p/3479275.html
- 使用openssl在命令行加密
对于需要在应用软件中进行加密编程的开发者,通过命令行把基本的加密操作做一遍是很有意义的.openssl支持在命令行进行各种基本加密算法的操作.这些操作过程无需编程,其命令参数与程序函数调用加密的参数有 ...
- bzoj 5305: [Haoi2018]苹果树
Description Solution \(n\) 个点的二叉树的方案数是 \(n!\) 证明十分显然:新加入的点占掉了 \(1\) 个位置,新加了 \(2\) 个位置,那么多出来一个位置,所以第 ...
- UML建模—EA创建Use Case(用例图)
用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. 1.新建用例图 2.用例图工具: 3.一个简单用例: 用例图所包含的元素如下: 1. Act ...
- win 环境下 node.js环境变量
在win 环境下 node.js环境变量有两种情况: (1)开发环境(development):开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告. ...
- easyui-textbox 绑定事件
$('#Id').textbox({ inputEvents: $.extend({},$.fn.textbox.defaults.inputEvents,{ keyup:function(event ...
- 微服务学习笔记一:Spring Cloud简介
1.Spring Cloud是一个工具集:Spring Cloud是在Spring Boot的基础上构建的,用于简化分布式系统构建的工具集:使架构师在创建和发布微服务时极为便捷和有效. Sp ...
- springmvc 登陆拦截器 配合shiro框架使用
public class LoginHandlerInterceptor extends HandlerInterceptorAdapter{ @Override public boolean pre ...