npm i @hyjiacan/vue-slideout@3

yarn add @hyjiacan/vue-slideout@3

git clone https://github.com/hyjiacan/vue-slideout.git

<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.umd.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.css"/>

<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.umd.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.css"/>

import Vue from 'vue'import Slideout from '@hyjiacan/vue-slideout'import '@hyjiacan/vue-slideout/lib/slideout.css'// 引入 Slideout 组件，并设置组件默认值Vue.use(Slideout, {  // 在此处填写默认的属性值})

<template>  <slideout @closing="onClosing" v-model="visible" title="The title">    <div>content</div>  </slideout></template><script>import Slideout from '@hyjiacan/vue-slideout'import '@hyjiacan/vue-slideout/lib/slideout.css'export default {  name: 'Foobar',  components: { Slideout },  data () {    return {      visible: false    }  },  methods: {    onClosing (e) {      // 阻止关闭，等待同步或异步的操作      e.pause = true      // 3秒后关闭slide      setTimeout(() => {        // 设置 close 为 true 以关闭，设置为 false 为什么也不做保持打开状态        e.resume = true      }, 3000)    }  }}</script>

yarn# 启动服务器yarn serve# 构建仓库yarn release

<slide-out dock="left" :size="[300, 0]" offset="100px">  <div style="max-height: 540px;overflow: auto">    <!-- contents -->  </div></slide-out>