更新记录

1.0.0(2021-01-07)

摸鱼一天写的bug.....有问题再修


平台兼容性

已实现

  1. 正常手势操作
  2. 方法开关
  3. 显示/隐藏比例自动吸附
  4. 动画
  5. 独立滑动
  6. .....编不出来了 自行测试吧

    使用说明

    和正常组件使用方式一样

    // 1.引入
    import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
    // 2.挂载
    components:{
    exDrawer
    }
    // 3.使用
    <ex-drawer ref='drawer' width="488"> 
    <view class="drawer" slot="drawerContent">
        <button @click="close" type="default">关闭</button>
        drawer
    </view>
    <view class="container" slot="containerContent">
        <button @click="open" type="default">打开</button>
    <view class="" v-for="(item,index) in 100" :key="index">
        {{item}}
    </view>
    </view>
    </ex-drawer>

    具体请查看demo

    props

  7. width(string) // 抽屉宽度
  8. 没了 主容器宽高和抽屉高度都可以被自动撑开 自行设置即可

    插槽

  9. drawerContent // 抽屉插槽
  10. containerContent // 主容器插槽

    方法

  11. this.$refs.drawer.open() //打开
  12. this.$refs.drawer.colse() //关闭

    之后预计更新

  13. 自定义进出吸附比例
  14. 看需求....

    <template>
    <view>
        <ex-drawer ref='drawer' width="488"> 
            <view class="drawer" slot="drawerContent">
                <button @click="close" type="default">关闭</button>
                drawer
            </view>
            <view class="container" slot="containerContent">
                <button @click="open" type="default">打开</button>
                <view class="" v-for="(item,index) in 100" :key="index">
                    {{item}}
                </view>
            </view>
        </ex-drawer>
    </view>
    </template>
    <script>
    import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
    export default {
        data() {
            return {
    
            }
        },
        components:{
            exDrawer
        },
        methods: {
            open(){
                this.$refs.drawer.open()
            },
            close(){
                this.$refs.drawer.close()
            }
        }
    }
    </script>
    <style>
    .drawer{
        background-color: #ffffff;
        height: 100vh;
    }
    .container{
        background-color: #19BE6B;
        width: 750rpx;
    }
    </style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

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

插件不采集任何数据

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

许可协议

MIT协议

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