关注前端 | 前端博客
当前位置: uni-app > actionSheet插件-uniApp

actionSheet插件-uniApp

2019-06-06 分类:uni-app 作者:管理员 阅读(2071)

uni-app官方同样提供了这个action-sheet内置组件,但是提供的api却不多,很多时候不能满足我们的需求,别无他法,自己扩展一个吧!

插件代码

<template>
    <view class="content">
        <view
            class="popup"
            :class="actionConfig.specClass"
            @touchmove.stop.prevent="stopPrevent"
            @click="toggleSpec"
        >
            <!-- 遮罩层 -->
            <view class="mask"></view>
            <view class="layer attr-content" @click.stop="stopPrevent">
                <!-- 内容区域 -->
                <view class="action-title"
                v-if="!!actionConfig.title.length"
                @click="titleClick(actionConfig.type)"
                :style='{"border-bottom-color":actionConfig.isBorderColor?"#EBEBEB":"#fff","color":actionConfig.titleColor}'
                >{{actionConfig.title}}</view>
                <view class="action-summary" v-if="!!actionConfig.summary.length"><view class="summary-center">{{actionConfig.summary}}</view></view>
                <view class="action-list">
                    <view class="action-item"  v-for="(item,index) of actionConfig.list" :key="index" @click="itemClick(index,actionConfig.type)" >
                        <view v-if='!!item.length'>{{item}}</view>
                        <view v-else :style='{"color":item.color,"background":item.background?item.background:"#fff"}'>{{item.title}}</view>
                    </view>
                </view>
                <view class="cancel" @click="cancelClick" v-if="!actionConfig.isCloseCancel" :style="{color:actionConfig.cancelColor}">取消</view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
               
                actionConfig:{
                    title:'',
                    summary:'',
                    list:[],
                    type:null,
                    isCloseCancel:false,
                    cancelColor:"#333333",
                    isBorderColor:false,
                    titleColor:"#333333",
                    specClass: 'none',
                }
            }
        },
        methods: {
            toggleSpec() {
                if(this.actionConfig.specClass === 'show'){
                    this.actionConfig.specClass = 'hide';
                    setTimeout(() => {
                        this.actionConfig.specClass = 'none';
                    }, 250);
                }else if(this.actionConfig.specClass === 'none'){
                    this.actionConfig.specClass = 'show';
                }
            },
            stopPrevent(){},
            itemClick(index,type){
                this.$emit("itemClick",index,type)
                this.toggleSpec()
            },
            cancelClick(){
                this.toggleSpec()
            },
            titleClick(type){
                this.$emit("titleClick",type)
                this.toggleSpec()
            }
        }
    }
