简单的在线base64编码/解码

chenyajun  2022-10-16 13:27:51  阅读 1768 次 评论 0 条
<html>    <head>    <title>Simple online base64 encode/decode</title>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css" />    <script src="https://cdn.jsdelivr.net/npm/vue"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>    <style>    
        .column {    
            padding-bottom: 0;    
        }    
    </style>    </head>    <body>    <div id="app" class="container">    <br/>    <h1 class="title">简单的在线base64编码/解码</h1>    <br/>    <div class="columns">    <h2 class="column is-half subtitle">纯文本</h2>    <div class="column has-text-right">    <span class="select">    <select v-model="passwordLength">    <option value="8">长度 8</option>    <option value="12">长度 12</option>    <option value="16">长度 16</option>    <option value="20">长度 20</option>    <option value="24">长度 24</option>    </select>    </span>    <button class="button" v-on:click="genPassword">生成密码</button>    &nbsp;    &nbsp;    <button class="button clip-btn" data-clipboard-target="#text">复制到剪贴板</button>    </div>    </div>    <textarea id="text" class="textarea" v-model="text" v-on:keyup="encode" v-on:change="encode"></textarea>    <br/>    <br/>    <div class="columns">    <h2 class="column is-half subtitle">Base64编码</h2>    <div class="column has-text-right">    <button class="button clip-btn" data-clipboard-target="#base64">Copy to Clipboard</button>    </div>    </div>    <textarea id="base64" class="textarea" v-model="base64" v-on:keyup="decode"></textarea>    <br/>    <p class="notification has-text-grey">    键入文本并获取base64编码,或键入base64并获取纯文本.    
<b>双向绑定!</b>    </p>    <hr/>    <p class="has-text-centered">    </p>    </div>    <script>    
        var app = new Vue({    
            el: '#app',    
            data: {    
                text: '',    
                base64: '',    
                passwordLength: 16    
            },    
            methods: {    
                encode: function (event) {    
                    this.$data.base64 = btoa(this.$data.text);    
                },    
                decode: function (event) {    
                    this.$data.text = atob(this.$data.base64);    
                },    
                genPassword: function (event) {    
                    const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";    
                    let text = "";                        
                    for (let i = 0; i < this.$data.passwordLength; i++) {    
                        text += possible.charAt(Math.floor(Math.random() * possible.length));    
                    }    
                    this.$data.text = text;    
                    this.encode(event);    
                }    
            }    
        });    
        new ClipboardJS('.clip-btn');    
    </script>    </body>    </html>


本文地址:https://chenyajun.net/index.php/post/94.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!