<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> <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>
评论已关闭！
