1.一个优雅的提示是网站必不可少的。

请参考:vue2.0 自定义 提示框(Toast)组件

2.ESLint使用总结

(1)在.eslintrc.js里关闭某条规则, '规则名': 'off'或0

举例:

rules: {
'generator-star-spacing': 'off','no-restricted-syntax': 'off',
'indent': 0,
'new-cap': 0
}

(2)// eslint-disable-next-line 对下一行禁用,举例代码:

// eslint-disable-next-line
var curType = type ? type : opt.defaultType

(3)// eslint-disable-line 对这一行禁用,举例代码:

toastVM = new toastTpl() // eslint-disable-line

(4)eslint常见规则,请参考: ESLint常见命令(规则表)

3.white-space,word-spacing,letter-spacing,word-break这些都是什么鬼?

参见博客:word-spacing、word-break、letter-spacing和white-space

4.CSS动画库,Animate.css

官方地址:https://daneden.github.io/animate.css/

(1)安装: npm install animate.css --save 或 yarn add animate.css

(2)引入: vue项目,src/main.js 代码如下:

import animate from 'animate.css'
  Vue.use(animate)

(3)使用:在需要动画的vue文件,比如detail.vue

示例代码:

<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" :duration="200">
<div class="mask" v-show="cartModalShow"></div>
</transition>

注意:

  • animated类名必须加
  • 第二个类名参考官方文档里面的动画名,如bounceIn,fadeOut,slideOutUp……
  • <transition>里面的元素必须是单独的,没有兄弟元素的。并且是有v-show,v-if,等显示和隐藏相关的指令的。。

5.$emit()

需求情景描述:我在详情页(父组件)点‘加入购物车’按钮,显示购物车信息模态框(子组件),在模态框里点‘继续购物’关闭该模态框,模态框的显示和隐藏是父组件的一个参数cartModalShow控制的。

也就是说,点击事件发生在子组件,需要控制父组件里的某个参数。怎么办吧?

代码示例:

这是子组件:

<template>
<div class="cart-modal">
<div class="msg">加入购物车成功!</div>
<div class="btns">
<a href="javascript:;" class="b-r" @click="toCart">进入购物车</a>
<a href="javascript:;" @click="closeModal">继续购物</a>
</div>
</div>
</template>

子组件js部分:

methods: {
toCart () {
this.$router.push({
path: 'cart'
})
},
closeModal () {
this.$emit('close')
}
}
this.$emit('close') 该方法向父组件传递了'close'事件

点‘继续购物’这个按钮时,需要关闭模态框。但是控制模态框显示的属性在父组件里。

父组件代码如下:

<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" :duration="200">
<cart-modal v-show="cartModalShow" @close="closeCartModal"></cart-modal>
</transition>
v-show="cartModalShow" 控制着该模态框的显示和隐藏
@close="closeCartModal" 父组件使用close事件来触发closeCartModal方法关闭模态框

js代码:

methods: {
  closeModal () {
this.cartModalShow = false
  }
}

这么写出来就发现其实用法也挺简单的,之前没有总结和整理,以为很难。

6.cubic-bezier是什么鬼?

参考文章:实用的 CSS — 贝塞尔曲线(cubic-bezier)

(1)animation-timing-function, transition-timing-function

(2)cubic-bezier 三次贝塞尔,为animation生成速度曲线的函数,cubic-bezier(<x1>, <y2>, <x2>, <y2>)

今日总结:

2019年开始,每个工作日都会写一篇博客记录用到的或学到的技术,并没有那么难,写博客的目的纯粹是为自己做个记录,同时也是整理,当你需要把一件事情写出来时,你不得不十分清楚。以前也接触过不少的技术知识,基本上用过就丢一边了,下次再遇到时,又要重新找制作方法。

希望这是一个好的开始,坚持下去。我可能和某些人比差很远,但是每天都比自己更进步。

