Slideout

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/dist/slideout.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/dist/slideout.css"/>

<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.css"/>
```> **Unpkg** также доступен: замените *cdn.jsdelivr.net* на *unpkg.com*.
>
> Также вы можете использовать незакомпрессированную версию распакованной дистрибутивной версии, заменив *slideout.umd.min.js* на *slideout.umd.js*.

## Использование

### Глобально (рекомендовано) *main.js*

```javascript
import Vue from 'vue';
import Slideout from '@hyjiacan/vue-slideout';
import '@hyjiacan/vue-slideout/dist/slideout.css';

// импортировать компонент Slideout и установить значения по умолчанию
Vue.use(Slideout, {
  // здесь можно задать значения по умолчанию
});

<template>
  <slideout @closing="onClosing" v-model="visible" title="Заголовок">
    <div>Содержание</div>
  </slideout>
</template>

<script>
import Slideout from '@hyjiacan/vue-slideout';
import '@hyjiacan/vue-slideout/dist/slideout.css';

export default {
  name: 'Foobar',
  components: { Slideout },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    onClosing(e) {
      // предотвратить закрытие и ждать
      e.pause = true;
      // закрыть через 3 секунды
      setTimeout(() => {
        // присвоить true для закрытия, ничего не делать или присвоить false для отмены закрытия
        e.resume = true;
      }, 3000);
    },
  },
};
</script>

yarn
# запустить сервер разработки
yarn serve
# сборка библиотеки
yarn release