@blueking/functional-dependency

支持 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			点击了解更多