91 lines
2.6 KiB
Vue
91 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { reactive } from 'vue'
|
|
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
|
import { Md5 } from 'ts-md5'
|
|
import { copy } from '@/utils/string'
|
|
const info = reactive({
|
|
title: "MD5在线加密",
|
|
encryptStr: '',
|
|
encryptUpper32: '',
|
|
encryptLower32: '',
|
|
encryptUpper16: '',
|
|
encryptLower16: '',
|
|
})
|
|
|
|
//加密
|
|
const encrypt = () => {
|
|
info.encryptLower32 = Md5.hashStr(info.encryptStr)
|
|
info.encryptUpper32 = info.encryptLower32.toUpperCase()
|
|
info.encryptUpper16 = info.encryptUpper32.substring(8, 24)
|
|
info.encryptLower16 = info.encryptLower32.substring(8, 24)
|
|
}
|
|
|
|
//清空输入框
|
|
const clear = () => {
|
|
info.encryptStr = ''
|
|
}
|
|
|
|
//copy
|
|
const copyRes = async (resStr: string) => {
|
|
copy(resStr)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col mt-3 flex-1">
|
|
<DetailHeader :title="info.title"></DetailHeader>
|
|
|
|
<div class="p-4 rounded-2xl bg-white ">
|
|
<div>
|
|
<el-input v-model="info.encryptStr" :rows="5" type="textarea" placeholder="请输入加密内容"></el-input>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<el-button type="primary" @click="encrypt()" >加密</el-button>
|
|
<el-button type="primary" @click="clear()">清空输入框</el-button>
|
|
</div>
|
|
|
|
<div class="w-[30rem]">
|
|
<el-input :value="info.encryptUpper32" class="mt-4" readonly>
|
|
<template #prepend>
|
|
<el-text>32位大写</el-text>
|
|
</template>
|
|
<template #append>
|
|
<el-button @click="copyRes(info.encryptUpper32)">复制</el-button>
|
|
</template>
|
|
</el-input>
|
|
|
|
<el-input :value="info.encryptLower32" class="mt-2" readonly>
|
|
<template #prepend>
|
|
<el-text>32位小写</el-text>
|
|
</template>
|
|
<template #append>
|
|
<el-button @click="copyRes(info.encryptLower32)">复制</el-button>
|
|
</template>
|
|
</el-input>
|
|
|
|
<el-input :value="info.encryptUpper16" class="mt-2" readonly>
|
|
<template #prepend>
|
|
<el-text>16位大写</el-text>
|
|
</template>
|
|
<template #append>
|
|
<el-button @click="copyRes(info.encryptUpper16)">复制</el-button>
|
|
</template>
|
|
</el-input>
|
|
|
|
<el-input :value="info.encryptLower16" class="mt-2" readonly>
|
|
<template #prepend>
|
|
<el-text>16位小写</el-text>
|
|
</template>
|
|
<template #append>
|
|
<el-button @click="copyRes(info.encryptLower16)">复制</el-button>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |