google autocomplete下载-Google google autocomplete源代码下载

google autocomplete

三方组件

vements

下载

Google自动完成

我之所以分享此组件，是因为我被复杂的示例所淹没，以实现这一简单的工作。因此，在解释期间，我将尽我所能。

Google AutoCoctlete组件不过是官方Google Places API周围的Vue.js包装器。尽管使用Vue.js编写的演示，但可以从任何JS框架中提取自动完成对象。

要求

您将必须安装Vue＆Vuemit：

 npm install vue -- save

 npm install vuemit -- save

Vuemit库用于管理Google组件与其父级之间的事件。

注意：如果您碰巧使用Vue 1.* ，则必须从VUE-1分支中拉出。

演示

查看现场演示。

安装

要安装此软件包，您只需要打开控制台，然后键入npm i google-autocomplete-vue --save 。 npm i -f google-autocomplete-vue --save安装force中有任何问题

入门

首先，您必须在Google API控制台上注册以获取API密钥：https：//console.developers.google.com一旦完成此操作，您将必须复制Google给出的API键并将其粘贴到JS文件输入点中。例子：

Bootstrap文件：Bootstrap.js。您将必须在此文件中需要Vuemit才能使Events Handler设置Globaly。因此：例如
入口点文件：demo.js

注意：必须将重要的密钥保存在.env文件中，因此请在将代码推向GIT控制时注意这一点。

其次，您必须在应用程序输入点中导入组件，因此您可以在需要时将其称为全球。例子：

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

服务器端的验证

Places验证是一个Laravel库，它将帮助您处理您的用户地址。它的目的是确保用户提交的地址通过第三方服务有效，为Google。

查看其存储库：位置验证

指导

首先，您必须创建一个入口点来编译组件并生成捆绑文件。这里有一个示例。
其次，您将必须创建您的VUE对象以控制组件：

 require ( './bootstrap' ) ;


new Vue ( {

    el : '#demo' ,


    data :
    {
        output : { } , address : { } , sent : false , response : { } , config : { }
    } ,


    mounted ( )
    {
        //Set an event listener for 'setAddress'.
        Vuemit . listen ( 'setAddress' , this . onAddressChanged ) ;
        Vuemit . listen ( 'addressWasCleared' , this . onAddressCleared ) ;
    } ,


    methods :
    {
        /**
         * Submit the data to be evaluated.
         *
         * @return {Void}
         */
        submit ( )
        {
            this . sent = true ;
            this . output = this . address ;
            this . address = { } ;
        } ,


        /**
         * Checks whether the output data is valid.
         *
         * @return {Bool}
         */
        isValid ( )
        {
            return Object . keys ( this . output ) . length > 0 ;
        } ,


        /**
         * Checks whether the output data is not valid.
         *
         * @return {Bool}
         */
        isNotValid ( )
        {
            return ! this . isValid ( ) ;
        } ,


        /**
         * The callback fired when the autocomplete address change event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressChanged ( payload )
        {
            if ( Object . keys ( paypload . place ) . length > 0 ) {
                this . address = payload . address ;
                this . response = payload . response ;
            }
        }

        /**
         * The callback fired when the autocomplete clear event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressCleared ( )
        {
            this . address = { } ;
            this . response = { } ;
        }
    }
} ) ;

请参阅此处的示例。

第三，您必须使用浏览器， webpack或laravel-elixir-vue-2编译这两个文件，以使它们适用于每个浏览器。例子：

 require ( 'laravel-elixir-vue-2' ) ;
var elixir = require ( 'laravel-elixir' ) ;

elixir . config . sourcemaps = false ;
elixir . config . assetsPath = 'src' ;

elixir ( function ( mix )
{
    mix . webpack ( 'demo.js' , 'dist/demo.js' ) ;
} ) ;

在这里查看示例

最后，您可以使用此语法使用HTML文件中的组件：

 < google-autocomplete
    class = " input "
    input_id = " txtAutocomplete "
    :config = " {type: ['geocode']} "
    placeholder = " type your address "
>
</ google-autocomplete >