use jest create ut for this component: <template>
  <div class="update-func-container">
    <el-popover
      v-bind="priPopoverProps"
    >
      <slot name="popover" />
      <div slot="reference" class="update-func">
        <el-badge
          v-bind="priBadgeProps"
          @mouseenter.native="__tagetMouseenter"
          @click.native="__targetClick"
        >
          <slot />
        </el-badge>
      </div>
    </el-popover>
  </div>
</template>

<script>
const defaultPopoverProps = {
  placement: 'top',
  disabled: false,
  trigger: 'hover'
}
const defaultBadgeProps = {
  'is-dot': true
}
export default {
  data() {
    return {
      isShow: true,
      priPopoverProps: {},
      priBadgeProps: {}
    }
  },
  watch: {
    popoverProps() {
      this.__initPopoverParams()
    },
    badgeProps() {
      this.__initBadgeParams()
    }
  },
  created() {
    this.__initParams()
    this.__setTimeoutToHide()
  },
  methods: {
    __initParams() {
      this.__initPopoverParams()
      this.__initBadgeParams()
    },
    __initPopoverParams() {
      // popover props
      let popoverProps = Object.assign({}, defaultPopoverProps, this.popoverProps)
      Object.keys(popoverProps).map(key => {
        this.$set(this.priPopoverProps, key, popoverProps[key])
      })
      this.__isShowPopover()
    },
    __initBadgeParams() {
      let badgeProps = Object.assign({}, defaultBadgeProps, this.badgeProps)
      Object.keys(badgeProps).map(key => {
        this.$set(this.priBadgeProps, key, badgeProps[key])
      })
      if (this.badgeProps.value) {
        this.$set(this.priBadgeProps, 'is-dot', false)
      }
      let newFuncIdentify = localStorage.getItem('newFuncIdentify')
      let reg = new RegExp(`-${this.updateKey}-`)
      if (reg.test(newFuncIdentify)) {
        this.clearBadge()
      }
    },
    __setTimeoutToHide() {
      let hideByTimeout = parseInt(this.hideByTimeout)
      let countdown = parseInt(this.countdown)
      if (hideByTimeout > 0) {
        // 有设置超时时间优先
        let currentTime = new Date().getTime()
        if (currentTime >= hideByTimeout) {
          this.clearBadge()
        }
      } else {
        // 无设置超时时间
        if (countdown > 0 && !this.priBadgeProps.hidden) {
          let timer = setTimeout(() => {
            this.clearBadge()
            clearTimeout(timer)
          }, countdown)
        }
      }
    },
    __isShowPopover() {
      if (!this.popoverProps.content && !this.$slots.popover) {
        this.$set(this.priPopoverProps, 'disabled', true)
      }
    },
    __tagetMouseenter() {
      if (this.trigger === 'hover' && !this.priBadgeProps.hidden) {
        this.clearBadge()
      }
    },
    __targetClick() {
      if (this.trigger === 'click' && !this.priBadgeProps.hidden) {
        this.clearBadge()
      }
    },
    __setStorageKey() {
      let newFuncIdentify = localStorage.getItem('newFuncIdentify') || ''
      let reg = new RegExp(`-${this.updateKey}-`)
      if (!reg.test(newFuncIdentify)) {
        localStorage.setItem('newFuncIdentify', `${newFuncIdentify}-${this.updateKey}-`)
      }
    },
    clearBadge() {
      this.$set(this.priBadgeProps, 'hidden', true)
      this.__setStorageKey()
      this.$emit('clearBadge')
    }
  }
}
</script>