ref 的作用
Posted 我就尝一口
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ref 的作用相关的知识，希望对你有一定的参考价值。
今日在项目中写一个表情的按钮，点击显示小表情窗口，点击窗口外任意一处隐藏窗口，可以使用 ref 与 $refs 来实现：
ref 的基本用法：获取DOM元素
<div class="mt10 ml5 posi-rel">
<!-- 表情按钮 -->
<span ref="emoji" class="emoji disinblock mr10 cursor-pointer" @click="togglePanel">
</span>
<!-- @ -->
<span class="alt disinblock cursor-pointer"></span>
<!-- 评论按钮 -->
<el-button type="primary" round size="mini" class=\'fr\'>评论</el-button>
<!-- 表情包div -->
<div>
<div class="emoji-dialog posi-ab" v-show="showEmojiFlag"></div>
</div>
</div>
methods: {
togglePanel() {
this.showEmojiFlag ? this.hide() : this.show()
},
show() {
this.showEmojiFlag = true
document.addEventListener(\'click\', this.hidePanel, false)
},
hide() {
this.showEmojiFlag = false
document.removeEventListener(\'click\', this.hidePanel, false)
},
hidePanel(e) {
if (!this.$refs.emoji.contains(e.target)) {
this.hide()
}
}
},
以上是关于ref 的作用的主要内容，如果未能解决你的问题，请参考以下文章