Ant Design Vue Input 输入框用法

Ant Design Vue Input 输入框基本用法,Ant Design的输入框除了input的基础功能还包含搜索、@格式化等功能。

基本用法

<template>
<div>
  <a-input placeholder="输入试试看" v-model="inputValue" allowClear :style="style"></a-input>
  <div>{{inputValue}}</div>
</div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
      style:{width:"200px"}
    };
  },
  methods: {
    getValue() {
       alert("您刚才输入的是："+this.inputValue);
    },
  },
};
</script>

在线试一试

前缀和后缀

前缀和后缀支持图标和纯文字。通过prefix="￥"和suffix="RMB"属性设置文字前缀和后缀，通过插槽设置图标前后缀。

<template>
  <div  style="padding:6px;">
      <div  style="float:left;">
    <a-input placeholder="请输入用户名" v-model="userName" ref="userNameInput">
      <a-icon slot="prefix" type="user" />
      <a-tooltip slot="suffix" title="字符串8-15位">
        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
      </a-tooltip>
    </a-input> 
      </div>
     <div  style="float:left;padding-left:20px;">
    <a-input prefix="￥" suffix="RMB" v-model="userName" />
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: '',
    };
  },
  methods: {
    emitEmpty() { 
      this.userName = '';
    },
  },
};
</script>

例子

输入框组合

<template>
  <div  style="padding:6px;">
     <a-input-group compact>
      <a-select defaultValue="1">
        <a-select-option value="1">价格</a-select-option>
        <a-select-option value="2">其他</a-select-option>
      </a-select>
      <a-input style=" width: 120px; text-align: center" placeholder="最小" />
      <a-input
        style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
        placeholder="~"
        disabled
      />
      <a-input style="width: 120px; text-align: center; border-left: 0" placeholder="最大" />
    </a-input-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: '',
    };
  },
  methods: { 
  },
};
</script>

例子

文本域

autoSize属性表示文本域高度随文本高度变化

<template>
  <div  style="padding:6px;">
  <a-textarea placeholder="Basic usage" :rows="4" />
  <br/> <br/> <br/>
  <a-textarea
      placeholder="Autosize height with minimum and maximum number of lines"
      :autoSize="{ minRows: 2, maxRows: 6 }"
    />
  </div>
</template>