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()

      }

    }

  },