algolia_将Algolia场所与Vuetify一起使用

algolia

Vuetify阿尔戈利亚的地方 (Vuetify Algolia Places)

Use Algolia Places with Vuetify.

将Algolia Places与Vuetify一起使用。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

Run in your terminal:

在您的终端中运行：

yarn add vuetify-algolia-places

You also need to install algoliasearch and places.js:

您还需要安装algoliasearch和places.js ：

yarn add '[email protected]^3' '[email protected]^1'

Then install the plugin:

然后安装插件：

import Vue from 'vue';
import VuetifyAlgoliaPlaces from 'vuetify-algolia-places';

Vue.use(VuetifyAlgoliaPlaces, {
  algolia: {
    appId: '...', // Optional
    apiKey: '...', // Optional
  },
});

用法 (Usage)

Vuetify Algolia Places is still under development, so for now there is no way to specify props nor events.

Vuetify Algolia Places仍在开发中，因此目前尚无法指定道具或活动。

<vuetify-algolia-places v-model="place" />

The variable place looks like this:

可变place如下所示：

{
  "name": "30 Rue du Sergent Michel Berthet",
  "administrative": "Auvergne-Rhône-Alpes",
  "city": "Lyon 9e Arrondissement",
  "country": "France",
  "countryCode": "fr",
  "type": "address",
  "latlng": {
    "lat": 45.7704,
    "lng": 4.80536
  },
  "postcode": "69009",
  "highlight": {
    "name": "<em>30</em> <em>Rue</em> <em>du</em> <em>Sergent</em> <em>Michel</em> <em>Be</em>rthet",
    "city": "Lyon 9e Arrondissement",
    "administrative": "Auvergne-Rhône-Alpes",
    "country": "France"
  },
  "hitIndex": 0,
  "query": "30 rue du sergent michel berthet",
  "value": "30 Rue du Sergent Michel Berthet, Lyon 9e Arrondissement, Auvergne-Rhône-Alpes, France"
}

关于初始值的注意事项 (Note about initial value)

If you don't store this kind of object in your application, you can still pass a plain string that is equivalent to the value value, e.g.: 30 Rue du Sergent Michel Berthet, Lyon.

如果没有这种类型的对象存储在您的应用程序，您还可以通过一个简单的字符串，它等效于值value ，例如： 30 Rue du Sergent Michel Berthet, Lyon 。

If this value is not null during the initialization of the component, it will automatically request Algolia API and use the first hit.

如果在组件初始化期间该值不为null ，它将自动请求Algolia API并使用第一个匹配项。

That means if place is equal to 30 Rue du Sergent Michel Berthet, Lyon, it will be automatically transformed to the above JSON object.

这意味着如果place等于30 Rue du Sergent Michel Berthet, Lyon ，它将被自动转换为上述JSON对象。

道具 (Props)

Name	Type	Algolia Places documentation
type	String	Check type option
language	String	Check language option
countries	String[]	Check countries option
aroundLatLng	String	Check aroundLatLng option
aroundLatLngViaIp	Boolean	Check aroundLatLngViaIP option
aroundRadius	Number	Check aroundRadius option

名称	类型	Algolia Places文档
type	String	检查type选项
language	String	检查language选项
countries	String[]	检查countries选项
aroundLatLng	String	检查aroundLatLng选项
aroundLatLngViaIp	Boolean	检查aroundLatLngViaIP选项
aroundRadius	Number	检查aroundRadius选项

Every props from Vuetify Autocomplete component are supported, except items, loading, search-input.sync, filter and return-object that are used internally.

支持Vuetify Autocomplete组件中的每个道具，但内部使用的items ， loading ， search-input.sync ， filter和return-object除外。

大事记 (Events)

Name	Description	Arguments
input	Emitted when the user select a place	@input="onInput", onInput(place) { }
error	Emitted when there is an error with Algolia API	@error="onError", onError(error) { }
clear	Emitted when the user click on the clear button (used with prop clearable)	@clear="onClear", onClear() { }

名称	描述	争论
input	用户选择地点时发出	@input="onInput" ， onInput(place) { }
error	Algolia API错误时发出	@error="onError" ， onError(error) { }
clear	当用户单击清除按钮时发射(与prop clearable )	@clear="onClear" ， onClear() { }

翻译自: https://vuejsexamples.com/use-algolia-places-with-vuetify/

algolia