从0到1，el-input时和placeholder的过招

2023-10-01 14:51:28

在日常的开发过程中，我们经常会遇到需要在input输入框中设置提示文字的情况，在Vue中，我们可以通过el-input组件来实现这一功能。el-input组件提供了placeholder属性，可以用来设置输入框的提示文字。

但是，当我们使用el-input组件时，可能会遇到一些问题，例如，当我们给input输入框绑定了一个值时，placeholder会自动消失，这可能会导致用户无法看到提示文字。

为了解决这个问题，我们可以使用以下几种方法：

在el-input组件中使用v-model指令来绑定值，并在v-model指令中使用一个三元运算符来判断绑定值是否为空，如果为空，则显示placeholder，否则隐藏placeholder。示例代码如下：

<template>
  <el-input v-model="value" placeholder="请输入内容"></el-input>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    }
  },
}
</script>

使用el-input组件的readonly属性来设置输入框为只读，这样placeholder就不会被覆盖。示例代码如下：

<template>
  <el-input readonly placeholder="请输入内容"></el-input>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    }
  },
}
</script>

使用el-input组件的size属性来设置输入框的大小，当输入框的大小为small或mini时，placeholder会自动隐藏。示例代码如下：

<template>
  <el-input size="small" placeholder="请输入内容"></el-input>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    }
  },
}
</script>