ref 的作用

时间：2021-05-24 09:43:25 阅读：18 评论：0 收藏：0 [点我收藏+]

今日在项目中写一个表情的按钮，点击显示小表情窗口，点击窗口外任意一处隐藏窗口，可以使用 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 的作用

原文：https://www.cnblogs.com/bulu08042/p/14802742.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)