</script>
<style lang="less" scoped>
    .popup {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
       
        &amp;.show {
            display: block;
            .mask{
                animation: showPopup 0.2s linear both;
            }
            .layer {
                animation: showLayer 0.2s linear both;
            }
        }
        &amp;.hide {
            .mask{
                animation: hidePopup 0.2s linear both;
            }
            .layer {
                animation: hideLayer 0.2s linear both;
            }
        }
        &amp;.none {
            display: none;
        }
        .mask{
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .layer {
            position: fixed;
            z-index: 99;
            bottom: 0;
            width: 100%;
            background-color: #F7F7F7;
           .action-title{
                height: 88upx;
                line-height: 88upx;
                text-align: center;
                color: #333;
               background-color: #fff;
               border-bottom-width: 2upx;
                border-bottom-style: solid;
            }
            .action-summary{
                text-align: center;
                color: #888;
               background-color: #fff;
               box-sizing: border-box;
                padding:  30upx 72upx;
                display: flex;
                justify-content: center;
                align-items: center;
               
                .summary-center{
                    font-size: 28upx;
                    color: #666666;
               }
            }
            .action-list{
                background-color: #fff;
               .action-item{
                    height: 88upx;
                    line-height: 88upx;
                    text-align: center;
                    color: #333;
                   border-top: 2upx solid #EBEBEB;
               }
            }
            .cancel{
                height: 88upx;
                line-height: 88upx;
                text-align: center;
                color: #333;
               background-color: #fff;
               margin-top: 12upx;
            }
        }
        @keyframes showPopup {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes hidePopup {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes showLayer {
            0% {
                transform: translateY(120%);
            }
            100% {
                transform: translateY(0%);
            }
        }
        @keyframes hideLayer {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(120%);
            }
        }
    }
</style>

插件使用

<template>
    <view class="content">
        <button type="primary" @click="openType0">开启type=0的actionSheet</button>
        <button type="primary" @click="openType1">开启type=1的actionSheet</button>
        <button type="primary" @click="openType2">开启type=2的actionSheet</button>
        <button type="primary" @click="openType3">开启type=3的actionSheet</button>
        <button type="primary" @click="openType4">开启type=4的actionSheet</button>
        <button type="primary" @click="openType5">开启type=5的actionSheet</button>
        <button type="primary" @click="openType6">开启type=6的actionSheet</button>
        <button type="primary" @click="openType7">开启type=7的actionSheet</button>
        <action ref="action" @itemClick="itemClick" @titleClick="titleClick"></action>
    </view>
</template>
<script>
    import action from "../../components/action/action-sheet.vue"
    export default {
        components:{action},
        data() {
            return {
   
   
            }
        },
        onLoad() {
 
 
        },
        methods: {
            openType0(){
                this.$refs.action.actionConfig={
                    title:'取消订单',
                    summary:'请选择取消订单原因',
                    list:['我不想买了','信息填写错误,重新拍','其他原因'],
                    type:0,
                    isBorderColor:false,
                    specClass: 'show',
                }
            },
            openType1(){
                this.$refs.action.actionConfig={
                    title:'退款',
                    summary:'订单支付已超过30分钟原则上不能退款,如有疑问请联系客服',
                    type:1,
                    cancelColor:"#FF3D45",
                    isBorderColor:true,
                    specClass: 'show',
                }
            },
            openType2(){
                this.$refs.action.actionConfig={
                    title:'收货',
                    titleColor:"#FF3D45",
                    type:2,
                    specClass: 'show',
                }
            },
            openType3(){
                this.$refs.action.actionConfig={
                    list:[{title:'收货',color:'#FF3D45'}],
                    type:2,
                    specClass: 'show',
                }
            },
            openType4(){
                this.$refs.action.actionConfig={
                    summary:'选择你最喜爱的水果吧!多吃水果对身体好,可以补充大量的维生素哟!',
                    list:[{title:'葡萄',color:'#9865e2'},{title:'香蕉',color:'#ffb332'},{title:'苹果',color:'#ff0000'}],
                    type:3,
                    specClass: 'show',
                }
            },
            openType5(){
                this.$refs.action.actionConfig={
                    list:[{title:'葡萄',color:'#9865e2'},{title:'香蕉',color:'#ffb332'},{title:'苹果',color:'#ff0000'}],
                    type:4,
                    isCloseCancel:true,
                    specClass: 'show',
                }
            },
            openType6(){
                this.$refs.action.actionConfig={
                    list:['葡萄','香蕉','苹果'],
                    type:5,
                    isCloseCancel:true,
                    specClass: 'show',
                }
            },
            openType7(){
                this.$refs.action.actionConfig={
                    list:[{title:'葡萄',color:'#9865e2',background:"#BEE7E9"},{title:'香蕉',color:'#ffb332',background:"#A0EEE1"},{title:'苹果',color:'#ff0000'}],
                    type:6,
                    isCloseCancel:true,
                    specClass: 'show',
                }
            },
            itemClick(index,type){
                //这里根据不同的类型点击的索引值,做对应的逻辑处理
                console.log(`你点击的action-sheet的类型是${type},list对应的索引值是${index}`)
            },
            titleClick(type){
                //这里根据不同的类型做对应的逻辑处理
                console.log(type)
            }
        }
    }
</script>
<style lang="less" scoped></style>

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(4) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
4

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - actionSheet插件-uniApp

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线