首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoyan2017
V2EX  ›  程序员

uni-app 自定义 Alert 对话框组件 uniPop 实例分享

  •  
  •   xiaoyan2017 · 281 天前 · 2522 次点击
    这是一个创建于 281 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天给大家分享一个 基于 uni-app 开发的自定义弹窗|msg 信息框|toast 提示,功能效果类似微信弹窗及 ios 弹窗效果

    uniPop 可以自定义弹窗内容及样式、支持富文本显示,可以自定义多按钮及事件 /弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭,另外支持 android、ios 弹窗形式。

    不多说,上图,H5/小程序 /App 三端效果兼容性一致。(后续大图均展示 App 端)

    引入组件:

    uniPop.vue 弹窗组件两种引入方式:

    1、在 main.js 里引入全局组件

    import uniPop from './components/uniPop/uniPop.vue'

    Vue.component('uni-pop', uniPop)

    2、在页面引入组件

    <template>
        <view class="container">
            ...
            
            <!-- 弹窗模板 -->
            <uni-pop ref="uniPop"></uni-pop>
        </view>
    </template>
     
    <script>
        import uniPop from './components/uniPop/uniPop.vue'
        export default {
            data() {
                return {
                    ...
                }
            },
            components:{
                uniPop
            },
            ...
        }
    </script>
    

    通过 this.$refs.uniPop.show({...}) 调用即可

    自定义模板 template

    /**
      * @tpl        uni-app 自定义弹窗组件 - uniPop.vue
      * @author     andy by 2019-09-20
      * @about      Q:282310962  wx:xy190310
      */
     
    <template>
        <view v-if="opts.isVisible" class="uniPop" :class="opts.isCloseCls">
            <view class="unipop__ui_panel">
                <view v-if="opts.shade" class="unipop__ui_mask" @tap="shadeTaped"></view>
                <view class="unipop__ui_main">
                    <view class="unipop__ui_child" :style="opts.style">
                        <!-- 标题 -->
                        <view v-if="opts.title" class="unipop__ui_tit">{{opts.title}}</view>
                        <!-- 内容 -->
                        <view v-if="opts.content" class="unipop__ui_cnt" :style="opts.contentStyle">
                            {{opts.content}}
                        </view>
                        <view v-if="opts.btns" class="unipop__ui_btns">
                            <text v-for="(item,index) in opts.btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text>
                        </view>
                    </view>
                    <!-- xclose -->
                    <view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view>
                </view>
            </view>
        </view>
    </template>
    

    作者:xiaoyan2015
    链接: https://cloud.tencent.com/developer/column/3374
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    1 条回复    2019-10-01 11:04:41 +08:00
    Shook
        1
    Shook   280 天前
    很不错,感觉能用上
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4652 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 116ms · UTC 02:12 · PVG 10:12 · LAX 19:12 · JFK 22:12
    ♥ Do have faith in what you're doing.