<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./vue.min.js"></script>
    <script src="./crypto-js.js"></script>
</head>
<style>
    body,html{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #app{
        height: 100%;
        background-color: #edeeed;
    }

    .cms{
        display: flex;
        flex-direction: row;
    }
    .ctxm{
        width: 560px;
        height: 500px;
        border: 2px solid black;

     table-layout:fixed; word-break:break-all; overflow:hidden;  
    }

    #ipt{
        display: block;
        width: 400px;
        height: 200px;
    }


</style>
<body>
    <div id="app">
<div class="cms">
    
    <div class="chil">
        加密 :<input type="text" id='ipt' name="adf" v-model:value='str'>
    </div>
    <button @click='enc()'>加密</button>  
    <button @click='dec()'>解密</button>
    <div class="ctxm"> <span>{{ msg}}</span> </div>
</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                key: CryptoJS.enc.Utf8.parse("1234123412ABCDEF"), //十六位十六进制数作为密钥
                iv: CryptoJS.enc.Utf8.parse('ABCDEF1234123412'),   //十六位十六进制数作为密钥偏移量
                msg: '',
                str: ''
            }
        },
        methods: {
            Decrypt(word) {
                let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
                let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
                let decrypt = CryptoJS.AES.decrypt(srcs, vm.key, {
                    iv: vm.iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });
                let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
                return decryptedStr.toString();
            },
            Encrypt(word) {
                let srcs = CryptoJS.enc.Utf8.parse(word);
                let encrypted = CryptoJS.AES.encrypt(srcs, vm.key, {
                    iv: vm.iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });
                return encrypted.ciphertext.toString().toUpperCase();
            },
            enc() {
                /*
                let a = new FormData();
                a.append('name',vm.str)
                a.append('size',10086)
*/
                vm.msg = this.Encrypt(vm.str)
            },
            dec() {
                console.log(vm.str)
                vm.msg = this.Decrypt(vm.str)
            }

        },
    })



    /*
      //解密方法
      const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
      const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量
       function Decrypt(word) {
          let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
          let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
          let decrypt = CryptoJS.AES.decrypt(srcs, key, {
              iv: iv,
              mode: CryptoJS.mode.CBC,
              padding: CryptoJS.pad.Pkcs7
          });
          let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
          return decryptedStr.toString();
      }

      //加密方法
      function Encrypt(word) {
          let srcs = CryptoJS.enc.Utf8.parse(word);
          let encrypted = CryptoJS.AES.encrypt(srcs, key, {
              iv: iv,
              mode: CryptoJS.mode.CBC,
              padding: CryptoJS.pad.Pkcs7
          });
          return encrypted.ciphertext.toString().toUpperCase();
      }
      */
</script>

</html>