更新记录

1.0.0（2024-12-19） 下载此版本

• 首次发布
• 支持手势操作
• 支持 Vue2/Vue3
• 优化动画效果
• 美化箭头样式

平台兼容性

LKL Drawer Panel 抽屉面板

一个简单、美观、易用的抽屉面板组件，支持上拉展开和下拉收起，适用于各种列表、菜单、详情等场景。

特性

• 简单易用 - 开箱即用，配置灵活
• 优雅美观 - 动画流畅，视觉统一
• 功能强大 - 支持手势操作、自定义高度
• 双向绑定 - 支持 v-model，Vue2/Vue3 通用

安装方式

通过 uni_modules 在插件市场导入即可使用。

基本用法

Vue3

<template>
  <lkl-drawer-panel v-model="show" :height="600">
    <view class="content">
      <!-- 你的内容 -->
    </view>
  </lkl-drawer-panel>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Vue2

<template>
  <lkl-drawer-panel v-model="show" :height="600">
    <view class="content">
      <!-- 你的内容 -->
    </view>
  </lkl-drawer-panel>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

API

Props 属性

Events 事件

Slots 插槽

示例展示

Vue3 组合式 API

<template>
  <view>
    <button @tap="show = true">打开面板</button>

    <lkl-drawer-panel v-model="show" :height="600">
      <view class="panel-content">
        <view class="title">标题</view>
        <view class="list">
          <view class="item" v-for="i in 10" :key="i">
            列表项 {{ i }}
          </view>
        </view>
      </view>
    </lkl-drawer-panel>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

<style lang="scss">
.panel-content {
  padding: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .item {
    padding: 20rpx;
    border-bottom: 1px solid #eee;
  }
}
</style>

Vue2 选项式 API

<template>
  <view>
    <button @tap="show = true">打开面板</button>

    <lkl-drawer-panel v-model="show" :height="600">
      <view class="panel-content">
        <view class="title">标题</view>
        <view class="list">
          <view class="item" v-for="i in 10" :key="i">
            列表项 {{ i }}
          </view>
        </view>
      </view>
    </lkl-drawer-panel>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style lang="scss">
.panel-content {
  padding: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .item {
    padding: 20rpx;
    border-bottom: 1px solid #eee;
  }
}
</style>

注意事项

1. 面板高度建议不要超过屏幕高度
2. 内容区域可以使用 scroll-view 实现滚动
3. 建议将复杂的内容组件化，以提高性能
4. Vue2 和 Vue3 的 v-model 实现方式略有不同，请根据实际框架版本选择对应的用法

更新日志

v1.0.0 (2024-12-19)

• 首次发布
• 支持手势操作
• 支持 Vue2/Vue3
• 优化动画效果
• 美化箭头样式

作者

LKL

License

MIT