使用vue+css+rem完成密码输入框

使用Vue.js配合CSS和rem单位创建一个密码输入框，可以按照以下步骤进行：

1. 首先，在HTML结构中创建一个密码输入组件：

<template>
  <div class="password-input">
    <input type="password" v-model="password" placeholder="请输入密码 (单位: rem)">
    <button @click="showStrength">显示强度</button>
  </div>
</template>

2. 在Vue实例中绑定数据，并处理密码强度展示逻辑：

<script>
export default {
  data() {
    return {
      password: '',
    };
  },
  methods: {
    showStrength() {
      // 这里可以根据密码长度、复杂度等计算并显示密码强度
    },
  },
};
</script>

3. CSS部分，设置输入框样式，使用rem单位调整大小：

<style scoped>
.password-input {
  display: flex;
  align-items: center;
}

input[type="password"] {
  padding: .5rem;
  font-size: 1.4rem; /* 或者根据设计需要自定rem值 */
  border: 1px solid #ccc;
  width: 80%;
}
button {
  margin-left: .5rem;
  padding: .5rem .75rem;
  font-size: 1rem;
}
</style>

这样就完成了基本的密码输入框的创建，当用户输入密码时，显示强度按钮会触发相应的密码强度检查功能。