el-input组件当数据为空时， 边框变红，并提示错误信息

1，样式

初始：

当不输入口令， 点击确定时：

2, 思路

主要是使用动态类的方式。

先设置输入框变红的样式以及提示文字的样式class

对于样式class 用变量来控制是否奏效。

3， 代码实现

//html：
<div class="input">
            <el-input
              v-model="password"
              ref="passwordRef"
              placeholder="请输入操作口令"
              type="password"
              size="small"
              :class="{'password' : errorVerify}"
            ></el-input>
            <span class="error" :style="{'display': errorVerify ? 'inline' : 'none'}">请输入操作口令</span>
          </div>
          <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
      // js：
      confirm(){
      if(!this.password) {
        this.errorVerify = true
        return
      }
      this.errorVerify = false
    }
    // css:
    .password /deep/ input {
  border-color: #f56c6c; 
}
   }
.error {
  color: red;
  font-size: 10px;
  padding-left: 5px;
}