ElementUI之输入框input(改变高度和宽度)

官方文档中定义尺寸

<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 表示输入框的默认值

发布了56 篇原创文章 · 获赞 14 · 访问量 6250

猜你喜欢

转载自blog.csdn.net/qq_41154522/article/details/104588634