el-tooltip点击后才显示内容

最新推荐文章于 2024-06-04 09:43:42 发布

m0_68937827

最新推荐文章于 2024-06-04 09:43:42 发布

阅读量861

点赞数 2

文章标签：前端 javascript elementui

本文链接：https://blog.youkuaiyun.com/m0_68937827/article/details/139007750

版权

<div class="stock" v-for="(item, index) in dataList" :key="index">
	<el-tooltip effect="dark" placement="top" manual :ref="'tooltip-' + item.id">
		<div slot="content">
			<!-- 点击后才显示的内容写在这里 -->
			编号: {{ item.code }}
			{{ popoverList }}
		</div>
		<div class="tooltip" @click="handleClickView(item.id)">
            <!-- 外层内容写在这里 --> 
            <div>点击查看数据</div>  
		</div>
	</el-tooltip>
 </div>

data() {
	return {
		dataList: [
			{id: 1, code: '123'},
			{id: 2, code: '145'},
			{id: 3, code: '125'},
		],
		popoverList: null,
		clickId: ''
	}
},
created() {
	document.addEventListener('click', this.handleClick)
},
methods: {
	// 点击其它地方隐藏tooltip
	handleClick() {
      if (this.clickId === '') {
        return
      } else {
        this.$refs[`${'tooltip-' + this.clickId}`][0].showPopper = !this.$refs[`${'tooltip-' + this.clickId}`][0].showPopper
        this.clickId = ''
      }
    },
	// 点击对应的框触发
	handleClickView(id) {
		getById(id).then(res => {
		 	if (res.code === 0) {
		 		  this.popoverList = res.data
		 		  this.clickId = id
		 		  // 获取到含有'tooltip'关键词且不含当前id的refs,
		 		  const refsWithKeyword = this.getRefsWithKeyword('tooltip', id)
		 		  // 将所有获取到的refs中的tooltip隐藏
		          refsWithKeyword.forEach(item => {
		            item[0].showPopper = false
		          })
		          // 只切换当前的tooltip显示/隐藏
		          this.$refs[`${'tooltip-' + id}`][0].showPopper = !this.$refs[`${'tooltip-' + id}`][0].showPopper
		 	}
		})
	},
	getRefsWithKeyword(keyword, id) {
      return Object.keys(this.$refs)
        .filter(refName => refName.includes(keyword) && !refName.includes(id))
        .map(refName => this.$refs[refName]);
    },
}