2021-09-14---使用el踩过的坑

使用el踩过的坑

el-input

1.在同一个页面中使用多个表单，验证时互相影响的问题
解决方法：为每一个添加一个唯一的key值进行标识

el-form-item prop="tel" key="logintel">
  <view class="item">
  <image class="login-icon" src="../../static/model.png" mode=""></image>
  	<view style="border: 1px solid #cccccc;  height:20px;line-height: 20px;margin: 15px 0;" />
    <el-input v-model="ruleForm.tel" placeholder="用户名/手机号登录" v-if="loginIn"></el-input>
  </view>
</el-form-item>

2.type="password"时，需要显示明文
解决方法：添加一个iocn，

js

<el-input v-model="ruleForm.pass" :type="psdType" placeholder="请输入密码" v-if="loginIn">
	// input中加图标必须要有slot="suffix"属性，不然无法显示图标 
    <i slot="suffix" class="el-input__icon el-icon-view"  :style="{color:psdCheck?'#00B6BF':'#999999','font-size': '18px' }"  @click="showPsd"></i>
</el-input>

script

showPsd() {
                if (!this.psdCheck) {
                    this.psdType = "text"
                    this.psdCheck = !this.psdCheck
                } else {
                    this.psdType = "password"
                    this.psdCheck = !this.psdCheck
                }
            },