简介
ancaio-vuejs-dawa 是一个基于 Vue.js 的前端数据展示组件，它使用了 DataWorld 提供的 API，可以方便地显示各种地址、经纬度信息对应的大村市区域、小地名等详细信息，例如：郵便番号、都道府県名、市区町村名、市区町村名よみ、町域名、町域名よみ、... 等。
安装与使用
安装您需要安装该库，您可以使用 npm。在终端中运行以下命令：
$ npm install ancaio-vuejs-dawa
然后您就可以在 Vue.js 项目中使用该组件。以下是一个使用示例，包括了该组件的基本属性和使用方法：
-- -------------------- ---- -------
----------
------------------
------------------------
----------------------------------
--------------------
--------------------
----------------------------
----------
--
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- - --------------- --
------ -
------ -
----------- -----------
---------------- -----
--------- --------
--------- ------------
------------- ------
--
--
-------- -
----- --------------- -
----- ------- - ----- --------------------------------
----------------------------
--
--
--
---------属性
下表列出了组件的属性：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
postalCode |
string |
undefined |
邮政编码 |
prefecturesCode |
string |
undefined |
日本各都道府県に固有のの番号。例えば、東京都であれば 13、北海道であれば 01 など。都道府県名から都道府県コードを調べることが出来ます。 |
cityCode |
string |
undefined |
日本各市区町村に固有の番号。例えば、千代田区であれば 13101 など。都道府県コードと市区町村名から市区町村のコードを調べることが出来ます。 |
townCode |
string |
undefined |
日本各町域に固有の番号。例えば、一番町であれば 131010009 など。都道府県コード・市区町村コード・町域名から町域のコードを調べることが出来ます。 |
streetNumber |
string |
undefined |
番地。 |
inputDelay |
number |
500 |
输入查询参数后，延迟多久开始发起查询请求。默认为 500 毫秒。 |
showPrefectures |
boolean |
true |
是否显示都道府県名。 |
showCity |
boolean |
true |
是否显示市区町村名。 |
showTown |
boolean |
true |
是否显示町域名。 |
showStreetNumber |
boolean |
true |
是否显示番地。 |
方法
下表列出了组件的方法：
| 名称 | 参数 | 描述 |
|---|---|---|
searchAddress |
query: string |
搜索指定的地址。如果没有指定任何参数，该方法会使用组件中所有的地址信息进行搜索。返回搜索到的地址详细信息，具体格式请参考 DataWorld API(需要 DataWorld API Token) |
示例
以下是一个完整的示例，您可以复制粘贴，并将您的 API Token 修改为自己的 Token。该示例将会为您查询出颐和园的地址信息：
-- -------------------- ---- -------
----------
-----
-------------------
-----
--------------------
-------- ---------- ---------
------
-----
---------------------
-------- ----------- ---------
------
-----
---------------------
-------- ---- ---------
------
-----
-------------------
-------- ---- ---------
------
-----
------------------
-------- ------------ ---------
------
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- - --------------- --
------ -
------ -
----------- ---
------------ ---
----- ---
----- ---
------------- ---
--
--
--------- -
---------------------
--
-------- -
----- --------------- -
----- ----- - ----- --------- --- -------
----- ---------- - ---------
----- ----- - -------------------------
----- ------- - -
-------- -
-------------- ------- ----------
--
--
----- ------- - ----- ------------------------------------ ---------
-- ---------------------- --- -- -
------------------------------ ------------- ----------
-------
-
----- ----------- - ------------------
--------------- - ---------------------
---------------- - -----------------------
--------- - -----------------
--------- - -----------------
----------------- - ---
------------------------------ -- -
-- ------- --- ------ -
----------------- -- ------- - ----
- ---- -
----------------- -- --------
-
---
--
--
--
---------结语
本文为您介绍了 npm 包 ancaio-vuejs-dawa 的使用教程，包括了安装、使用、属性、方法以及示例。在实际开发过程中，该组件可以为您带来很大的便利性。希望您可以根据该教程，了解该组件的基本用法，并且可以将其在自己的项目中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bde81e8991b448e58e6