每日技术总结:Toast组件,eslint,white-space,animate,$emit

Posted basic0001

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每日技术总结:Toast组件,eslint,white-space,animate,$emit相关的知识,希望对你有一定的参考价值。

 

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的主要内容,如果未能解决你的问题,请参考以下文章

CVE-2020-0014 Toast组件点击事件截获漏洞

CVE-2020-0014 Toast组件点击事件截获漏洞

CVE-2020-0014 Toast组件点击事件截获漏洞

vue 3.0 封装 Toast 组件

教你一步步封装vue的toast和loading组件

每日总结