Vue作為最近最炙手可熱的前端框架,其簡單的入門方式和功能強大的API是其優(yōu)點。而同時因為其API的多樣性和豐富性,所以他的很多開發(fā)方式就和一切基于組件的React不同,如果沒有對Vue的API(有一些甚至文檔都沒提到)有一個全面的了解,那么在開發(fā)和設(shè)計一個組件的時候有可能就會繞一個大圈子,所以我非常推薦各位在學習Vue的時候先要對Vue核心的所有API都有一個了解。
成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今,先為城北等服務(wù)建站,城北等地企業(yè),進行企業(yè)商務(wù)咨詢服務(wù)。為城北企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。舉個例子,通知組件notification基本是現(xiàn)代web開發(fā)標配,在很多地方都能用到。而在以Vue作為核心框架的前端項目中,因為Vue本身是一個組件化和虛擬Dom的框架,要實現(xiàn)一個通知組件的展示當然是非常簡單的。但因為通知組件的使用特性,直接在模板當中書寫組件并通過v-show或者props控制通知組件的顯示顯然是非常不方便的,而且如果要在action或者其他非組件場景中要用到通知,那么純組件模式的用法也無法實現(xiàn)。那么有沒有辦法即用到Vue組件化特性方便得實現(xiàn)一個通知組件的展現(xiàn),又能夠通過一個簡單的方法調(diào)用就能顯示通知呢?本文就是來講述這個實現(xiàn)方法的。
目標
實現(xiàn)一個Vue的通知組件,可以直接在組件內(nèi)調(diào)用
通過方法調(diào)用,比如Vue.$notify({...options})來調(diào)用通知組件
結(jié)合上述兩種方式,復用代碼
實現(xiàn)通知組件
這一步非常的簡單,我相信做過一點Vue開發(fā)的同學都能寫出一個像模像樣的通知組件,在這里就不贅述,直接上代碼
<template> <transition name="fade" @after-leave="afterLeave" @after-enter="setHeight"> <div v-show="visible" :class="['notification']" : @mouseenter="clearTimer" @mouseleave="createTimer" > <span class="content">{{content}}</span> <a class="btn" @click="handleClose">{{btn || '關(guān)閉'}}</a> </div> </transition> </template> <script> export default { name: 'Notification', props: { content: { type: String, default: '' }, btn: { type: String, default: '' } }, data () { return { visible: true } }, computed: { style () { return {} } }, methods: { handleClose (e) { e.preventDefault() this.doClose() }, doClose () { this.visible = false this.$emit('close') }, afterLeave () { this.$emit('closed') }, clearTimer () {}, createTimer () {}, setHeight () {} } } </script>
網(wǎng)頁名稱:你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件(推薦)-創(chuàng)新互聯(lián)
本文網(wǎng)址:http://muchs.cn/article2/cdioic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計公司、App開發(fā)、響應(yīng)式網(wǎng)站、移動網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容