vue组件编写

toast组件

模板文件

<template><transition name="bounce">    <div class="toast" :class="{'hidden': !visiable}">        <i class="message">{{message}}</i>        <i class="icon icon-tuichu" @click="closeToast"></i>    </div></transition></template><script>    export default {        data () {            return {                message: '提示消息',                visiable: true            }        },        methods:{            closeToast: function () {                this.close();            }        }    }</script><style scoped lang="less">    @import url("../../assets/css/variable.less");    @import url("../../assets/css/public.less");    .toast{        &{            position: fixed;            top: 50%;            left: 50%;            transform: translate(-50%);            .transition(@property: opacity;@duration: .3s);            display: table-cell;            border-radius: 5px;            padding: 20px;            min-width: 120px;            min-height: 60px;            line-height: 60px;            text-align:center;            background: rgba(0, 0, 0, 0.5);            color: @color;        }        &:hover .icon-tuichu{            display: inline-block;        }        .icon-tuichu{            position: absolute;            display: none;            right: 8px;            top: 8px;            height: 16px;            line-height: 16px;            margin: 0;        }    }    .hidden {        transform: scale(0);        opacity: 0;    }</style>

js部分

//引用模板文件import Toast from '@/components/utils/toast.vue';//新建一个对象，用来保存实例var plugin = {}//删除dom元素let removeDom = event => {    event.target.parentNode.removeChild(event.target);}plugin.install = function (Vue, options = {}) {    const ToastController = Vue.extend(Toast);    // 实现toast的关闭方法    ToastController.prototype.close = function () {        this.visiable = false;        this.$el.addEventListener('transitionend', removeDom);    }    // 在Vue的原型上实现toast的挂在以及功能实现    // 用户可以再Vue实例通过this.$Toast来访问以下的内容    Vue.prototype.$toast = (option = {}) => {        //toast实例挂在到刚创建的Div        var instance = new ToastController().$mount(document.createElement('div'));        let duration = option.duration || options.duration || 2500;        // 如果用户在Vue实例中没有设置option的属性message，则直接将option的内容作为message的信息进行toast内容展示        instance.message = typeof option === 'string' ? option : options.message;        // 将toast挂在到DOM上        document.body.appendChild(instance.$el);        //实现自动关闭        setTimeout(function () {            instance.close();        }, duration)    }}export default plugin;//然后在main.js文件引用import Toast from '@/assets/js/Toast'Vue.use(Toast)//使用this.$toast(option)//option 可以是文本-> 为提示内容，//option是对象的时候：    option.message: 显示的文本内容    option.duration: 显示的时间数，毫秒

confirm组件

模板部分

<template>    <!-- <transition name="bounce"> -->        <div class="confirm" :class="{'hidden': !visible}" :style="{'width': width}">            <div class="bg"></div>            <!-- <div class="container" :style="{width: width}"> -->                <div class="header">{{title}}                    <i @click="close" class="icon icon-tuichu"></i>                </div>                <div class="content">                    <slot name="content">{{content}}</slot>                </div>                <div class="footer" slot="footer">                        <a href="javscript:void(0)" class="btn btn-tint" @click="confirm">确定</a>                        <a href="javscript:void(0)" class="btn btn-gray" @click="close" v-if="showCancelBtn">取消</a>                </div>            </div>        </div>    <!-- </transition> --></template><script type="text/javascript">    /*    * 使用模板的方式调用    * 1.引用模板 import vConfirm from './../utils/confirm.vue'    * 2.注册模板 compontents:{vConfirm}    * 3.页面标签调用     *<v-confirm :visible="show" @cancel="cancel" @confirm="confirm" :showCancelBtn="false">    *   这里是我们可以传入自定义的内容    *   <span slot="content">测试confirm</span>    *</v-confirm>    *4.传参和默认值：     *   visible: 布尔值，默认为false，模态框是否显示    *   width: 模态框的宽度，默认为'260px',//传入字符串样式-> '260px'     *   showCancelBtn: 布尔值，默认为true， 是否显示关闭按钮    *   @cancel:用户点击关闭按钮调用的函数    *   @confirm：用户点击确认按钮触发的函数    *   @content: 文本，没有主题的时候可以使一句话    *        *      */    export default {          name: 'confirm',          props: {            width: {              type: String,              default: '260px'            },            title: {              type: String,              default: '信息'            },            content: {              type: String,              default: '内容呀'            },            visible: {              type: Boolean,              default: true            },            closeVisible: {              type: Boolean,              default: false            },            showCancelBtn:{                type: Boolean,                default: true            }          },          data () {            return {            }          },          methods: {            close () {            // 这个事件在使用模板调用的时候调用              this.$emit('cancel', false)              // 这个事件是通过this.$comfirm调用的时候调用              this.closeConfirm && this.closeConfirm()            },            confirm(){                // 这个事件在使用模板调用的时候调用                this.$emit('confirm', false)                // 这个事件是通过this.$comfirm调用的时候调用                this.submitConfirm && this.submitConfirm()            }          }    }</script><style scoped lang="less">    @import url("../../assets/css/variable.less");    @import url("../../assets/css/public.less");    .confirm{        &{            .transition(@property: opacity, transform;);            position: fixed;            left:50%;            top: 50%;            transform:translate(-50%,-50%) scale(1);            z-index:9999;            display: inline-block;            .border(@color: @border-color);            background: @color;        }        .header{            height: 40px;            color: @color;            line-height: 40px;            padding: 0 10px;            background: @main-tint-bg;        }        .content{            color: @color-1;            padding: 20px;            line-height: 26px;            text-align: center;        }        .footer{            .border-top(@color: @border-color);            text-align:center;            padding: 10px 0;            .btn{                border: none;            }        }    }    .hidden {        transform: scale(0);        opacity: 0;    }</style>

js部分

/** 1.使用this.$confirm(optoion) 的方式调用* 2.传参和默认值：optoion={} *   width: 模态框的宽度，默认为'260px',//传入字符串样式-> '260px' *   showCancelBtn: 布尔值，默认为true， 是否显示关闭按钮*   cancel:用户点击关闭按钮调用的函数*   confirm：用户点击确认按钮触发的函数*   content：显示的文本内容*  */import Confirm from '@/components/utils/confirm.vue';let plugin = {};//删除dom元素let removeDom = event => {    event.target.parentNode.removeChild(event.target);}plugin.install = function (Vue) {    const ConfirmConstructor = Vue.extend(Confirm);    // 在原型上实现close方法    ConfirmConstructor.prototype.closeConfirm = function () {        this.visible = false;        this.$el.addEventListener('transitionend', removeDom);    }    // 在原型上扩展确认方法    ConfirmConstructor.prototype.submitConfirm = function () {        this.visible = false;        this.$el.addEventListener('transitionend', removeDom);        this.confirmFn && this.confirmFn();    }    Vue.prototype.$confirm = function (option = {}){        // 将confirm实例挂载到dom上        var instance = new ConfirmConstructor().$mount(document.createElement('div'));        // 初始化参数        instance.width = option.width || '260px';        instance.visiable = true;        instance.content = option.content || '我是confirm内容';        instance.showCancelBtn = option.showCancelBtn !== undefined ? option.showCancelBtn : true;        instance.confirmFn = option.confirm ||  null;        //把元素添加到页面        document.body.appendChild(instance.$el);    } }export default plugin;//在main.js 引用，然后就可以再全局调用import Confirm from '@/assets/js/confirm'Vue.use(Confirm)