tencentblueking / bkui-vue2

根据蓝鲸前端规范、设计规范并结合我们业务开发过程中的积累沉淀，提供一套基础组件，供开发人员使用

English | 简体中文

bk-magic-vue

基于蓝鲸 Magicbox 和 Vue 的前端组件库

安装

$ npm install --save bk-magic-vue

使用

全量引入

import bkMagicVue from 'bk-magic-vue'
import 'bk-magic-vue/dist/bk-magic-vue.min.css'
Vue.use(bkMagicVue)

按需引入

按需引入我们需要借助 babel-plugin-import-bk-magic-vue 来实现。

首先，安装 babel-plugin-import-bk-magic-vue

npm i babel-plugin-import-bk-magic-vue -D

然后需要在项目的 .babelrc 文件中 plugins 增加配置

// baseLibName 是 bk-magic-vue 组件库的 package name，默认值为 bk-magic-vue
{
    "presets": ...,
    "plugins": [
        ...
        ["import-bk-magic-vue", {
            "baseLibName": "bk-magic-vue"
        }]
    ]
}

之后就可以用如下语法形式来实现按需引用了

import { bkButton } from 'bk-magic-vue'
import { bkButton as cc } from 'bk-magic-vue'
import { bkButton, bkDropdownMenu } from 'bk-magic-vue'
import { bkButton as cc, bkDropdownMenu as dd } from 'bk-magic-vue'
console.log(bkButton)
console.log(cc)
console.log(bkDropdownMenu)
console.log(dd)

开发

npm run dev

构建

npm run build

BlueKing Community

• BK-CMDB：蓝鲸配置平台（蓝鲸CMDB）是一个面向资产及应用的企业级配置管理平台。
• BK-CI：蓝鲸持续集成平台是一个开源的持续集成和持续交付系统，可以轻松将你的研发流程呈现到你面前。
• BK-BCS：蓝鲸容器管理平台是以容器技术为基础，为微服务业务提供编排管理的基础服务平台。
• BK-PaaS：蓝鲸PaaS平台是一个开放式的开发平台，让开发者可以方便快捷地创建、开发、部署和管理SaaS应用。
• BK-SOPS：标准运维（SOPS）是通过可视化的图形界面进行任务流程编排和执行的系统，是蓝鲸体系中一款轻量级的调度编排类SaaS产品。
• BK-JOB：蓝鲸作业平台(Job)是一套运维脚本管理系统，具备海量任务并发处理能力。
• BK-BASE：蓝鲸基础计算平台(BK-BASE)是一个专注于运维领域的的基础平台，打造一站式、低门槛的基础服务。

Contributing

对于项目感兴趣，想一起贡献并完善项目请参阅Contributing Guide。

腾讯开源激励计划 鼓励开发者的参与和贡献，期待你的加入。

License

基于 MIT 协议， 详细请参考LICENSE

bkui-vue2's Issues

[virtual-scroll] 展开折叠的定位问题

没有往下展开

[TimePicker]禁止选择的选项，鼠标悬浮样式问题

Button 不支持类似于Iview的long 属性

这个感觉少部分情况下也会用到，你们评估下加不加吧

bug: 面包屑组件颜色与设计相反，可点击的链接颜色应该为深色

Slider 带输入的选择时，数字过大显示不全

add: 新增组件 - City 城市选择器

【问题描述】
【add】快速选择**城市，常用于地图等基于位置的城市选择场景

[cascade]组件bug问题

<bk-cascade
v-model="value"
:list="facList"
clearable
filterable
check-any-level
style="width: 250px;"
@change="handleChange">

当属性filterable check-any-level共同设置的时候，在搜索框里输入关键词查询然后选中某一个值的时候内存溢出，网页会崩溃

input type="number"时:clearable="true"无效

当页面有两个Tree时，一个开启拖拽另一个不开启 ，可以将开启拖拽Tree的节点拖拽到另一个非开启拖拽的Tree里....

不是知道是不是这样设计的... 总感觉哪里怪怪的....

[number-input]点击箭头value为Number,直接输入为String

当为number-input的时候，应该一直为Number

[dropdown-menu]嵌套在表格中，bigtree tree 组件中，无法显示出来。

第二：建议属性配置，可以支持fixed定位。以及 appendTo 指定目标元素

TagInput 分组多选在清空选择项时会闪烁下拉框一下

Navigation 有点反人类，鼠标移上去无法定位当前选择的，会飘

