成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue彈窗插件實(shí)戰(zhàn)

ZweiZhao / 2992人閱讀

摘要：組件顯示隱藏由內(nèi)部屬性控制，只暴露給外界和個(gè)方法，個(gè)方法觸發(fā)對(duì)應(yīng)的事件測(cè)試一下彈窗內(nèi)容插件化組件功能寫好了，但是這種調(diào)用方式顯得很累贅。我們寫的彈窗能不能這么方便呢，為此需要把改寫成插件。

vue做移動(dòng)端經(jīng)常碰到彈窗的需求, 這里寫一個(gè)功能簡(jiǎn)單的vue彈窗

popup.vue

組件html結(jié)構(gòu), 外層divposition:fixed定位, 內(nèi)層div顯示彈窗內(nèi)容

export default {
  name: "popup",
  props: {
    text: { //文字內(nèi)容
      type: String,
      default: ""
    },
    time: { //顯示的時(shí)長(zhǎng)
      type: Number,
      default: 3e3
    },
  },
  data(){
    return {
      visible: false
    }
  },
  methods: {
    open() {
      this.visible = true
      clearTimeout(this.timeout);
      this.$emit("show")
      if(this.time > 0){
        this.timeout = setTimeout(() => {
          this.hide()
        }, this.time)
      }
    },
    hide() {
      this.visible = false
      this.$emit("hide")
      clearTimeout(this.timeout);
    }
  }
}

popup.vue只有2個(gè)屬性: 文本和顯示時(shí)間。組件顯示隱藏由內(nèi)部屬性visible控制，只暴露給外界open和hide2個(gè)方法，2個(gè)方法觸發(fā)對(duì)應(yīng)的事件

測(cè)試一下

插件化

組件功能寫好了，但是這種調(diào)用方式顯得很累贅。舉個(gè)例子layer.js的調(diào)用就是layer.open(...)沒(méi)有import，沒(méi)有ref，當(dāng)然要先全局引用layer。我們寫的彈窗能不能這么方便呢，為此需要把popup改寫成vue插件。
說(shuō)是插件，但能配置屬性調(diào)用方法的還是組件本身，具體是實(shí)例化的組件，而且這個(gè)實(shí)例必須是全局單例，這樣不同vue文件喚起popup的時(shí)候才不會(huì)打架

生成單例

// plugins/popupVm.js
import Popup from "@/components/popup"
let $vm
export const factory = (Vue)=> {
  if (!$vm) {
    let Popup = Vue.extend(PopupComponent)
    $vm = new Popup({
      el: document.createElement("div")
    })
    document.body.appendChild($vm.$el)
  }
  return $vm
}

組件實(shí)例化后是添加在body上的，props不能寫在html里需要js去控制，這里寫個(gè)方法讓屬性默認(rèn)值繼續(xù)發(fā)揮作用

// plugins/util.js
export const setProps = ($vm, options) => {
  const defaults = {}
  Object.keys($vm.$options.props).forEach(k => {
    defaults[k] = $vm.$options.props[k].default
  })
  const _options = _.assign({}, defaults, options)
  for (let i in _options) {
    $vm.$props[i] = _options[i]
  }
}
// plugins/popupPlugin.js
import { factory } from "./popupVm"
import { setProps } from "./util"

let $vm

const libs = {
  open(options) {
    setProps($vm, options)
    //監(jiān)聽(tīng)事件
    typeof options.onShow === "function" && $vm.$once("show", options.onShow);
    typeof options.onHide === "function" && $vm.$once("hide", options.onHide);
    $vm.open();
  },
  hide() {
    $vm.hide()
    $vm.$off("show")
    $vm.$off("hide")
  }，
  //只配置文字
  text(text) {
    this.open({ text })
  }
}

export default {
  install(Vue) {
    $vm = factory(Vue)
    Vue.prototype.$popup = libs
  }
}

export {
  libs as Popup
}

在main.js內(nèi)注冊(cè)插件

