uniapp自定义简单弹窗组件

超、凢脫俗 2021-11-02 07:30 881阅读 0赞

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

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

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

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

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

![1157735-20190809134919801-1488347255.gif][]

## 一、写布局 ##

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

<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);
            }
        }
    };

布局：

这样就OK了

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

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

github地址：[https://github.com/steffenx/uniapp\_popup][https_github.com_steffenx_uniapp_popup]

转载于:https://www.cnblogs.com/Steffen-xuan/p/11326866.html

[http_ext.dcloud.net.cn_plugin_id_672]: http://ext.dcloud.net.cn/plugin?id=672
[1157735-20190809134919801-1488347255.gif]: /images/20211102/9b424f1615184e29931ab66faefe9362.png
[https_github.com_steffenx_uniapp_popup]: https://github.com/steffenx/uniapp_popup