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

ZweiZhao 發(fā)布于2019-08-23 11:50 / 2984人閱讀

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

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

popup.vue

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

export default {
  name: "popup",
  props: {
    text: { //文字內(nèi)容
      type: String,
      default: ""
    },
    time: { //顯示的時長
      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個屬性: 文本和顯示時間。組件顯示隱藏由內(nèi)部屬性visible控制，只暴露給外界open和hide2個方法，2個方法觸發(fā)對應的事件

測試一下

插件化

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

生成單例

// 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
}

組件實例化后是添加在body上的，props不能寫在html里需要js去控制，這里寫個方法讓屬性默認值繼續(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)聽事件
    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)注冊插件

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

Vue.use(PopupPlugin)

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

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

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

Popup.open("彈窗消息")

GPU云服務器云服務器彈窗插件 jsp彈窗插件 layer彈窗插件 vue插件

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97550.html

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

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

lvzishen 2019-08-23 17:02 評論0 收藏0
vue插件開發(fā)練習--實用彈窗

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

muzhuyu 2019-08-22 11:06 評論0 收藏0
2017-06-28 前端日報

摘要：前端日報精選我是如何實現(xiàn)的在線升級熱更新功能的張鑫旭鑫空間鑫生活翻譯表單的運用第期晉升評審的套路異步編程的四種方式黃博客精選組件設計和分解思考掘金中文譯使登錄頁面變得正確掘金前端從強制開啟壓縮探究插件運行機制掘金個常用的簡 2017-06-28 前端日報精選我是如何實現(xiàn)electron的在線升級熱更新功能的？ ? 張鑫旭-鑫空間-鑫生活【翻譯】React 表單： Refs 的運用【...

QLQ 2019-08-20 17:36 評論0 收藏0
手把手教你擼個vue2.0彈窗組件

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

mrli2016 2019-08-20 18:36 評論0 收藏0