免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

廢話少說(shuō)，上效果圖

前言

? ? 本人在做畢設(shè)的時(shí)候用elementui寫(xiě)頁(yè)面的時(shí)候，覺(jué)得這個(gè)通知很有趣，可以用一個(gè)命令（this.$notify)這樣子調(diào)用，很神奇。所以打算自己封裝一個(gè)，以后就可以隨便調(diào)用了。

第一步：創(chuàng)建這個(gè)通知的模板

首先，你在vue的項(xiàng)目里面，找個(gè)合適的位置創(chuàng)建一個(gè)文件夾，創(chuàng)建一個(gè)vue的文件以及一個(gè)js文件

代碼如下

myNotify.vue

?我通過(guò) transition?實(shí)現(xiàn)過(guò)渡，v-if 來(lái)決定顯示類(lèi)型，其他的就是一些樣式了（個(gè)人覺(jué)得這樣寫(xiě)挺冗余的，可以改進(jìn)）

<template>  <transition name="slide-fade">    <div class="my-notify" v-if="notifyFlag">      <div class="notify success" v-if="type=='success'">        <div class="tip">          <span>成功</span>        </div>        <div class="content"> {{content}}</div>      </div>      <div class="notify error" v-else-if="type=='error'">        <div class="tip">          <span>錯(cuò)誤</span>        </div>        <div class="content">{{content}}</div>      </div>      <div class="notify warning" v-else-if="type=='warning'">        <div class="tip">          <span>警告</span>        </div>        <div class="content">{{content}}</div>      </div>    </div>  </transition></template><style scoped>.slide-fade-leave-active {  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}.slide-fade-enter, .slide-fade-leave-to{  transform: translateX(10px);  opacity: 0;}.notify-wrap{    background-color: #1AFA29;}.my-notify{  margin: 10px;  width: 350px;}.notify{  position: relative;  right: 10px;  padding-left: 10px;  width: 320px;  height: 70px;  border-radius: 4px;  background-color:rgb(255, 244, 224);  box-shadow: -5px 5px 12px 0 rgba(204, 204, 204, .8);  animation: show cubic-bezier(.18,.89,.32,1.28) .4s;}.success{  border-left: 10px solid #1AFA29;}.error{  border-left: 10px solid #D81E06;}.warning{  border-left: 10px solid #F4EA2A;}.notify .tip{  height: 30px;  margin-bottom: 5px;  line-height: 30px;}.notify .tip span{  line-height: 30px;  font-size: 17px;  font-weight: 600;}.notify .content{  width: 320px;  height: 30px;  font-size: 15px;}@keyframes show{  0%{    right: -350px;  }  100%{    right: 10px;  }}</style>

index.js

在用element的通知的時(shí)候，我發(fā)現(xiàn)在他是通過(guò)在body里面插入元素來(lái)實(shí)現(xiàn)的，但是我覺(jué)得一個(gè)個(gè)的有點(diǎn)散，所以用一個(gè)div來(lái)包裹住他們，這樣一來(lái)還可以不用通過(guò)js來(lái)計(jì)算高度來(lái)實(shí)現(xiàn)排隊(duì)，反而變得更加簡(jiǎn)單。通過(guò)timeout來(lái)記時(shí)，實(shí)現(xiàn)停留效果，監(jiān)聽(tīng)timeFlag的變化來(lái)決定是否消失該條通知。注冊(cè)方法的作用在下面詳說(shuō)。

import vue from 'vue'import myNotify from './myNotify'// 創(chuàng)建vue組件實(shí)例const notify = vue.extend(myNotify);//添加通知節(jié)點(diǎn)(用來(lái)存放通知的元素)let notifyWrap = document.createElement('div');notifyWrap.className = "notify-wrap"notifyWrap.style = "position: fixed; right: 0px; transition-duration: .5s;"document.body.appendChild(notifyWrap);let myMsg = {  /**   * 通知框   * @content 提示內(nèi)容;   * @type 提示框類(lèi)型，parameter： success，error，warning   * @time 顯示時(shí)長(zhǎng)   */  notify: ({    content,     type,     time = 1500,  }) => {    //創(chuàng)建一個(gè)存放通知的div    const notifyDom = new notify({      el: document.createElement('div'),      data () {        return {          notifyFlag: true, // 是否顯示          time: time,//取消按鈕是否顯示          content: content, // 文本內(nèi)容          type: type, // 類(lèi)型          timer: '',          timeFlag: false,        }      },      watch:{        timeFlag(){          if(this.timeFlag){            this.notifyFlag = false;            window.clearTimeout(this.timer);           }        }      },      created(){        this.timer = setTimeout(() => {           this.timeFlag = true;        }, this.time);               },      beforeDestroy(){        window.clearTimeout(this.timer);       }    })        //往notifyWrap里面添加通知    notifyWrap.appendChild(notifyDom.$el);  }}//注冊(cè)function register(){  vue.prototype.$myMsg = myMsg}export default {  myMsg,  register}

可能大家會(huì)發(fā)現(xiàn)，這種格式有點(diǎn)陌生，如果有去vue官網(wǎng)觀摩過(guò)的話，這種格式反而更加熟悉，創(chuàng)建一個(gè)vue對(duì)象，諸如此類(lèi)的。

好了問(wèn)題來(lái)了。主題功能有了，我們時(shí)如何實(shí)現(xiàn)用this.$xxx來(lái)調(diào)用呢？

第二步：注冊(cè)

?進(jìn)入main.js添加就可以了。

import Vue from 'vue';import App from './App';import router from './router';import store from "./store/store";import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import api from "@/server/api.js";//這行import message from "@/components/myMsg/index"Vue.config.productionTip = false;Vue.prototype.$http = api;Vue.use(ElementUI);//和這行Vue.use(message.register);new Vue({  el: '#app',  store,  router,  components: { App },  template: '<App/>'})

只要上面注釋的那兩行就可以了。其實(shí)這里可以偷懶，因?yàn)槊麨閕ndex，所以在引入路徑的時(shí)候可以不用加上index。在這里，你可以看到注冊(cè)了，沒(méi)錯(cuò)上面的注冊(cè)方法是放在這里弄得，當(dāng)然，也可以分開(kāi)寫(xiě)，各自喜歡咯！

第三步：調(diào)用

好了，搞了這么久，該怎么調(diào)用呢？

this.$myMsg.notify({   content: "啦啦啦",   type: 'success', //time: 5500});

是不是幾乎一樣，趕緊試試！

結(jié)束

?本人還是個(gè)實(shí)習(xí)生，可能上面還有很多不合理得地方吧，還請(qǐng)各位大神多多指教！