官方文档中定义尺寸

<div class="demo-input-size">
  <el-input
    placeholder="请输入内容"
    suffix-icon="el-icon-date"
    v-model="input1">
  </el-input>
  <el-input
    size="medium"
    placeholder="请输入内容"
    suffix-icon="el-icon-date"
    v-model="input2">
  </el-input>
  <el-input
    size="small"
    placeholder="请输入内容"
    suffix-icon="el-icon-date"
    v-model="input3">
  </el-input>
  <el-input
    size="mini"
    placeholder="请输入内容"
    suffix-icon="el-icon-date"
    v-model="input4">
  </el-input>
</div>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>

在这里插入图片描述

以上官方实例中只是改变了 input 输入框的高度,宽度想要改变 需要自己修订 style

 <el-input
  placeholder="客户姓名!"
         size="small"
         style="width: 140px"
         v-model="searchParams.custName"
         clearable>
 </el-input>

clearable 表示是否可清空 即如下图所示 输入后右侧出现清空图标
在这里插入图片描述
placeholder 表示输入框的默认值

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