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

很簡單的組件化，咱們來看一看吧

1、寫佈局

一個大容器一張圖片一個文本

<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就不貼上來了，看的眼花。能夠下載來看。

2、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';//退出動畫
            
            }
        }
    }

好了咱們來看看怎麼使用

3、使用

在須要用到的界面引入組件或者全局引入均可以

有三個屬性咱們須要用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