输入框禁用状态可清空输入框如何实现？组件写的

最新推荐文章于 2024-04-26 16:32:36 发布

她说她一如既往的爱我

最新推荐文章于 2024-04-26 16:32:36 发布

阅读量568

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62980497/article/details/136874389

版权

本文介绍了如何在VueElementUI中使用disabled属性禁用input组件，clearable属性实现清空功能，以及如何通过prefix-icon和suffix-icon属性或slot插槽添加首部和尾部图标。

摘要由CSDN通过智能技术生成

输入框禁用

通过 disabled 属性指定是否禁用 input 组件

<el-input placeholder="请输入内容" v-model="input" :disabled="true"> </el-input> <script> export default { data() { return { input: '' } } } </script>

可清空

使用clearable属性即可得到一个可清空的输入框

<el-input placeholder="请输入内容" v-model="input" clearable> </el-input> <script> export default { data() { return { input: '' } } } </script>

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

<div class="demo-input-suffix">
  属性方式：
  <el-input
    placeholder="请选择日期"
    suffix-icon="el-icon-date"
    v-model="input1">
  </el-input>
  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input2">
  </el-input>
</div>
<div class="demo-input-suffix">
  slot 方式：
  <el-input
    placeholder="请选择日期"
    v-model="input3">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  <el-input
    placeholder="请输入内容"
    v-model="input4">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</div>

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