可自定义tab组件新增按钮

【bug】Tab

是BUG反馈还是需求提交(Is this a BUG REPORT or FEATURE REQUEST)? (choose one):

PaaS/PaaSAgent版本(The versions used):

发生了什么(What happened):

期望是什么(What you expected to happen):

如何复现(How to reproduce it):

相关的日志详情(访问日志及应用日志: paas.log/login.log/esb.log/esb_api.log)和截图等(Log & Screenshot):

备注(Anything else we need to know):

add: 新增组件 - Spin 加载中

【问题描述】
【add】加载中组件，用于显示记录状态等场景

Dialog组件同时设置v-if，v-model，关闭的时候会报错

Dialog组件同时设置v-if，v-model，关闭的时候会报错

add: 新增指令 - 复制文本指令

【问题描述】 
【add】提供一个指令能快速实现点击复制内容

[TimePicker]禁止选择的时间，滚动可以选择

是否需要滚动到灰色模块，时间保持不变，或者其他优化？

表单内select与searchSelect无法正常校验

是BUG反馈还是需求提交(Is this a BUG REPORT or FEATURE REQUEST)? (choose one):
BUG反馈

PaaS/PaaSAgent版本(The versions used):
NO

发生了什么(What happened):
表单里面的select，我的trigger设置成change，点清空的时候没有触发校验
searchSelect 设置成blur或者change，选择失去焦点都不会触发校验

期望是什么(What you expected to happen):
这些项目能够正常触发校验

如何复现(How to reproduce it):
表单里添加select组件，设置校验规则为 必须 ，触发条件 为 change。点清空
表单里添加searchSelect组件，设置校验规则为 必须 ，触发条件 为 blur或者change。添加一些项目，然后清空，失去焦点

相关的日志详情(访问日志及应用日志: paas.log/login.log/esb.log/esb_api.log)和截图等(Log & Screenshot):
NO

备注(Anything else we need to know):
NO

bug: table 组件调用 clearFilter 方法时会出现栈溢出

table 组件调用 clearFilter 方法时会出现栈溢出

feature: 增加需求 - Badge，不包裹任何元素，独立使用

【问题描述】
【feature】不包裹任何元素，独立使用

feature: 增加需求 - input组件

【问题描述】
【feature】输入框希望有个配置，清空操作icon在hover时候才出现

Input left-icon&right-icon 尝试使用Icon图标无效

组件库文档增加业务组件文档

组件库文档增加业务组件文档

https://www.npmjs.com/~blueking 里的均为我们的业务组件

dialog header 行高不够 导致国际化时 英文显示不全

目前是1.1是不够的

bug: Cascade 级联选框 搜索选中第三层目录时，handleChange里的selectList值为空

<template>
  <bk-cascade
    v-model="value"
    :list="list"
    clearable
    filterable
    style="width: 250px;"
    @change="handleChange">
  </bk-cascade>
</template>
  <script>

  export default {
    data(s) {
      return {
        value: [],
        list: [
          {
            id: 'hunan',
            name: '湖南',
            children: [
              {
                id: 'changsha',
                name: '长沙',
              },
              {
                id: 'yueyang',
                name: '岳阳',
              },
            ],
          }, {
            id: 'guangxi',
            name: '广西',
          }, {
            id: 'yunnan',
            name: '云南',
            children: [
              {
                id: 'kunming',
                name: '昆明',
                children: [
                  {
                    id: 'wuhuaqu',
                    name: '五华区',
                  },
                  {
                    id: 'guanduqu',
                    name: '官渡区',
                  },
                  {
                    id: 'xishanqu',
                    name: '西山区',
                  },
                ],
              },
              {
                id: 0,
                name: '大理',
              },
              {
                id: '',
                name: '玉溪',
              },
            ],
          },
        ],
      }
    },
    methods: {
      handleChange(newValue, oldValue, selectList) {
        console.log(newValue, oldValue, selectList)
      },
    },
  }
  </script>

test

test

是BUG反馈还是需求提交(Is this a BUG REPORT or FEATURE REQUEST)? (choose one):

PaaS/PaaSAgent版本(The versions used):

发生了什么(What happened):

期望是什么(What you expected to happen):

如何复现(How to reproduce it):

相关的日志详情(访问日志及应用日志: paas.log/login.log/esb.log/esb_api.log)和截图等(Log & Screenshot):

备注(Anything else we need to know):

多选框和输入框的x需要hover才显示

