src/components/modal-passwd.vue

   1 <style scoped>
   2 .mask {
   3     z-index: 3 !important;
   4     top: 60px !important;
   5 }
   6
   7 .confirm {
   8     padding: 10px 20px;
   9     position: fixed;
  10     width: 310px;
  11     left: 0;
  12     bottom: 0;
  13     right: 0;
  14     z-index: 4;
  15 }
  16
  17 .btn-inline {
  18     display: flex;
  19     padding: 0;
  20 }
  21 .btn-inline .btn {
  22     margin: 10px 15px;
  23 }
  24 .form-item-content-en {
  25     margin-left: 145px;
  26 }
  27 .form-item-content-cn {
  28     margin-left: 85px;
  29 }
  30 </style>
  31
  32 <template>
  33     <div>
  34         <section v-show="show" class="mask"></section>
  35         <transition name="page-transfer" <!-- enter-active-class="animated slideInUp faster" leave-active-class="animated slideOutDown faster"> -->
  36             <div v-show="show" class="confirm form bg-gray">
  37                 <div class="form-item">
  38                     <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
  39                     <div :class="passwdStyle">
  40                         <input type="password" v-model="passwd" autofocus>
  41                     </div>
  42                 </div>
  43                 <div class="btn-group btn-inline">
  44                     <div class="btn bg-green" @click="confirm">{{ $t('welcome.confirm') }}</div>
  45                     <div class="btn bg-red" @click="close">{{ $t('welcome.cancel') }}</div>
  46                 </div>
  47             </div>
  48         </transition>
  49     </div>
  50 </template>
  51
  52 <script>
  53 import { getLanguage } from "@/assets/language"
  54 import { mapGetters } from 'vuex'
  55
  56 const CLASS_CN = "form-item-content form-item-content-cn";
  57 const CLASS_EN = "form-item-content form-item-content-en"
  58 export default {
  59     data() {
  60         return {
  61             show: false,
  62             passwd: ""
  63         };
  64     },
  65     props: {
  66         i18n: {
  67             type: String,
  68             default: 'cn',
  69         }
  70     },
  71     computed: {
  72         passwdStyle: function () {
  73             if (this.i18n == "cn") {
  74                 return CLASS_CN;
  75             } else if (this.i18n == "en") {
  76                 return CLASS_EN;
  77             }
  78             return CLASS_CN;
  79         },
  80         ...mapGetters([
  81           'language'
  82         ])
  83     },
  84     methods: {
  85         open() {
  86             this.i18n = getLanguage(this.language);
  87             this.show = true;
  88             this.passwd = "";
  89         },
  90         close() {
  91             this.show = false;
  92         },
  93         confirm() {
  94             if (this.passwd == "") {
  95                 this.$dialog.show({
  96                     body: this.$t("transfer.emptyPassword")
  97                 });
  98                 return;
  99             }
 100
 101             this.close();
 102             this.$emit("confirm", this.passwd);
 103         }
 104     }
 105 };
 106 </script>