Vue.js的可滑动底部表格组件 - vue-bottom-sheet

Vue.js的可滑动底部表格组件 - vue-bottom-sheet
插件名称 vue-bottom-sheet
版本号 v1.2.2
发布时间 2021年1月31日
插件作者 webzlodimir

一个基于Vue.js和Hammer.js的干净,易于触摸的底层组件。

安装和下载:

# Yarn
$ yarn add @webzlodimir/vue-bottom-sheet

# NPM
$ npm i @webzlodimir/vue-bottom-sheet

如何使用它:

1.导入底部工作表组件。

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";

2.注册组件。

export default {
  components: {
    VueBottomSheet
  }
}

// or
Vue.use(VueBottomSheet);

3.将底部工作表组件添加到应用程序模板。

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <h1>My Bottom Sheet</h1>
    ... more content here ...
  </vue-bottom-sheet>
</template>
export default {
  components: {
    VueBottomSheet
  },
  methods: {
    open() {
      this.$refs.myBottomSheet.open();
    },
    close() {
      this.$refs.myBottomSheet.close();
    }
  }
}

4.可能的自定义底页的道具。

// 有或没有背景覆盖
overlay: {
  type: Boolean,
  default: true
},
// 底板最大宽度
maxWidth: {
  type: Number,
  default: 640
}

变更日志:

v1.2.2 (06/01/2021)

  • 修复 beforeDestroy 钩子错误

v1.2.1 (05/13/2021)

  • 添加内容移动和重构

v1.2.0(03/08/2021)

  • 完整的返工构建系统

v1.1.9(03/04/2021)

  • 一些小变化

v1.1.8(02/09/2021)

  • 添加圆形道具

v1.1.7(02/08/2021)

  • 添加已关闭和已打开的事件

v1.1.6(02/03/2021)

  • 修复滑动时溢出

v1.1.4(02/03/2021)

  • 修正动态内容计算

01/31/2021

  • 添加一些卡片效果

2021年1月29日

  • 修复背景clientHeight计算,添加点击关闭道具