徐向博 / Imin.

Vue extend 自定义组件笔记
作者:Imin 时间:2019-10-17 分类: 前端

一直依赖都在用element-ui,过分依赖别人造的轮子,用起来着实舒服。但是似懂非懂的状态,遇到点问题直接憋出内伤!!!学习一下extend,搞一个全局的提示组件,做好笔记,防止以后用得到的时候犯傻!

components目录下新建message文件夹,如下:

components-
    -- message/
        -- message.vue
        -- index.js

message.vue文件:

<template>
    <transition v-if="show">
        <div class="app_message">
            <div class="tip" v-if="type == 'tip'">
                <span>{{message}}</span>
            </div>
            <div class="message" v-if="type != 'tip'">
                <i class="mshome" :class="icon"></i>
                <p>{{message}}}</p>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    data (){
        return {
            show: false,
            type: 'tip', // tip = 轻提示,success = 成功,error = 错误,warn = 警告
            icon: '',
            message: ''
        }
    },
    mounted (){
        let that = this;
        let timer = setTimeout( ()=>{
            that.show = false;
        }, 2000)
    }
}
</script>

<style lang="less" scoped>
    .app_message{
        width: 100%;
        position: fixed;
        top: 25%;
        z-index: 9999;
        text-align: center;
        .tip{
            display: inline;
            font-size: 1.4rem;
            background: rgba(0, 0, 0, 0.7);
            padding: 0.7rem 4rem;
            border-radius: 0.3rem;
            span{
                color: #FFFFFF;
            }
        }
    }
</style>

index.js文件:

import Vue from 'vue'
import message from './message.vue'

// 初始化
const MessageTemplate = Vue.extend(message);

const messageItem = (options = {}) => {
    options.show = true;
    
    // 创建实例
    const vm = new MessageTemplate({
        data: options // 这个data = 组件里的data
    })

    // 挂载到 $mount
    vm.$mount()

    // 输出到body里
    document.body.appendChild(vm.$el)
    
    return vm
}

export default messageItem

然后,在vue入口main.js里面引入并挂载message:

import message from './components/message/index.js'
Vue.prototype.$message = message

完成以后,就可以在全局调用message组件,:

this.$message({
    message: 'ss',
})

本文标签: vue extend

ChinaCreditReport: 收藏了 2020-06-17 16:50
今日头条新闻: 文章非常好超喜欢 2020-02-24 17:59
外星人商城: 留个脚印,博主写的不错  我收藏一下 2020-02-16 23:23
庞同学: 少年,请加油 2020-01-27 21:04
安贝乐育婴网: 写的好,有没有jp挂件 2019-12-30 15:31