直播商城原始碼，密碼輸入框自定義顯示隱藏圖示

直播商城原始碼，密碼輸入框自定義顯示隱藏圖示

 <el-input>標籤程式碼

<el-input ref="pwdInput"
          :type="pwdObj.pwdType"
          v-model="password"
          @focus="focusEnd($event)">
  <!-- input中加圖示必須要有slot="suffix"屬性，不然無法顯示圖示 -->
  <el-image slot="suffix"
            class="img-sty"
            :src="getIconUrl(pwdObj.pwdType === 'text' ? 'offeye' : 'openeye')"
            fit="scale-down"
            @click="changeye('pwdType', 'pwdInput')" />
</el-input>
 <script type="text/javascript">中程式碼
<script>
  export default {
data() {
return {
            password: '',
pwdObj: { pwdType: 'password'}
}
},
computed: {
// 獲取圖示
getIconUrl() {
return function (name, type = 'svg') {
return require(`@/assets/img/icons/${name}.${type}`)
}
},
methods: {
//點選圖示控制密碼的顯示和隱藏
changeye(typeName, refName) {
this.$set(
this.pwdObj,
`${typeName}`,
this.pwdObj[`${typeName}`] === 'password' ? 'text' : 'password'
)
this.$refs[`${refName}`].focus()
},
//點選檢視密碼圖示使游標定位到最後
focusEnd(e) {
//input獲取游標顯示在最後
const obj = e.srcElement,
// obj.focus()
len = obj.value.length
//游標定位要加上 setTimeOut，不然就會重新游標定位失敗
setTimeout(() => {
obj.selectionStart = obj.selectionEnd = len
}, 60)
}
}
}
</script>

 可能自定義圖示後，顯示的位置沒那麼準確，根據需要透過css調整

.img-sty {
  cursor: pointer;
  margin-top: 10px;
}

 以上就是 直播商城原始碼，密碼輸入框自定義顯示隱藏圖示，更多內容歡迎關注之後的文章