vue3---elementPlus提示窗ElMessage显示位置修改

671 阅读1分钟

image.png 最近做了个GPT的大模型,ui效果是这样的,平常一般都是全局显示,现在要相对于父节点显示,所以记录一下,代码如下

 <div class="iconImgSort" id="iconImgSort"><div>

引入这个组件

import { ElMessage } from "element-plus";
//在提示的地方获取dom
 const container = document.getElementById('iconImgSort');
  ElMessage.success({
           message: "已成功复制到剪切板",
           customClass: "message-class",
           appendTo: container
  });
  
   appendTo: container  指的是将这个弹窗挂载到container节点上

修改css,位置自己调吧

    ::v-deep .message-class{
      position: absolute;
      top: -50px !important;
      left:8px !important
      width: max-content !important;
      max-width: max-content !important;
    }