vue.js3: base64编码/解码(vue@3.2.37)

一，js代码

<template>
<div>
  <div style="800px;display: flex;flex-direction: row;">
    <el-input
        v-model="plainText"
        :rows="6"
        type="textarea"
        placeholder="请输入要做base64编码的文本"
        style="300px;"
    />
    <div style="140px;">
    <button @click="encode">BASE64编码&gt;</button>
    <button @click="decode">&lt;BASE64解码</button>
    </div>
    <el-input
        v-model="base64Text"
        :rows="6"
        type="textarea"
        placeholder="经过base64编码的文本"
        style="300px;"
    />
  </div>
</div>
</template>

<script>
import {ref} from "vue"
export default {
  name: "Base64Comp",
  setup() {
    const plainText = ref("")
    const base64Text = ref("")
    //编码
    const encode = () => {
      if (plainText.value.length == 0){
        alert('请输入要做base64编码的文本');
        return;
      }
      try {
        base64Text.value = window.btoa(unescape(encodeURIComponent(plainText.value)))
      }
      catch (e) {
        alert("error:"+e.message);
      }
    }
    //解码
    const decode = () => {
      if (base64Text.value.length == 0){
        alert('请输入经过base64编码的文本');
        return;
      }
      try {
        plainText.value = decodeURIComponent(escape(window.atob(base64Text.value)))
      }
      catch (e) {
        alert("error:"+e.message);
      }
    }
    return {
      plainText,
      base64Text,
      encode,
      decode,
    }
  }
}
</script>

<style scoped>
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果:

三，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped