Ant Design Vue教程
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>