inputPassword.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div>
  3. <div>
  4. <el-dialog v-model="isOpen" title="请输入登录密码" width="30%">
  5. <el-input v-model="password" @keyup.enter="sure" type="password"></el-input>
  6. <template #footer>
  7. <span class="dialog-footer">
  8. <el-button @click="close">取消</el-button>
  9. <el-button type="primary" @click="sure">确认</el-button>
  10. </span>
  11. </template>
  12. </el-dialog>
  13. </div>
  14. </div>
  15. </template>
  16. <script setup>
  17. import { ref, onMounted, toRef, watch } from "vue";
  18. import { sm3 } from "sm-crypto";
  19. const props = defineProps({
  20. showInputPassword: {
  21. type: Boolean,
  22. default: false,
  23. },
  24. });
  25. const emit = defineEmits(["closeIptPass", "surePass"]);
  26. watch(
  27. () => props.showInputPassword,
  28. (newValue) => {
  29. // console.log(111);
  30. isOpen.value = newValue;
  31. }
  32. );
  33. const password = ref();
  34. const isOpen = ref(props.showInputPassword);
  35. const close = () => {
  36. password.value = "";
  37. emit("closeIptPass");
  38. };
  39. const sure = () => {
  40. emit("surePass",sm3(password.value));
  41. password.value = "";
  42. };
  43. </script>
  44. <style lang="scss" scoped>
  45. </style>