vue3.0 + element Plus 使用MessageBox 消息弹框给文件重命名

1. html部分（添加文件重命名按钮）

<!--这里我是引入的自定义组件，el-button也可以-->
<table-option-btn type="rename" @callback="onRename"></table-option-btn>

2. js部分

<script lang="ts" setup>
import { ElMessageBox } from "element-plus";

//样本重命名数据
const { mutate: renameSample, onDone: onSampleRenameDone } = useMutation(
  mutationUpdateAlgConfigImageFilename
);

//样本重命名
const onRename = () => {
  //props.data.filename（修改前的文件名）是通过接受父组件传值得到的，你们可以根据自己的接口获取原文件名
  const originFileName = props.data.filename;
//使用三元表达式判断得到不带文件名后缀的文件名filename 
  const filename =
    originFileName.lastIndexOf(".") > -1
      ? originFileName.substring(0, originFileName.lastIndexOf("."))
      : originFileName;
 /*
 调用 ElMessageBox.prompt方法以打开prompt框。
 它模拟了系统的prompt。 
 可以用inputPattern字段自己规定匹配模式，使用 inputValidator 来指**定验证方法，它应该返回 
 Boolean 或 String。 
 返回false或String表示验证失败，返回的字符串**将用作 inputErrorMessage，用来提示用户错误原因。
*/
  ElMessageBox.prompt("", "重命名样本名称", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
    inputValue: filename + "",
    inputErrorMessage: "请输入新的名称",
  })
    .then((value) => {
      renameSample({
        algConfigImageId: props.data.id,
        command: value.value,
      });
    })
    .catch(({ value }) => {
      ElMessage({
        type: "info",
        message: "取消修改",
      });
    });
};
onSampleRenameDone((res) => {
  onTableOptionBtns(true);
});


</script>

3. 效果如下：