- Установить пакет
npm i -D @kazanexpress/frontend-devtools@github:KazanExpress/frontend-devtools
- Подключить компонент и стили
import '@kazanexpress/frontend-devtools/dist/KeDevtools.css';
import KeDevtools from '@kazanexpress/frontend-devtools';
- Использовать
<KeDevtools
:items="devtoolsItems"
local-storage-key="ke-devtools-example"
@change="onChange"
>
<template #item-example-save="{ active }">
<span class="example" :class="{ active: active }">
save local
</span>
</template>
</KeDevtools>
Полный пример использования в ./src/App.vue
types | required | default | |
---|---|---|---|
items | TDevtoolsItem[] | true | |
localStorageKey | string | false | 'ke-devtools' |
name | payload | description |
---|---|---|
change | TChangePayload | Вызывается при каждом клике на элемент панели |
name | description |
---|---|
before | Слот для вставки контента, до панели |
after | Слот для вставки контента, после панели |
activator | Слот для активатора панели, по дефолту есть иконка |
item-{key} | Динамичный слот, формируется из переданного списка элементов. Скоуп: active – состояние активности флага |
export type TDevtoolsItem<T = string> = {
key: T;
saveLocal?: boolean;
};
export type TChangePayload<T = string> = {
key: T;
value: boolean;
};
yarn install
yarn serve
yarn build-bundle
После надо закоммитить изменения и создать новый релиз в гитхабе