vue implements custom component functions for password display and hidden buttons

Ideas

There are two ideas to implement this component. One is to use v-model for bidirectional binding, and the other is to use prop's .sync modifier and parent-child component communication.

-model form

The implementation of v-model requires customizing an inputvalue value in a custom component. Because of the problem of parent-child component delivery mechanism in vue, vue will give an error when directly modifying the key field in the component injected props. The inputvalue field is defined in the child component, which is used for bidirectional binding of the value of the input element in the child component. The input data binding in the child component can be used with v-model, or the principle syntax sugar that implements v-model. The following two methods can be used as data binding in the child component.

<input type="password" v-model="inputvalue"/>
<input type="password" :value="inputvalue" @input="inputvalue=$"/>

For the implementation of v-model, you can view other implementation articles about v-model.

The final subcomponent file is as follows. The hidden click here uses text. When using it, you can use the corresponding icon font icon and set a certain style.

<template>
<div>
  <input :type='show?"text":"password"' :value="inputvalue" 
@input="inputvalue=$" :placeholder='placeholder'/>
  <i :title="show?'Hide Password':'Show Password'" @click="changePass" 
style="cursor:pointer;">{{show?'hide':'show'}}</i>
</div>
</template>
 
<script>
export default {
  props: {
    value: {
      default: "",
      type: String
    },
    placeholder: {
      default: "",
      type: String
    },
  },
  data(){
    return{
      inputvalue:"",
      show:false,//Boolean with password display or hidden, default false, password not displayed    }
  },
  watch:{
    inputvalue(news,olds){
      this.$emit("input",news);
    }
  },
  mounted(){
    =;
  },
  methods:{
    changePass(){
      =!;
    }
  }
}
</script>
<style>
</style>

The parent component reference method is as follows

<input-password v-model="value"></input-password>

Because the binding method of v-model implemented here, and the implementation of v-model is the listened input event, when the inputvalue changes, an input event is issued to the parent component. The parent component uses v-model to listen for the input event and modify the value in the parent component. Two-way binding is implemented here, and the event is bound on the displayed and hidden i tags. When clicking on the i tag, the value of the show is changed, and the input type is dynamically changed by judging the value of the show, and the password is displayed and hidden.

2. .sync modifier

The implementation of the .sync modifier is the same as the implementation of v-model. The only difference is that the event emitted to the parent component when the watch listens for inputvalue changes is modified to "update:value". The modified inputvalue listening function is as follows

inputvalue(news,olds){
      this.$emit("update:value",news);
    },

Parent component reference method

<input-password :="value"></input-password>

Write to the end

In fact, the most important thing to implement the two methods is to pass the value between parent and child components. Use emit, vuex, or custom repository to implement the value of parent and child components. When listening for inputvalue modification, you can use two emit sending at the same time, and two methods can be supported at the same time.

The above is the custom component function of vue to realize password display and hidden buttons introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!