//main.js
import Vue from "vue"
import PopupPlugin from "@/plugins/popupPlugin"

Vue.use(PopupPlugin)

在vue框架內(nèi)調(diào)用就非常方便了

======================================================================
大半年后更新, 之前此插件只能在Vue組件內(nèi)使用, 受到element ui, 添加一句 export { libs as Popup }. 這樣可以在任何js內(nèi)調(diào)用彈窗

import { Popup } from "@/plugins/popupPlugin"

Popup.open("彈窗消息")

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97550.html

相關(guān)文章

  • Vue $mount實(shí)戰(zhàn)--實(shí)現(xiàn)消息彈窗組件

    摘要：之前的項(xiàng)目一直在使用框架，中的組件使用時(shí)不需要在寫標(biāo)簽，而是使用調(diào)用。這樣在組件中就可以通過(guò)的形式來(lái)使用了參考參考了的代碼封裝組件的一些技巧 之前的項(xiàng)目一直在使用Element-UI框架，element中的Notification、Message組件使用時(shí)不需要在html寫標(biāo)簽，而是使用js調(diào)用。那時(shí)就很疑惑，為什么element ui使用this.$notify、this.$mess...

    lvzishen 評(píng)論0 收藏0

  • vue插件開(kāi)發(fā)練習(xí)--實(shí)用彈窗

    摘要：前言上回說(shuō)了組件組件開(kāi)發(fā)練習(xí)焦點(diǎn)圖切換的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說(shuō)下的插件練手的項(xiàng)目。和組件開(kāi)發(fā)的目錄相比，區(qū)別就在于這個(gè)文件夾上。開(kāi)發(fā)過(guò)程把項(xiàng)目跑起來(lái)首先，先弄這個(gè)組件。最后還需要一個(gè)變量，控制彈窗是否顯示。 1.前言 上回說(shuō)了組件（vue組件開(kāi)發(fā)練習(xí)--焦點(diǎn)圖切換）的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說(shuō)下vue的插件練手的項(xiàng)目。相對(duì)于現(xiàn)在之前的焦點(diǎn)圖切換的組件，這個(gè)可能就更簡(jiǎn)單了，基...

    muzhuyu 評(píng)論0 收藏0

  • 2017-06-28 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選我是如何實(shí)現(xiàn)的在線升級(jí)熱更新功能的張?chǎng)涡聆慰臻g鑫生活翻譯表單的運(yùn)用第期晉升評(píng)審的套路異步編程的四種方式黃博客精選組件設(shè)計(jì)和分解思考掘金中文譯使登錄頁(yè)面變得正確掘金前端從強(qiáng)制開(kāi)啟壓縮探究插件運(yùn)行機(jī)制掘金個(gè)常用的簡(jiǎn) 2017-06-28 前端日?qǐng)?bào) 精選 我是如何實(shí)現(xiàn)electron的在線升級(jí)熱更新功能的？ ? 張?chǎng)涡?鑫空間-鑫生活【翻譯】React 表單： Refs 的運(yùn)用【...

    QLQ 評(píng)論0 收藏0

  • 手把手教你擼個(gè)vue2.0彈窗組件

    摘要：組件結(jié)構(gòu)同組件結(jié)構(gòu)通過(guò)方法獲取元素的大小及其相對(duì)于視口的位置，之后對(duì)提示信息進(jìn)行定位?？梢杂脕?lái)進(jìn)行一些復(fù)雜帶校驗(yàn)的彈窗信息展示，也可以只用于簡(jiǎn)單信息的展示。可以通過(guò)屬性來(lái)顯示任意標(biāo)題，通過(guò)屬性來(lái)修改顯示區(qū)域的寬度。 手把手教你擼個(gè)vue2.0彈窗組件 在開(kāi)始之前需要了解一下開(kāi)發(fā)vue插件的前置知識(shí)，推薦先看一下vue官網(wǎng)的插件介紹 預(yù)覽地址 http://haogewudi.me/k...

    mrli2016 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<