简介

蓝鲸站点使用chrome浏览器提示组件，点击不再提醒后，cookie会写入记录， 蓝鲸站点下共用该cookie， 不重复提示。

支持 Vue2/Vue3 版本 无差别使用

安装

npm i @blueking/chrome-tips

使用

ps: 此组件若同时跟消息通知组件同时引用， 引用位置位于消息通知组件上方， 且两者同时出现时

• vue3框架下使用

<template>
  <div class="app">
    <ChromeTips
      domain='xxx.bktencent.com'
      @show-tips-change="showTipsChange"
      // 消息通知组件的跑马灯是否展示，如果未同时接入消息通知组件可删除此样式
      :style="{ 'margin-bottom': showAlert ? '2px' : '' }"
  />
  </div>
</template>
<script setup lang="ts">
  import ChromeTips from '@blueking/chrome-tips';
  import '@blueking/chrome-tips/vue3/vue3.css';
  import { ref } from 'vue';

  // chromeTips是否展示
  const showChromeTips = ref(false);

  // tips显示状态事件回调
  function showTipsChange (isShow) {
    showChromeTips.value = isShow;
  }
</script>

• vue2框架下使用

<template>
  <div class="app">
    <ChromeTips
      domain='xxx.bktencent.com'
      @show-tips-change="showTipsChange"
      // 消息通知组件的跑马灯是否展示，如果未同时接入消息通知组件可删除此样式
      :style="{ 'margin-bottom': showAlert ? '2px' : '' }"
    />
  </div>
</template>
<script>
  import ChromeTips from '@blueking/chrome-tips/vue2';
  import '@blueking/chrome-tips/vue2/vue2.css';

  export default {
    components: {
        ChromeTips
    },
    data () {
        return {
            // chromeTips是否展示
            showChromeTips: false
        }
    },
    methods: {
        // tips显示状态事件回调
        showTipsChange (isShow) {
          showChromeTips.value = isShow;
        }
    }
  }
</script>

属性列表

| 属性名 | 描述 | 属性类型 | 默认值 | | ----------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | ------ | | domain | cookie生效的domain, 如xxx.bktencent.com，则该提示在xxx.bktencent.com结尾的域名下只会出现一次 | string | '' | | domainLevel | 当domain字段为空时， 会由domainLevel计算出当前生效的domain, 如a.b.c.d.com， domainLevel设置为3，对应生效的domain为c.d.com | number | 3 | | zIndex | dialog的层级， 规范要求出现在最上面 | number | 6000 |

tips

domain值的设置， 同blueking_language，推荐使用 跟blueking_language相同的值（应用应会有统一的环境变量）

如果不设置domain值， 则会通过domainLevel计算出生效的domain, 内部版一般为2， 社区版一般为3,

chrome-tips组件的高度为40px， 蓝鲸内消息通知组件跑马灯的高度也是40px，根据设计规范，当两个组件同时状态都为展示的时候， chrome-tips组件需要设置一个2px的margin-bottom

平台根据自身需求， 决定是否需要给主体区域动态设置margin-top（若不介意未关闭时短暂的滚动条则无需处理） 都不展示时，margin-top为 0 ; 当只有一个展示时，margin-top为 40px ; 当两个都展示时， margin-top为 82px