之前在專案中使用vue框架中的element-ui時，使用element-ui的彈窗非常的nice，但在最近的專案中，要求專案體積小，且高度自定義，所以不能把element-ui的message的元件引進來再改樣式，於是決定自己封裝乙個，來滿足需求。
使用vue.extend(options)建立乙個vue構造器，再將構造器例項化，掛載到body中
...
const messagebox = vue.
extend
(messagemain)
;...
const
message
=function
(options =))
;//在文件之外渲染並且隨後掛載
instance.vm = instance.
$mount()
; document.body.
(instance.vm.$el)
;...
}
建立messagemain.vue元件
"taataa"
>
class
="['plugins-message-box',type]" v-if=
"visible"
>
class
="['message-icon','iconfont',iconclass]"
>
<
/div>
="message-container"
>
}<
/div>
<
/div>
<
/transition>
<
/template>
const typeclass =
;export
default;}
, computed:
else},
},};
<
/script>建立構造器
import vue from
'vue'
;// 引入vue
import messagemain from
'./messagemain'
;// 引入上邊定義好的message模板
const messagebox = vue.
extend
(messagemain)
;// 使用vue.extend來建立乙個構造器
let instance;
// instance 變數用來儲存例項
let timer =
null
;// timer 變數用來儲存定時器
// 定義乙個function，引數為options，預設為乙個物件
const
message
=function
(options =)}
// 初始化例項，並將options作為新的data傳入，vue會將options合併到原有的data上，覆蓋原有的預設值，但是，在options中沒有設定的是不會被改變的
instance =
newmessagebox()
;// 呼叫$mount方法，將當前例項渲染為真實dom，生成$el，如果不執行這一步，將拿不到 $el 的值，但是不指定dom節點接管當前例項
instance.vm = instance.
$mount()
;// 使用原生js的api將當前例項的真實dom追加到body中
document.body.
(instance.vm.$el)
;// 例項上的vm就是我們的vue元件，所以我們可以通過vm訪問到當前例項中的所有屬性
// 將visible設定為true，即顯示當前message-box
instance.vm.visible =
true
;// 開啟定時器
timer =
settimeout((
)=>
, 1000)
// 清除定時器
timer =
null;}
, instance.vm.duration)
;// 定時器的時間使用vm中定義的時間
return instance.vm;};
// 最終丟擲乙個物件，物件上我們可以使用 install 來擴充套件vue的外掛程式
// 當我們的物件上有install方法的時候，它接收第乙個引數為vue，
// 我這裡為了方便使用，還在當前丟擲的物件上定義了乙個message方法，為了方便在axios的***中使用；
export
default
};
import message from
'.component/messagemain'
;vue.
use(message)
;
="hello"
>
/h2>
"successmessage"
>success<
/button>
"errormessage"
>error<
/button>
"warnmessage"
>warn<
/button>
<
/div>
<
/div>
<
/template>
export
default},
methods:)}
,errormessage()
)},warnmessage()
)},}
,}<
/script>
<
!-- add "scoped" attribute to limit css to this component only --
>
<
/style>注：這了的icon是使用iconfont-阿里巴巴中font class，
碼雲鏈結
參考鏈結
vue自定義指令實現v model
指令是vue中非常重要的內容，了解指令的用法可以更好的服務於業務場景，方便高效，本文主要介紹指令的基本概念和用法，簡單模擬v model實現的功能。除了內建指令，vue.js 也允許註冊自定義指令。自定義指令提供一種機制將資料的變化對映為 dom 行為。可以用vue.directive id,def...
vue自定義元件，插槽，自定義事件
vue.component 自定義元件名 自定義模板 裡面套html標籤,可以取屬性的值 vue.component lover new vue script lover div 自定義元件模板 bitqian標籤 vue.component bitqian new vue script v for...
Vue自定義事件
父元件使用props傳遞資料給子元件，子元件怎麼跟父元件通訊呢？這時，vue的自定義事件就派上用場了。本文將詳細介紹vue自定義事件 每個 vue 例項都實現了事件介面 events inte ce 即 使用 on eventname 監聽事件 使用 emit eventname 觸發事件 注意 v...