插件使用说明

  • action-sheet扩展版,新人第一次尝试,多多理解不足之处

Example

多个场景

<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>

引用action-sheet插件


    import action from "../../components/shufei-action/action.vue"
    export default {
        components:{action},
        data() {
            return {

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

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问