【新增全局密码框】

最新推荐文章于 2024-08-09 21:30:00 发布

老二~老二

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量99

点赞数

分类专栏：笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_42556628/article/details/125967287

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

新增全局密码框
vue

<template>
  <section id="page-password" v-if="visible">
    <section class="container">
      <label for=""><input v-model="password" type="text" placeholder="请输入密码"/></label>
      <button @click="submit">解锁</button>
    </section>
  </section>
</template>

<script>
// 引入控制密码层显示的变量，结合路由一起控制该层显示
import { pageVisiblePassword, blackList } from './PagePassword.ts';
export default {
  created() {
    this.visible = true;
  },
  data() {
    return {
      password: '',
      visible: true
    };
  },
  methods: {
    submit() {
      const pwd = this.password;
      if (pwd === pageVisiblePassword.pwd) {
        this.visible = false;
        this.password = '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#page-password {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;

  .container {
    position: relative;
    z-index: 1001;

    label {
      input {
        text-align: center;
        height: 25px;
        outline: none;
        border: 1px solid #359c9c;
        border-radius: 5px;
      }
    }

    button {
      margin-left: 20px;
      height: 25px;
      width: 50px;
      color: #fff;
      background-color: #1b5f82;
      border: 1px solid rgb(77, 77, 155);
      border-radius: 3px;
    }
  }
}
</style>

interface PageVisiblePassword {
  pwd: string;
  visible: boolean;
}

export const pageVisiblePassword: PageVisiblePassword = {
  pwd: 'Mt97@!Tom',
  visible: false
};

export const blackList: string[] = ['/login', '/home'];