vue3+ts，<script lang="ts" setup></script>使用sm4 CBC加密解密表格的手机号字段

对于使用 Vue 3 和 TypeScript，您可以在 `<script>` 标签中使用 `lang="ts"` 来指定使用 TypeScript 语言。在 Vue 3 中，您可以使用 `<script lang="ts" setup></script>` 来编写组件的逻辑部分。

要使用 SM4 CBC 加密解密表格的手机号字段，您可以使用 CryptoJS 库来执行加密和解密操作。首先，您需要安装 CryptoJS：

npm install crypto-js

然后，在组件中导入所需的模块：

import { sm4 } from 'crypto-js';

接下来，您可以定义一个函数来执行加密和解密操作：

// 密钥，这里仅作示例，请根据实际需求更改为安全的密钥
const key = 'your-secret-key';

// 加密函数
function encrypt(value: string): string {
  const encrypted = sm4.encrypt(value, key, {
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
}

// 解密函数
function decrypt(encryptedValue: string): string {
  const decrypted = sm4.decrypt(encryptedValue, key, {
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return decrypted.toString(CryptoJS.enc.Utf8);
}

在您的表格组件中，您可以调用这些函数来加密和解密手机号字段：

<template>
  <div>
    <input v-model="phoneNumber" placeholder="手机号">
    <button @click="encryptPhoneNumber">加密</button>
    <button @click="decryptPhoneNumber">解密</button>
    <p>加密后的手机号：{{ encryptedPhoneNumber }}</p>
    <p>解密后的手机号：{{ decryptedPhoneNumber }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { encrypt, decrypt } from './crypto';

const phoneNumber = ref('');
const encryptedPhoneNumber = ref('');
const decryptedPhoneNumber = ref('');

function encryptPhoneNumber() {
  encryptedPhoneNumber.value = encrypt(phoneNumber.value);
}

function decryptPhoneNumber() {
  decryptedPhoneNumber.value = decrypt(encryptedPhoneNumber.value);
}
</script>

请注意，这只是一个简单的示例，您需要根据实际需求进行适当的安全性和错误处理。另外，确保在生产环境中使用适当的密钥管理和加密/解密策略。