更新记录

0.0.2（2020-04-29） 下载此版本

修复 编译导致v-if里面的长度 length 判断失效的 问题

平台兼容性

action-sheet

插件说明：

底部弹出层，常用于商城单页面，需要多个不同的弹出层，来实现自己的业务逻辑

使用示例：

单个页面需要多个action实例示例

<template>
    <view class="content">
        <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" @cancelClick="cancelClick"></action>
            </view>
        </template>
    </view>
</template>

<script>
    // 导入插件  请注意你的插件路径和插件名字是否正确
    import action from "../../components/action/action.vue"
        export default {
            //注册插件
            components:{action},
            data() {
                return {

                }
            },
            methods: {
                openType0(){
                    this.$refs.action.actionConfig={
                        title:'取消订单',
                        // title:{title:'取消订单',fontSize:'30px'},
                        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",fontSize:'20px'},{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)
                },
                cancelClick(type){
                    //点击取消
                    console.log(`点击取消 type为：${type}`)
                }
            }
        }
</script>