Vue2FloatPanel

介绍

浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。

引入

import Vue from 'vue'
import Vue2FloatPanel from 'vue2-float-panel'
Vue.component(Vue2FloatPanel.name, Vue2FloatPanel)

使用示例

基本使用

通过组件级的 css variable 自定义面板的初始高度、最终高度、拖动过渡时间、初始过渡时间

<template>
  <vue2-float-panel @moveToBottom="moveToBottom" @moveToTop="moveToTop">
    <div class="overflow">
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
      <div>我是例子1</div>
    </div>
  </vue2-float-panel>
</template>

<script lang="js">
  import Vue2FloatPanel from 'vue2-float-panel'

    export default {
      name: 'Demo1',
      components: {
        Vue2FloatPanel,
      },
      methods:{
        moveToBottom(){
          console.log('我到达了底部~')
        },
        moveToTop(){
          console.log('我到达了顶部~')
        }
      }
    }
</script>

<style lang="scss" scoped>
  .overflow {
    height: 100%;
    overflow: auto;
  }

  ::v-deep {
    .float-panel__container {
      /* 初始高度 */
      --float-panel-start-height: 200px;
      /* 最终高度 */
      --float-panel-end-height: 600px;
      /* 初始过渡时间，用于命令打开面板过渡 */
      --float-panel-init-duration: 0.5s;
      /* 拖动过渡时间，用于手动打开面板过渡 */
      --float-panel-touch-duration: 0.1s;
    }
  }
</style>

命令式打开面板

调用组件实例的openPanel方法手动打开面板，可通过--float-panel-init-duration css 变量定义过渡动画的时间

<template>
  <div class="float-panel-example">
    <button @click="openPanel">打开面板</button>
    <vue2-float-panel ref="panel" :overlay="true"> 我是例子2 </vue2-float-panel>
  </div>
</template>

<script lang="js">
  import Vue2FloatPanel from 'vue2-float-panel'

  export default {
    name: 'Demo2',
    components: {
      Vue2FloatPanel,
    },
    methods:{
      openPanel(){
        this.$refs.panel.openPanel()
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .float-panel__container {
      --float-panel-start-height: 300px;
      --float-panel-end-height: 1000px;
    }
  }
</style>

API

属性

属性	是否必选	说明	类型	默认值
overlay	否	是否展示遮罩层	Boolean	false
closeOnClickOverlay	否	是否在点击遮罩层后关闭面板	Boolean	true

事件

事件名	说明	参数
moveToBottom	到达底部	无
moveToTop	到达顶部	无

主题定制

变量	说明	默认值
--float-panel-start-height	初始高度	200px
--float-panel-end-height	最终高度	600px
--float-panel-init-duration	初始过渡时间，用于命令打开面板过渡	0.5s
--float-panel-touch-duration	拖动过渡时间，用于手动打开面板过渡	0.1s