- Войти в nexus
нужно выполнить npx npm-cli-login как в документации, чтобы потом установить этот пакет
- Установить пакет
npm i -D @market-tech/frontend-devtools - Подключить компонент и стили
import '@kazanexpress/frontend-devtools/dist/KeDevtools.css'; import KeDevtools from '@kazanexpress/frontend-devtools'; - Использовать
<KeDevtools :items="devtoolsItems" local-storage-key="ke-devtools-example" @init="onInit" @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 | Вызывается при каждом клике на элемент панели |
| init | string[] | Вызывается при mounted компонента, передавая все активные флаги |
| name | description |
|---|---|
| before | Слот для вставки контента, до панели |
| after | Слот для вставки контента, после панели |
| activator | Слот для активатора панели, по дефолту есть иконка |
| item-{key} | Динамичный слот, формируется из переданного списка элементов. Скоуп: active – состояние активности флага |
export type TDevtoolsItem<T = string> = { key: T; saveLocal?: boolean; // default true defaultActive?: boolean; // default false }; export type TChangePayload<T = string> = { key: T; value: boolean; };yarn install yarn serve yarn build-bundle После надо закоммитить изменения и создать новый релиз в гитхабе