el-input登录隐藏密码交互

未隐藏状态图:
未隐藏状态在这里插入图片描述

隐藏状态图:
在这里插入图片描述

部分代码如下:

html

<el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            :type='!isShow?"password":"text"'
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            <svg-icon v-if="isShow" slot="suffix" icon-class="icon(249)" class="el-input__icon input-icon-show" @click="passwordIsShow" />
            <svg-icon v-if="!isShow" slot="suffix" icon-class="icon(250)" class="el-input__icon input-icon-show"  @click="passwordIsShow" />
           </el-input>
</el-form-item>

javascript:

//控制密码隐藏
passwordIsShow(){
      this.isShow =!this.isShow
    },

注意:type类型参考原生input类型:password(密码)、color(颜色)等属性、text(文字)

原生input解释
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\

`el-select` 和 `el-input` 联动通常是基于 Vue.js 的 Element UI 库中的组件功能实现的。这两种组件都是用于输入数据的选择界面,在实际应用中,它们可以结合使用来提供更丰富的用户交互体验。 ### 实现 `el-select` 和 `el-input` 联动的基本原理: #### 步骤一:选择数据更新 `el-input` 当用户通过 `el-select` 选择了某个选项后,可以选择将这个值同步到关联的 `el-input` 中。例如,如果 `el-select` 的选项代表不同的地区、城市等信息,可以选择在用户从下拉列表中选中某个城市时,自动填充至 `el-input` 中,无需手动输入。 #### 步骤二:利用状态管理 为了实现这种联动效果,通常需要使用 Vue.js 的响应式数据系统或者第三方的状态管理库(如 Vuex),确保 `el-select` 和 `el-input` 使用的是同一份数据源,并且当数据变化时,两个元素能够实时更新。 #### 实现示例: 假设我们有一个数组 `regions` 包含不同地区的数据: ```javascript const regions = [ { value: 'regionA', label: '区域A' }, { value: 'regionB', label: '区域B' }, // 更多... ]; ``` 我们可以创建一个 Vue 组件,并在其模板中包含这两个组件以及一些控制其数据变动的逻辑: ```html <template> <div> <!-- el-select --> <el-select v-model="selectedRegion" @change="updateInput"> <el-option v-for="item in regions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- el-input --> <el-input v-model="inputValue"></el-input> </div> </template> <script> export default { data() { return { selectedRegion: '', inputValue: '' }; }, methods: { updateInput(newVal) { this.inputValue = newVal; } } }; </script> ``` 在这个例子中: - 当用户改变 `el-select` 的选项时,`@change` 事件触发,调用 `updateInput` 方法并传入新的值。 - 这个新值会直接赋给 `el-input` 的 `v-model` 属性,实现动态同步。 ### 关联的问题: 1. **如何处理异步加载数据?** 当数据量大或来源为外部API时,如何保证数据加载完成后能及时进行联动? 2. **如何优化性能?** 高频操作可能导致页面刷新过快,影响用户体验,应如何设计以提升性能? 3. **异常情况处理**,比如网络错误、数据传输延迟等情况下的联动逻辑如何设计? 以上就是关于 `el-select` 和 `el-input` 联动的基本介绍及简单示例,希望能对您有所帮助。如有更多疑问或具体需求,欢迎继续提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值