Vue 开发插件

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_33922672

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c480b85e51d453ba8103e1f

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.'
})复制代码

转载于:https://juejin.im/post/5c480b85e51d453ba8103e1f