每日技术总结:Toast组件,eslint,white-space,animate,$emit的更多相关文章

  1. 使用Angular CDK实现一个Service弹出Toast组件

    在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能 ...

  2. 提示框的优化之自定义Toast组件之(二)Toast组件的业务逻辑实现

    在java下org.socrates.mydiary.activity下LoginActivity下自定义一个方法showCustomerToast()  public class LoginAct ...

  3. dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.

    采用dom4j方式解析string类型的xml xml:        String string="<?xmlversion=\"1.0\" encoding=\ ...

  4. 微信小程序把玩(二十四)toast组件

    原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其 ...

  5. 百度小程序自定义通用toast组件

    百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...

  6. toast组件小结

    简介:toast是"吐司"的意思,它属于android杂项组件,是一个简单的消息提示框,类似于javascript中的alert. 作用 显示文本 显示图片 显示图文 3.常用方法 ...

  7. 提示框的优化之自定义Toast组件之(三)Toast组件优化

    开发步骤: 在toast_customer.xml文件中添加一个图片组件对象显示提示图片 <?xml version="1.0" encoding="utf-8&q ...

  8. 提示框的优化之自定义Toast组件之(一)Toast组件的布局实现

    开发步骤:  在res下layout下创建一个Toast的布局资源文件toast_customer.xml  在最外层布局组件中为该布局添加android:id属性  //toast_custo ...

  9. 【Web技术】314- 前端组件设计原则

    点击上方"前端自习课"关注,学习起来~ 译者:@没有好名字了译文:https://github.com/lightningminers/article/issues/36,http ...

随机推荐

  1. DistBelief 框架下的并行随机梯度下降法 - Downpour SGD

      本文是读完 Jeffrey Dean, Greg S. Corrado 等人的文章 Large Scale Distributed Deep Networks (2012) 后的一则读书笔记,重点 ...

  2. C#使用一般处理程序(ashx)中session

    .ashx中引用 session必须 using System.Web.SessionState ,继承IReadOnlySessionState/IRequiresSessionState IRea ...

  3. javafx KeyFrame

    import javafx.animation.Animation; import javafx.animation.KeyFrame; import javafx.animation.Timelin ...

  4. Java表单设计器orbeon点滴

    包含表单设计器和运行展现 一个完整的应用 页面部分都是使用XML和XHTML进行服务端的组合出来的,具体逻辑有些复杂 设计器缺少一个最常用的:repeat,如果需要只能手动编写代码(参考官方文档步骤有 ...

  5. cocos2d-x-lua基础系列教程六(lua-table增删改查)

    lua-table库 1.插入 table.insert () --假设没有设定位置.默认last位置 样例: myTable = { 1, 2, 3 } myTable.insert(myTable ...

  6. HDU 1043 八数码(A*搜索)

    在学习八数码A*搜索问题的时候须要知道下面几个点: Hash:利用康托展开进行hash 康托展开主要就是依据一个序列求这个序列是第几大的序列. A*搜索:这里的启示函数就用两点之间的曼哈顿距离进行计算 ...

  7. 解决ubuntu终端无法输入中文的问题

    解决ubuntu终端无法输入中文的问题 来源: https://my.oschina.net/lvhongqing/blog/851922 首先把中文语言包安装上 打开 /var/lib/locale ...

  8. Java Base64、HMAC、SHA1、MD5、AES DES 3DES加密算法

    ●  BASE64 严格地说,属于编码格式,而非加密算法    ●  MD5(Message Digest algorithm 5,信息摘要算法)    ●  SHA(Secure Hash Algo ...

  9. node 内存溢出

    遇到这个问题的人可以更快解决 再复制写一篇 利于百度搜索 坑爹的node 内存溢出 react开发项目  安装一个插件依赖 ,然后就报错了 报错如下(自己的没有截图出来 这是从别人的截图---报错基本 ...

  10. BZOJ3672: [Noi2014]购票(CDQ分治,点分治)

    Description  今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会.        全国的城市构成了一棵以SZ市为根的有根树 ...