uniapp自定义简单弹窗组件

2.0(2019-08-31)

船新版本的信息弹窗组件

插件市场地址：http://ext.dcloud.net.cn/plugin?id=672

可以弹出很多条信息，并单独控制消失时间、点击消失。

 

用循环来生成很多个弹窗，用this.$refs来传值，并添加数组。

 

1.布局

 

<view class="popup_list">
        <view v-for="(items,index) of popup_list" :id="items.uuid" :key="items.uuid" >
            <view class="mpopup" :style="{ background: items.color ,top:index*distance+50+'px'}" :class="[items.animator,items.typeClass]" @click="remove_popup(index)">
                <view class="pic"><image class="icon" mode="aspectFit" :src="items.icon"></image></view>
                <text class="text" :style="{ color: items.colortext }">{{ items.content }}</text>
            </view>
        </view>
    </view>

 

2.js

具体流程。需要一个弹窗，基本信息传入组件，处理后添加入数组，显示弹窗，过几秒消失，从数组移除元素。

methods:{
　　　　　　　//初始化一些数据
            init:function(list){
                if (list.type == 'success') {
                    list.icon = '../../static/xuan-popup/success.png';
                    list.typeClass='mpopup-success';
                    return list;
                }
                if (list.type == 'warn') {
                    list.icon = '../../static/xuan-popup/warn.png';
                    list.typeClass='mpopup-warn';
                    return list;
                }
                if (list.type == 'info') {
                    list.icon = '../../static/xuan-popup/info.png';
                    list.typeClass='mpopup-info';
                    return list;
                }
                if (list.type == 'err') {
                    list.icon = '../../static/xuan-popup/err.png';
                    list.typeClass='mpopup-err';
                    return list;
                }
            },
            open:function(list){
                if(!this.isdistance){this.distance=0}
                let uuid=this.guid();
                //初始化
                let new_list=this.init(list);    
                new_list.uuid=uuid;
                //添加进数组
                this.popup_list.push(new_list);
                if(typeof(new_list.isClick)!='boolean'){new_list.isClick=false;}
                //可消失
                if(!new_list.isClick){
                    this.close(uuid,new_list.timeout);
                }
                
            },
            close:function(uuid,timeout){
                //退出动画之后，短暂延迟后移除本元素
                this.fade_out_animator(uuid,timeout).then(res=>{
                    setTimeout(()=>{
                        for(let i=0;i<this.popup_list.length;i++){
                            if(this.popup_list[i].uuid==res){
                                //移除本元素
                                this.popup_list.splice(i,1);
                                this.$forceUpdate()
                            }
                        }
                    },250)
                });
            },
            fade_out_animator:function(uuid,timeout){
                //timeout秒后退出
                if(!timeout||typeof(timeout)!='number'){timeout=3000;}
                return new Promise(res=>{
                    setTimeout(()=>{
                        for(let i=0;i<this.popup_list.length;i++){
                            if(this.popup_list[i].uuid==uuid){
                                //添加退出动画
                                this.popup_list[i].animator='fade_Top';
                                res(uuid);
                            }
                        }
                    },timeout)
                })
            },
            //可点击关闭的弹出框
            remove_popup:function(target){
                console.log(target)
                if(this.popup_list[target].isClick){
                    this.popup_list[target].animator='fade_Top';
                    setTimeout(()=>{
                        this.popup_list.splice(target,1);
                        this.$forceUpdate();
                    },250)
                }
            },
            //生成uuid
            guid:function() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                    return v.toString(16);
                });
            }
        }

3.用法

　　import mpopup from '../../components/xuan-popup/xuan-popup.vue'
    import Popup from '../../components/xuan-popup/popup.js'
    export default {
        components:{
            mpopup
        },
        data() {
            return {
                title: 'Hello'
            }
        },
        methods: {
            //  *数组形式传值
            //  *type,类型 success warn info err（string）
            //  *content,内容（string）
            //  *timeout,消失时间（Number）
            //  *isClick,是否点击消失（Boolean）
            pop:function(){
                this.$refs.mpopup.open(Popup.setPopup('success','我可以',false));
            },
            popp:function(){
                this.$refs.mpopup.open(Popup.setPopup('err','错误',false));        
            },
            poppp:function(){
                this.$refs.mpopup.open(Popup.setPopup('warn','警告',1000,false));        
            },
            popppp:function(){
　　　　　　　　　　//需要点击消失时，消失时间填0就好
                this.$refs.mpopup.open(Popup.setPopup('info','信息',0,true));    
            }
        }
    }

 

1.0(2019-08-09)

前面写android混编学到了很多，没有时间全部积累起来，后面会慢慢记录的。

最近很久没有记录了，因为一个新的uniapp的项目。最近在做这个。

