Ant Design Vue Input图标

我们可以通过addonAfter和suffix增加图标，区别是addonAfter是后缀图标而suffix是输入框内图标。
也可以通过prefix和addonBefore添加输入框台面的图标。

Node.js webpack代码例子

<template>
  <a-input placeholder="试试看"  v-model="keyword" addonBefore="￥" style="width:300px" >
   <a-icon slot="addonAfter" @click="onck" type="search" />
   <a-icon slot="suffix" @click="onck" type="setting" />
   </a-input>
</template>
<script>
export default {
  data(){
    return{
      keyword:""
    }
  },
  methods: {
    onck() {
       alert(this.keyword)
    },
  },
};
</script>

例子

浏览器引入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/ant-design-vue/moment.js"></script>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd.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 placeholder="输入试试看"   addon-before="￥" allow-clear  v-model="inputValue" :style="style">
       <a-icon slot="addonAfter" @click="getValue" type="search"></a-icon>
       <a-icon slot="suffix" @click="getValue" type="setting"></a-icon>
      </a-input>
        
    </div>
    <script>
        const { LocaleProvider, locales } = window.antd;
        var app = new Vue({
            el: '#app',
              data() {
    return {
      inputValue: '',
      style:{width:"300px"}
    };
  },
  methods: {
    getValue() {
       alert("您刚才输入的是："+this.inputValue);
    },
  },
        });
    </script>
</body>
</html>