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)

toast组件

模板文件

js部分

confirm组件

模板部分

js部分

猜你喜欢