看了智慧团建上的弹窗很喜欢，我也要整一套（简易版）

今天兴致大发居然布了插件：http://ext.dcloud.net.cn/plugin?id=672

很简单的组件化，我们来看一看吧

一、写布局

一个大容器一张图片一个文本

<view class="content">
        <view v-show="isshow" :style="{ background: color }" v-bind:class="[activeClass,animator]">
            <view class="pic"><image class="icon" mode="aspectFit" :src="icon"></image></view>
            <text class="text" :style="{ color: colortext }">{{ content }}</text>
        </view>
    </view>

css就不贴上来了，看的眼花。可以下载来看。

二、js

定义一些属性，用来决定弹什么样的窗口，显示一些什么内容

export default{
        data() {
            return {
                icon: '',//图标
                content: '',//内容
                color: '',//背景颜色
                colortext: '',//文本颜色
                coloricon: '',//图标颜色
                isshow: false,//是否显示
                activeClass:'mpopup',//class
                animator:'fade_Down'//动画class
            };
        },
        //属性
        props: {
            //什么类型的弹窗
            types: {
                type: String,
                value: 'success'
            },
            //弹窗的内容
            span: {
                type: String,
                value: '这是一个土司'
            },
            //是否显示
            show: {
                type: String,
                value: ''
            }
        },
        computed: {
            newshow() {
                return this.show;
            }
        },
        watch: {
            //监听属性传入的值的变化
            newshow(val) {
                if (val == 'true') {
                    this.open();//显示弹窗
                } else {
                    this.close();//隐藏弹窗
                }
            }
        },
        onLoad() {},
        methods: {
            init: function() {
                this.content = this.span;
                //成功类型
                if (this.types == 'success') {
                    this.icon = '../../static/images/success.png';
                    this.color = '#F0F9EB';
                    this.colortext = '#67C23A';
                    this.coloricon = '#67C23A';
                }
                //警告类型
                if (this.types == 'warn') {
                    this.icon = '../../static/images/warn.png';
                    this.color = '#FDF6EC';
                    this.colortext = '#E6A23C';
                    this.coloricon = '#E6A23C';
                }
                //信息类型
                if (this.types == 'info') {
                    this.icon = '../../static/images/info.png';
                    this.color = '#EDF2FC';
                    this.colortext = '#909399';
                    this.coloricon = '#909399';
                }
                //错误类型
                if (this.types == 'err') {
                    this.icon = '../../static/images/err.png';
                    this.color = '#FEF0F0';
                    this.colortext = '#F56C6C';
                    this.coloricon = '#F56C6C';
                }
            },
            open: function() {
                this.animator='fade_Down';//进入动画
                this.init();
                this.isshow = true;
            },
            close: function() {
                this.animator='fade_Top';//退出动画
            
            }
        }
    }

好了我们来看看怎么使用

三、使用

在需要用到的界面引入组件或者全局引入都可以

有三个属性我们需要用js来控制，每次赋值太繁琐

所以就写了个方法，每次调用就好

export default{
    /*
    *设置弹出框 
    * type:类型  span ：内容 second：几秒消失
    */
    setPopup:function(_this,types,span,second){
        if(_this.ispop!="true"){
            _this.types=types;
            _this.span=span;
            _this.ispop="true";
            setTimeout(()=>{
                _this.ispop="false";
            },second)
        }
    }
}

引入刚才的两个js

import Popup from '@/static/js/popup.js';

import mpopup from '../../components/popup/popup.vue';

export default {
    data() {
        return {
            ispop:"",//是否显示弹窗
            types:"err",//弹窗类型
            span:"这是一个土司",//弹窗内容
            poptime:2000
        };
    },
    components:{
        mpopup
    },
    onLoad() {},
    methods: {
        pop:function(){
            Popup.setPopup(this,"success","hello,哈喽",this.poptime);
        },
        popp:function(){
            Popup.setPopup(this,"err","hello,哈喽",this.poptime);
        },
        poppp:function(){
            Popup.setPopup(this,"warn","hello,哈喽",this.poptime);
        },
        popppp:function(){
            Popup.setPopup(this,"info","hello,哈喽",this.poptime);
        }
    }
};

 布局：

    <view>
        <view class="btn">
            <button @click="pop()">成功</button>
            <button @click="popp()">失败</button>
            <button @click="poppp()">警告</button>
            <button @click="popppp()">信息</button>
        </view>
        <mpopup :show="ispop" :types="types" :span="span"></mpopup>    
    </view>

这样就OK了

当时思路就是用属性来控制弹窗，组件就监听传来的属性值的变化做出改变。

用class来控制弹窗的进入和退出动画

github地址：https://github.com/steffenx/uniapp_popup