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

安装

npm i @blueking/functional-dependency

使用

• vue3框架下使用

<template>
  <div class="app">
    <FunctionalDependency
      :guide-desc-list="[
        '1. 配置平台：ES 服务',
        '2. 蓝鲸监控：监控日志套餐',
        '3. 容器管理平台：容器管理套餐',
        '4. 持续集成平台：持续集成套餐',
      ]"
      functional-desc="使用容器服务，蓝鲸将为您快速搭建、运维和管理容器集群，您可以轻松对容器进行启动、停止等操作，也可以查看集群、容器及服务的状态。"
      guide-title="如需使用该功能，需要部署："
      title="暂无集群容器功能"
    />
  </div>
</template>
<script setup lang="ts">
  import FunctionalDependency from '@blueking/functional-dependency';
  import '@blueking/functional-dependency/vue3/vue3.css'
</script>

• vue2框架下使用

<template>
  <div class="app">
    <FunctionalDependency
      :guide-desc-list="[
        '1. 配置平台：ES 服务',
        '2. 蓝鲸监控：监控日志套餐',
        '3. 容器管理平台：容器管理套餐',
        '4. 持续集成平台：持续集成套餐',
      ]"
      functional-desc="使用容器服务，蓝鲸将为您快速搭建、运维和管理容器集群，您可以轻松对容器进行启动、停止等操作，也可以查看集群、容器及服务的状态。"
      guide-title="如需使用该功能，需要部署："
      title="暂无集群容器功能"
    />
  </div>
</template>
<script setup lang="ts">
  import FunctionalDependency from '@blueking/functional-dependency/vue2';
  import '@blueking/functional-dependency/vue2/vue2.css'
</script>

属性列表

| 属性名 | 描述 | 属性类型 | 默认值 | | -------------- | ---------------------------------------------- | --------------------------------- | ------ | | mode | 展示模式 | 'dialog' \| 'page' \| 'partial' | page | | showDialog | 弹窗dialog模式时是否显示dialog，其他模式下无效 | boolean | false | | title | 功能依赖标题 | string | | | functionalDesc | 功能依赖描述 | string | | | guideTitle | 功能指引标题 | string | | | guideDescList | 功能指引描述列表 | string[] | |

事件列表

| 事件名 | 参数 | 参数类型 | 描述 | | ----------------- | ----- | -------------- | -------------- | | update:showDialog | value | value: boolean | 更新showDialog | | gotoMore | | | 点击了解更多 |