Vue3 +elementPlus Tooltip提示动态换行

最新推荐文章于 2025-08-26 17:57:48 发布

原创最新推荐文章于 2025-08-26 17:57:48 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讲述了在Vue模板中使用`el-table`时，如何避免XSS攻击，强调了`content`属性动态渲染HTML片段的风险，并提供了处理长文本的示例，以确保内容安全。

直接上代码：

<template>
  <div class="gather-info">
    <section class="gather-item">
      <el-table
        :data="data.table"
        style="width: 100%"
        stripe
        max-height="250"
      >
        <el-table-column prop="time" label="时间" fixed>
        </el-table-column>
      
        <el-table-column prop="content" label="描述">
          <template #default="scope">
            <el-tooltip
              effect="light"
              placement="top-start"
              raw-content
              :content="processNewLine(scope.row.content)"
            >
              <span> {{ scope.row.content.substring(0, 24) + "..." }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </section>

  </div>
</template>
<script setup>

const data = reactive({
   table: [
    {
      time: "2023/9/13 5:53",
      content:"content 属性虽然支持传入 HTML 片段，
但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。
 因此在 raw-content 打开的情况下，请确保 content 的内容是可信的，
永远不要将用户提交的内容赋值给 content 属性。",
    },]
})

const processNewLine = (val) => {
  if (val.length > 30) {
 //通过match方法在字符串内检索指定的值,然后进行匹配，里面的20，就是你想间隔的字符位数。
    val = val.match(/.{1,30}/g).join("<br/>");
  } else {
    val = val;
  }
  return val;
};


onMounted(async () => {

});
</script>