通知 Notice ​

<template>
  <jp-notice text="有新的消息点击查看" :scrollable="true" :show-left-icon="true" :show-right-icon="true" :show-count="true" :count="10"></jp-notice>
</template>

<template>
  <jp-notice text="有新的消息点击查看" :scrollable="true" color="#FFA900" background-color="#FEF4E5"></jp-notice>
</template>

<template>
  <jp-notice text="800-820-8820" :show-left-icon="true" left-icon-type="jp-icon-search"></jp-notice>
</template>

<template>
  <jp-notice :ref="noticeRef" text="800-820-8820" :show-right-icon="true" right-icon-type="jp-icon-close" @right="doClose"></jp-notice>
</template>
<script lang="ts" setup>
import { ref, ComponentPublicInstance } from 'vue'

const notice = ref<any>(null)

const doClose = () => {
  if (notice.value) {
    notice.value.close()
  }
}
const noticeRef = (el) => {
  notice.value = el
}
</script>