Vue 開發插件

Vue.js 的插件有一個公開方法 install，這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象。

Dialog.vue

<template>  
    <div class="help-dialog">        
        <v-dialog v-model="dialog" width="500">            
            <v-card>                
                <v-card-title class="headline lighten-2" primary-title>{{ title }}</v-card-title>                
                    <v-card-text>{{ content }}</v-card-text>                
                    <v-divider></v-divider>                
                    <v-card-actions>                    
                        <v-spacer></v-spacer>                    
                        <v-btn flat color="primary">{{ activatorTxt }}</v-btn>                    
                        <v-spacer></v-spacer>                
                    </v-card-actions>            
            </v-card>        
        </v-dialog>  
    </div>
</template>

<script>
    export default {        
        name: 'HelpDialog',        
        data () {            
            return {                
                dialog: false,                
                title: 'Tips',                
                content: 'Here is the content.',                
                activatorTxt: 'confirm'            
            }        
        }    
    }
</script>複製代碼

index.js

import HelpDialogComponent from './HelpDialog'
const HelpDialog = {    
    install(Vue) {        
        const HelpDialogConstructor = Vue.extend(HelpDialogComponent)        
        const instance = new HelpDialogConstructor()
        instance.$mount(document.createElement('div'))        
        document.body.append(instance.$el)
        Vue.prototype.$helpDialog = function(params = { title: 'Tips', content: 'Here is the content.' }) {            
                instance.dialog = true            
                instance.title = params.title            
                instance.content = params.content            
                instance.activatorTxt = '確認'        
            }    
    }
}
export default HelpDialog複製代碼

main.js 

import Vue from 'vue'
import HelpDialog from '@/components/index'Vue.use(HelpDialog)複製代碼

usage

Vue.prototype.$helpDialog({    
    title: 'Tips',    
    content: 'Here is the content.'
})複製代碼