因为监控很多地方会用该组件，而且操作非常的密集，当x都默认显示的时候有各种显示上的干扰和不美观，希望可以hover的时候才显示对应的x

hover标签时，显示标签的x，hover输入框时，显示输入框清空的x

【table】多表头，固定第一列后，子表头第一列文案不见了

bug: [tab] border-card嵌入unborder-card样式问题

级联组件交互问题

bug: 组件selector下拉弹窗定位不准

【问题描述】
【bug】在一些dialog，如果有overflow，select下拉弹窗定位不准

TimePicker组件弹出层应该可设置为使用Popover组件实现

Pagination 紧凑效果 鼠标移到最后一个出现显示异常

SearchSelect 查询选择器 添加可以重新修改交互

[cascade]多选框不能选择问题

多选框，

如果id值为数字，就会出现无法选择的情况……

```json
this.list = [
            {
              id: 32823,
              name: 'gsdk',
              children: [
                {
                  id: 227461,
                  name: 'cache',
                },
                {
                  id: 227462,
                  name: 'cloud_control',
                },
                {
                  id: 591213,
                  name: 'h5https',
                },
                {
                  id: 227463,
                  name: 'Speed',
                },
              ],
            },
            {
              id: 52400,
              name: 'idip_cmd_redis',
              children: [
                {
                  id: 591214,
                  name: 'h5https',
                },
                {
                  id: 421283,
                  name: 'Speed',
                },
                {
                  id: 421281,
                  name: 'cache',
                },
                {
                  id: 421282,
                  name: 'cloud_control',
                },
              ],
            },
            {
              id: 66760,
              name: 'cloud_logsvr',
              children: [
                {
                  id: 591212,
                  name: 'h5https',
                },
                {
                  id: 489871,
                  name: 'Speed',
                },
                {
                  id: 489869,
                  name: 'cache',
                },
                {
                  id: 489870,
                  name: 'cloud_control',
                },
              ],
            },
            {
              id: 72130,
              name: 'GEMlogsvr',
              children: [
                {
                  id: 511244,
                  name: 'logsvr',
                },
              ],
            },
            {
              id: 89165,
              name: 'GEM开发编译',
              children: [
                {
                  id: 564955,
                  name: '蓝盾编译',
                },
              ],
            },
            {
              id: 93047,
              name: 'GEM服务号',
              children: [
                {
                  id: 603742,
                  name: 'image',
                },
                {
                  id: 603743,
                  name: 'modelTrain',
                },
              ],
            },
            {
              id: 32822,
              name: 'gem端游',
              children: [
                {
                  id: 227459,
                  name: 'proxy',
                },
                {
                  id: 235843,
                  name: 'spark',
                },
                {
                  id: 227460,
                  name: 'spider',
                },
              ],
            },
            {
              id: 94139,
              name: 't_bot文档',
              children: [
                {
                  id: 626613,
                  name: 'server',
                },
                {
                  id: 626612,
                  name: 'proxy',
                },
              ],
            },
            {
              id: 95507,
              name: 'tgem管理机',
              children: [
                {
                  id: 661187,
                  name: 'logsvr',
                },
              ],
            },
            {
              id: 5003813,
              name: 'gem服务节点',
              children: [
                {
                  id: 5007455,
                  name: 'server',
                },
              ],
            },
            {
              id: 108443,
              name: '服务集群',
              children: [
                {
                  id: 924194,
                  name: 'pod',
                },
                {
                  id: 925920,
                  name: 'master',
                },
              ],
            },
            {
              id: 110423,
              name: '天美编译加速',
              children: [
                {
                  id: 973877,
                  name: 'UE4编译加速',
                },
                {
                  id: 973878,
                  name: 'Unity编译加速',
                },
              ],
            },
          ];
          /* this.list = [
            {
              id: '32823',
              name: 'gsdk',
              children: [
                {
                  id: '227461',
                  name: 'cache',
                },
                {
                  id: '227462',
                  name: 'cloud_control',
                },
                {
                  id: '591213',
                  name: 'h5https',
                },
                {
                  id: '227463',
                  name: 'Speed',
                },
              ],
            },
            {
              id: '52400',
              name: 'idip_cmd_redis',
              children: [
                {
                  id: '591214',
                  name: 'h5https',
                },
                {
                  id: '421283',
                  name: 'Speed',
                },
                {
                  id: '421281',
                  name: 'cache',
                },
                {
                  id: '421282',
                  name: 'cloud_control',
                },
              ],
            },
            {
              id: '66760',
              name: 'cloud_logsvr',
              children: [
                {
                  id: '591212',
                  name: 'h5https',
                },
                {
                  id: '489871',
                  name: 'Speed',
                },
                {
                  id: '489869',
                  name: 'cache',
                },
                {
                  id: '489870',
                  name: 'cloud_control',
                },
              ],
            },
            {
              id: '72130',
              name: 'GEMlogsvr',
              children: [
                {
                  id: '511244',
                  name: 'logsvr',
                },
              ],
            },
            {
              id: '89165',
              name: 'GEM开发编译',
              children: [
                {
                  id: '564955',
                  name: '蓝盾编译',
                },
              ],
            },
            {
              id: '93047',
              name: 'GEM服务号',
              children: [
                {
                  id: '603742',
                  name: 'image',
                },
                {
                  id: '603743',
                  name: 'modelTrain',
                },
              ],
            },
            {
              id: '32822',
              name: 'gem端游',
              children: [
                {
                  id: '227459',
                  name: 'proxy',
                },
                {
                  id: '235843',
                  name: 'spark',
                },
                {
                  id: '227460',
                  name: 'spider',
                },
              ],
            },
            {
              id: '94139',
              name: 't_bot文档',
              children: [
                {
                  id: '626613',
                  name: 'server',
                },
                {
                  id: '626612',
                  name: 'proxy',
                },
              ],
            },
            {
              id: '95507',
              name: 'tgem管理机',
              children: [
                {
                  id: '661187',
                  name: 'logsvr',
                },
              ],
            },
            {
              id: '5003813',
              name: 'gem服务节点',
              children: [
                {
                  id: '5007455',
                  name: 'server',
                },
              ],
            },
            {
              id: '108443',
              name: '服务集群',
              children: [
                {
                  id: '924194',
                  name: 'pod',
                },
                {
                  id: '925920',
                  name: 'master',
                },
              ],
            },
            {
              id: '110423',
              name: '天美编译加速',
              children: [
                {
                  id: '973877',
                  name: 'UE4编译加速',
                },
                {
                  id: '973878',
                  name: 'Unity编译加速',
                },
              ],
            },
          ];*/

Radio 将子项全部设置:checked='true' ，整个按钮组失效

Upload 上传文件后，文件名称显示不全，似乎下三分之一的部分被遮挡

bug: Cascade级联选择器使用bug

【问题描述】
【bug】级联选择器，在 :filter="true" 条件下，对级联选择器赋予初值之后，下拉选项会自动展开，且初值无法展示，但点击级联选择器的输入框后初值会重新展示出来

Select/下拉组件 - 分组下拉，希望分组可展开、收起

场景： 以RT作为分组，选择组里的字段

类似功能组件： 级联选择器：被产品否决，认为在一级列表只有1、2个的时候，不好用

【tab】无边框，底下选中，位置不正确

产生原因：

index 无法找到

从而产生报错

[upload]组件图片回填不是动态的

缺少对files的监听，在实际使用中，回填的内容都是异步获取的，这个回填无法实现

bug: form 控件的背景色没有设置

【问题描述】
有很多form 控件的背景色没设置

DatePicker 点击图示前侧图标时，边框蓝色高亮会重复闪烁

我认为这个处于打开状态了，只要用户的鼠标还在选择区域内，蓝色高亮就不应该重复闪烁

表单验证

• 对部分表单字段进行验证，目前只能一次验证整个表单
• 在script里面指定某个表单字段的错误信息，目前表单项的错误信息只能通过验证操作才能展示

Tree 异步加载时loading 图标靠下

DropdownMenu，select，DatePicker 下拉间距不统一，建议抽离变量处理

bug: 组件tab一开始下划线没有，点击后才出现

【问题描述】
【bug】Dialog嵌套Tab，tab一开始下划线没有，点击后才出现

bk-button组件在text=true时，theme失效

是BUG反馈还是需求提交(Is this a BUG REPORT or FEATURE REQUEST)? (choose one):
BUG反馈

PaaS/PaaSAgent版本(The versions used):
无

发生了什么(What happened):
bk-button 当 text=true时，theme选项会失效

期望是什么(What you expected to happen):
当text=true时，theme的danger等变色选项也应该生效

如何复现(How to reproduce it):

相关的日志详情(访问日志及应用日志: paas.log/login.log/esb.log/esb_api.log)和截图等(Log & Screenshot):

备注(Anything else we need to know):