用 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 开发中踩到的坑的更多相关文章

  1. 转:Flutter开发中踩过的坑

    记录一下入手Flutter后实际开发中踩过的一些坑,这些坑希望后来者踩的越少越好.本文章默认读者已经掌握Flutter初步开发基础. 坑1问题:在debug模式下,App启动第一个页面会很慢,甚至是黑 ...

  2. vue项目开发中踩过的坑

    一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...

  3. 那些年,我们在Django web开发中踩过的坑(一)——神奇的‘/’与ajax+iframe上传

    一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...

  4. celery开发中踩的坑

    celery开发中踩的坑 celery连接redis 当使用redis做broker,redis连接需要密码时: BROKER_URL='redis://:xxxxx@127.0.0.1:6379/0 ...

  5. Dcloud开发webApp踩过的坑

    Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...

  6. 项目中踩过的坑之-sessionStorage

    总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...

  7. 使用ffmpeg视频编码过程中踩的一个坑

           今天说说使用ffmpeg在写视频编码程序中踩的一个坑,这个坑让我花了好多时间,回头想想,非常多时候一旦思维定势真的挺难突破的.以下是不对的编码结果:                   ...

  8. 记一次SpringBoot 开发中所遇到的坑和解决方法

    记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...

  9. ng-zorro-antd中踩过的坑

    ng-zorro-antd中踩过的坑 前端项目中,我们经常会使用阿里开源的组件库:ant-design,其提供的组件已经足以满足多数的需求,拿来就能直接用,十分方便,当然了,有些公司会对组件库进行二次 ...

随机推荐

  1. vue 权限管理深度探究

    实现思路如下:1.网页路由(route)中定义的每个路由都有meta属性,属性值防止可访问该路由的值.2.路由的全局前置守卫(beforeEach)会判断路由用户是否登录(未登录跳转至登录界面),以及 ...

  2. Python+Selenium设置元素等待

    显式等待 显式等待使 WebdDriver 等待某个条件成立时继续执行,否则在达到最大时长时抛弃超时异常 (TimeoutException). #coding=utf-8 from selenium ...

  3. jdk监控tomcat

    一, tomcat配置文件 在tomcat的配置文件中添加被监控的项 #在tomcat配置文件中开启监控功能 vim /application/tomcat/bin/catalina.sh +97 C ...

  4. spark on yarn模式里需要有时手工释放linux内存

    为什么要提出这个问题? spark跑YARN模式或Client模式提交任务不成功(application state: ACCEPTED) 然后执行 [spark@master spark--bin- ...

  5. Springboot - 自定义错误页面

    Springboot 没找到页面或内部错误时,会访问默认错误页面.这节我们来自定义错误页面. 自定义错误页面 1.在resources 目录下面再建一个 resources 文件夹,里面建一个 err ...

  6. Java入门系列-06-运算符

    这篇文章为你搞懂2个问题 java 中的常用运算符有哪些?如何使用? 这些运算符的运算优先级是怎样的? 算数运算符 明显是做数学运算的,包括以下符号: + 加法运算 敲一敲: public class ...

  7. java.lang.Exception: DEBUG -- CLOSE BY CLIENT STACK TRACE 的理解

    [2013-12-06 11:06:21,715] [C3P0PooledConnectionPoolManager[identityToken->2tl0n98y1iwg7cbdzzq7a|7 ...

  8. [转]ASP.NET MVC中的两个Action之间值的传递--TempData

    本文转自:ASP.NET MVC中的两个Action之间值的传递--TempData 一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在 ...

  9. fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

    使用fullpage的步骤   1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...

  10. 6、Angular Route 路由

    1.没有嵌套路由 类似 ui-route 上述的html用红字标记的是必须导入的.这是因为:路由并不在ng2中,需要我们额外引入,另外我们需要设置base href,这是个什么东西呢?相当于我们后续所 ...