Компонент для работы с dadata для vue 3
npm install vue-dadata-3Компонент для работы с сервисом dadata
``
npm install vue-dadata-3
`
`
yarn add vue-dadata-3
`
`
import { ref } from 'vue';
import { DaDataNext } from 'vue-dadata-3'
const value = ref(null);
`
или
`
import DaDataNext from 'vue-dadata-3';
createApp(App).use(DaDataNext, {
tag: 'ИМЯ КОМПОНЕНТА. По умолчанию da-data-next',
token: 'ВАШ ТОКЕН',
}).mount('#app');
`
Можно импортировать composable и использовать в своем компоненте:
`
import { useDaData } from 'vue-dadata-3';
`
Установив токен глобально далее его можно будет переопределить через пропсы.
Стилизация согласно новому стандарту sass.
Доступные переменные:
`
$dadata_v_3_base_font_size: 16px!default;
$dadata_v_3_input_width: 280px!default;
$dadata_v_3_input_height: 40px!default;
$dadata_v_3_borders_color: #797979!default;
$dadata_v_3_list_bg_color: #fff!default;
$dadata_v_3_list_font_size: 14px!default;
$dadata_v_3_row_hover: #a8a8a8!default;
`
Переопределяем переменные следующим образом:
`
@use "vue-dadata-3/styles" with (
$dadata_v_3_base_font_size: 14px;
);
`
Или можно подключить готовый css, например в main.js
`
import "vue-dadata-3/index.css";
`
`
{
modelValue: {
type: String,
required: true
},
token: {
type: String,
default: null,
},
type: {
type: String,
default: 'address',
},
setInputValue: {
type: Function as PropType<(item: DaDataSuggestionAnyType) => string>,
},
apiUrl: {
type: String,
default: null,
},
inputName: {
type: String,
default: 'address',
},
inputId: {
type: String,
default: null
},
placeholder: {
type: String,
default: null,
},
mergeParams: {
type: Object as PropType
default: () => ({}),
},
debounceWait: {
type: Number,
default: 300,
},
debounceOptions: {
type: Object as PropType
default: () => ({})
},
cssClasses: {
type: Object as PropType
default: () => ({}),
},
locations: {
type: Object as PropType
default: () => ({}),
},
fromBound: {
type: String as PropType
},
toBound: {
type: String as PropType
},
enabledCacheQuery: {
type: Boolean,
default: false
}
}
`
- token - токен сервиса
- type - тип подсказок по умолчанию address
- mergeParams - параметры запроса.
- setInputValue - коллбэк-функция, которая обрабатывает значение после выбора из подсказок. Принимает параметр объекта suggestion.
- apiUrl - кастомный урл для отправки запросов, заменяет дефолтный.
- inputName - значение атрибута name у input
- inputId - значение атрибута id у input
- placeholder - значение атрибута placeholder у input
- debounceWait - время задержки перед отправкой запроса
- debounceOptions - опции плагина debounce пакета lodash
- cssClasses - переопределение дефолтных css классов
``
type CssClasses = {
root: string,
input: string,
listEmpty: string,
row: string,
list: string
}
- locations - настройка ограничений и приоритетов для местности по которой осуществляется поиск.
Передаётся объектом со следующими опциональными полями:
| Название | Тип | Описание |
|-----------------|-------------------------------|---------------------------------------------------------------------------------------------------------------------|
| division | "municipal"\|"administrative" | Административное либо муниципальное деление |
| locations | array[object] | Ограничение сектора поиска |
| locations_geo | array[object] | Ограничение по радиусу окружности |
| locations_boost | array[object] | Приоритет города при ранжировании |
- fromBound и toBound - гранулярные подсказки. Передаётся в строки, содержащий нужный тип. Например, следующий элемент будет искать исключительно по городам:
`vue`
- enabledCacheQuery - настройка включения и отключения кэширования строки поиска
onSelected - возвращает объект, выбранной подсказки.
restoreSuggestion - выполняет очистку данных по строке из текстового поля. Объект подсказки возвращается как обычно в событии onSelected
list-item - слот для отдельной подсказки. Слот принимает два параметра - объект подсказки и функция для обработки подсказки
```
Функция prepareValue нужна для сохранения подсветки соответствий запроса.
Эта функция опциональна. Если все-таки решили её использовать, то нужно выводить, как в примере выше через директиву v-html.