如何让不同的el-popover使用同样的文本内容列如“负责人: 工艺负责人: 工位编号:”
时间: 2024-11-23 22:31:06 浏览: 15
在 Vue 中,如果你想在一个 `el-popover` 元素中复用相同的文本内容,你可以创建一个单独的模板或计算属性,然后在需要的地方引用这个模板或属性。这里有一个简单的例子:
首先,定义一个数据对象,包含你要重复使用的文本内容,例如:
```javascript
data() {
return {
sharedPopoverContent: {
header: '负责人:',
subheader: '工艺负责人:',
detail: '工位编号:'
}
};
},
```
然后,在需要显示这些文本的地方,你可以这样做:
```html
<template>
<el-popover v-model="showPopover" placement="bottom">
<!-- 使用 slot 插入共享的内容 -->
<template #default="{ $slots }">
<div>{{ sharedPopoverContent.header }}</div>
<div>{{ sharedPopoverContent.subheader }}</div>
<div>{{ sharedPopoverContent.detail }}</div>
<!-- 显示所有slot中的内容 -->
<slot></slot>
</template>
</el-popover>
<!-- 只需改变 showPopover 的值就可以显示或隐藏popover -->
<button @click="showPopover = true">显示 popover</button>
</template>
```
在这个例子中,当你点击按钮时,`el-popover` 就会显示预设的文本,同时如果其他地方有自定义内容(比如使用 `<slot>`),也会被正确地插入到同一个 popover 内。
如果你需要根据不同的上下文动态调整某些文本,也可以在计算属性或方法里处理这个 `sharedPopoverContent` 对象。
阅读全文