更新记录

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>