Ant Design Vue Input 搜索框

Ant Design Vue Input 搜索框用法,支持搜索中、搜索图标,其中loading属性需要新版本才支持,以下例子使用的是1.5.3版本。

搜索框例子

<template>
  <div>  
    <a-input-search placeholder="请输入关键字" :loading="loading" v-model="inputValue"  @search="onSearch" style="width: 300px" enterButton />
    <br /><br />
    <a-input-search placeholder="请输入关键字" :loading="loading" v-model="inputValue"  @search="onSearch" enterButton="Search" size="large"    style="width: 300px" />
    <br /><br />
    <a-input-search placeholder="input search text" :loading="loading" v-model="inputValue"  style="width: 300px" @search="onSearch" size="large">
      <a-button slot="enterButton">Custom</a-button>
    </a-input-search>
     <br /><br />{{inputValue}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading:false,
      inputValue: '', 
    };
  },
  methods: {
    //搜索框点击事件
    onSearch(value) {
      var that=this;
      //设置加载中状态
      that.loading=true;
      console.log(value);
      setTimeout(function(){
        that.loading=false;
      },3000);
    },
  },
};
</script>

例子

浏览器引入cdn js方法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue Input 搜索框用法例子</title>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
    <link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <style>
        body {
            padding: 10px
        }
    </style>
</head>
<body>
    <div id="app">
        <a-input-search placeholder="请输入关键字" :loading="loading" v-model="inputValue" @search="onSearch" style="width: 300px" enterButton></a-input-search>
        <br /><br />
        <a-input-search placeholder="请输入关键字" :loading="loading" v-model="inputValue" @search="onSearch" enterButton="Search" size="large" style="width: 300px"></a-input-search>
        <br /><br />
        <a-input-search placeholder="input search text" :loading="loading" v-model="inputValue" style="width: 300px" @search="onSearch" size="large">
            <a-button slot="enterButton">Custom</a-button>
        </a-input-search>
        <br /><br />{{inputValue}}
    </div>
    </div>
    <script>
        const { LocaleProvider, locales } = window.antd;
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    inputValue: '',
                };
            },
            methods: {
                //搜索框点击事件
                onSearch(value) {
                    var that = this;
                    //设置加载中状态
                    that.loading = true;
                    console.log(value);
                    setTimeout(function () {
                        that.loading = false;
                    }, 3000);
                },
            },
        });
    </script>
</body>
</html>