每日技術總結：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年開始，每一個工做日都會寫一篇博客記錄用到的或學到的技術，並無那麼難，寫博客的目的純粹是爲本身作個記錄，同時也是整理，當你須要把一件事情寫出來時，你不得不十分清楚。之前也接觸過很多的技術知識，基本上用過就丟一邊了，下次再遇到時，又要從新找製做方法。

但願這是一個好的開始，堅持下去。我可能和某些人比差很遠，可是天天都比本身更進步。