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