>[success] # 開始封裝 >[danger] ##### 封裝主體部分 ~~~ 1.現在知道'.vue' 文件最后還是會解析成類似js 文件這樣，我們前期創建這個'$Alert' 組件過程還是和以前 一樣就行 2.使用的時候： this.$Alert({ content: '這是一條提示信息', duration: 3 }) 2.1.雖然現在我們不清楚這種調用的形式是怎么實現的，但是可以注意到需要傳入是一個對象，這個對象 有負責輸出內容的'content',有可以設置延遲的'duration' 3.下面代碼中的add 主要負責就是將傳進來的這個對象進行重新，對 屬性中多的'content' 和'duration' 進行分配 首先定義了一個全局的'getUuid' 的方法，因為在使用的時候會出現連續調用的情況，我們做一個標記，這樣 我們就清楚合適應該對那個彈窗進行銷毀，和應該展示那個彈窗的先后順序 4.當然iview 作者 也對這個add 方法做了更多的解釋： 由這個思路，Alert 組件就可以無限擴展，只要在 add 方法中傳遞更多的參數，就能支持更復雜的組件， 比如是否顯示手動關閉按鈕、確定 / 取消按鈕，甚至傳入一個 Render 函數都可以。 ~~~ ~~~ <!-- alert.vue --> <template> <div class="alert"> <div class="alert-main" v-for="item in notices" :key="item.name"> <div class="alert-content">{{ item.content }}</div> </div> </div> </template> <script> let seed = 0; function getUuid() { return "alert_" + seed++; } export default { data() { return { notices: [] }; }, methods: { add(notice) { const name = getUuid(); let _notice = Object.assign( { name: name }, notice ); this.notices.push(_notice); // 定時移除，單位：秒 const duration = notice.duration; setTimeout(() => { this.remove(name); }, duration * 1000); }, remove(name) { const notices = this.notices; for (let i = 0; i < notices.length; i++) { if (notices[i].name === name) { this.notices.splice(i, 1); break; } } } } }; </script> <style> .alert { position: fixed; width: 100%; top: 16px; left: 0; text-align: center; pointer-events: none; } .alert-content { display: inline-block; padding: 8px 16px; background: #fff; border-radius: 3px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); margin-bottom: 8px; } </style> ~~~ >[danger] ##### 將組件主體變成一個未掛載組件 ~~~ 1.我們在Alert 組件文件夾下創建一個這個文件叫'notification.js' 2.我們再將組件封裝的兩個方法暴露出去,也就是'add' 方法和'remove' 方法 ~~~ ~~~ // notification.js import Alert from './alert.vue'; import Vue from 'vue'; Alert.newInstance = properties => { const props = properties || {}; const Instance = new Vue({ data: props, render (h) { return h(Alert, { props: props }); } }); const component = Instance.$mount(); document.body.appendChild(component.$el); const alert = Instance.$children[0]; return { add (noticeProps) { alert.add(noticeProps); }, remove (name) { alert.remove(name); } } }; ~~~ >[danger] ##### 提供一個調用者 ~~~ 1.在創建一個alert.js 文件這樣可以供全局調用 2.'getMessageInstance' 函數用來獲取實例，它不會重復創建，如果 'messageInstance' 已經存在， 就直接返回了，只在第一次調用 'Notification' 的 'newInstance' 時來創建實例 2.要考慮銷毀組件 ~~~ ~~~ // alert.js import Notification from './notification.js'; let messageInstance; function getMessageInstance () { messageInstance = messageInstance || Notification.newInstance(); return messageInstance; } function notice({ duration = 1.5, content = '' }) { let instance = getMessageInstance(); instance.add({ content: content, duration: duration }); } export default { info (options) { return notice(options); } } ~~~ >[danger] ##### 注冊這個組件 ~~~ // src/main.js import Vue from 'vue' import App from './App.vue' import router from './router' import Alert from '../src/components/alert/alert.js' Vue.config.productionTip = false Vue.prototype.$Alert = Alert new Vue({ router, render: h => h(App) }).$mount('#app') ~~~ >[danger] ##### 使用它 ~~~ <!-- src/views/alert.vue --> <template> <div> <button @click="handleOpen1">打開提示 1</button> <button @click="handleOpen2">打開提示 2</button> </div> </template> <script> export default { methods: { handleOpen1 () { this.$Alert.info({ content: '我是提示信息 1' }); }, handleOpen2 () { this.$Alert.info({ content: '我是提示信息 2', duration: 3 }); } } } </script> ~~~