vue3 element plus el-tooltip文字提示实现多行展示

需求

上传文件时可以提示需要的目录结构

例如需要的提示信息：
─ src.zip                       # 源代码
	─ api.conf                  # 所有请求
	─ assets                 	# 主题 字体等静态资源
	─ components             	# 全局公用组件
	─ directive              	# 全局指令
	─ filters                	# 全局 filter
	─ icons                  	# 项目所有 svg icons

获取组件

Element tooltip

<template>
  <el-tooltip placement="top">
  <template #content>
    多行信息<br/>第二行信息
  </template>
  <el-button>Top center</el-button>
</el-tooltip>
</template>

效果

虽然这样可以实现多行展示，但是需要将内容写死在html页面，修改一下，传入变量

<template>
  <div>
    <el-tooltip placement="top">
      <template #content> {{ tip }} </template>
      <el-button>Top center</el-button>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tip: [
        "提示信息：",
        "─ src.zip                  # 源代码",
        "	─ api.conf                # 所有请求",
        "	─ assets                 	# 主题 字体等静态资源",
        "	─ components             	# 全局公用组件",
        "	─ directive              	# 全局指令",
        "	─ filters                	# 全局 filter",
        "	─ icons                  	# 项目所有 svg icons",
      ],
    };
  },
};
</script>

单纯的引用变量只会在一行展示，继续修改

<template>
  <div>
    <el-tooltip placement="top">
	  <template #content>
        <template v-for="item in tip" :key="item"> {{ item }}<br /> </template>
      </template>
      <el-button>Top center</el-button>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tip: [
        "提示信息：",
        "─ src.zip                  # 源代码",
        "	─ api.conf                # 所有请求",
        "	─ assets                 	# 主题 字体等静态资源",
        "	─ components             	# 全局公用组件",
        "	─ directive              	# 全局指令",
        "	─ filters                	# 全局 filter",
        "	─ icons                  	# 项目所有 svg icons",
      ],
    };
  },
};
</script>

可以显示多行了，但是无法体现目录结构

<template>
  <div>
    <el-tooltip placement="top">
      <template #content>
        <template v-for="item in tips" :key="item">
          {{ item.replace(/\t/g, "&#12288").replace(/\0/g,"&#160") }}<br />
        </template>
      </template>

      <el-button>Top center</el-button>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tip: [
        "提示信息：",
        "─ src.zip\t\t\t\t         # 源代码",
        "\t\t─ api.conf\t\t\t\t                # 所有请求",
        "\t\t─ assets\t\t\t\t               	# 主题 字体等静态资源",
        "\t\t─ components\t\t\t\t            	# 全局公用组件",
        "\t\t─ directive\t\t\t\t            	# 全局指令",
        "\t\t─ filters\t\t\t              	# 全局 filter",
        "\t\t─ icons\t\t\t\t                	# 项目所有 svg icons",
      ],
    };
  },
};
</script>

添加特殊字符，使用字符串替换，将特殊字符转换为空格,就可以按需求实现想要的布局