vue项目开发时，需要前端对密码框做处理，可以通过点击图标实现密码的查看以及隐藏。图标是使用的是iconfont

组件使用

<passwordInput :password.sync="password"></passwordInput>

组件封装

/**
* @Author: 858834013@qq.com
* @Name: password
* @Date: 2022-08-15
* @Desc:
*/
<template>
  <div class="password">
    <input :placeholder="placeholder" v-model="newPassword" v-if="!see" type="password">
    <input :placeholder="placeholder" v-model="newPassword" v-else type="text">
    <div class="see">
      <i class="icon iconfont icon-no_eye" v-if="!see" @click="getsee(true)"></i>
      <i class="icon iconfont icon-eye" v-if="see" @click="getsee(false)"></i>
    </div>
  </div>
</template>

<script>

export default {
  name: "input",
  components: {},
  props: {
    password: {
      type: String,
      default() {
        return '';
      }
    },
    placeholder: {
      type: String,
      default() {
        return '请输入6-20位密码';
      }
    },
  },
  data() {
    return {
      newPassword: '',
      see: false
    }
  },
  watch: {
    newPassword() {
      this.$emit('update:password', this.newPassword)
    }
  },
  mounted() {
    this.newPassword = this.password
  },
  methods: {
    getsee(e) {
      this.see = e
    },
  }
}
</script>

<style lang="scss" scoped>
.password {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  width: 100%;

  input {
    width: 100%;
    height: 42px;
    border: 0;
    outline: none;
    color: #333;
  }

  ::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
  }

  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
  }

  .see {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
}
</style>