【魔改bkui】使用bkui过程中的抓马瞬间

本文来自腾讯蓝鲸智云社区用户：kai

索引

---

0前言

1 "魔改"支持自定义输入的select

• 前情提要
• “魔改”第一步——找回组件的灵魂
• “魔改”第二步——用户体验up?
• “魔改”第三步——做icon里最靓的仔
• “魔改”第四步——拗不过的"甲方dad"

2 The End

• 一些碎碎念

前言

---

众所周知，蓝鲸平台是一个功能强大的智能运维管理平台，我们可以运用平台能力提高运维工作效率，我们也可以开发搭建属于自己的SaaS工具。

如果我们想开发一个SaaS，蓝鲸大大给我们提供了整套的前后端框架，前端页面提供了基于Vue.js的前端组件库BKUI，这个组件库整体风格清爽而简洁，蓝色系，十分适合搭建运维工具。

不过，谁说在蓝鲸平台只能做运维工具呢？我们就在上面做了一些非运维类的工具。

在此，简单分享本人在SaaS开发过程中所遇到的一些前端问题，主要是关于bkui使用过程中的各种抓马瞬间~

ps：本文中所涉及组件为magicbox中的vue2.0组件。

“魔改”支持自定义输入的select

---

前情提要

---

我们需要做一个非运维类的内部工具，其中有个这样的需求：

“下拉框，有固定选项，并需要支持自定义输入”

听起来挺平平无奇的对吧，我在bkui中快速找到了满足需求的“select”自定义输入下拉框。

---

“魔改”第一步——找回组件的灵魂

---

我第一眼相中的组件，就是这个“支持自定义输入”的select：

初看感觉十分完美，这不就是需求里描述的东西吗~

仔细一看好像少了点什么……

！！展开收起的icon呢？

就这玩意，我们需要的是一个可自定义输入的下拉框，没有这个icon的标识，下拉框都失去了灵魂好伐。

赶紧打开控制台瞅瞅怎么回事

icon明明在这，为什么看不见呢？

此时我们可以试着像剥洋葱一样，把这个组件剥开。

然后就会发现，实际上它是由一个"select"框和一个"input"框组成的，而
"input"框完美的覆盖在"select"框上，遮挡住了我们的灵魂icon。

找到症结所在，咱就给它解开！找到这个input的css并修改它！

input宽度稍微减少10%，哎，icon不就显示出来了~

完事收工~

---

“魔改”第二步——用户体验up?

---

！！！等等等等，作为开发者我们知道这是一个可输入的框，但作为用户怎么知道它可以输入呢？

毕竟点开后咱们的光标就自动跳到搜索框里去了,"input"框一点存在感都没有好吧

再看看下面那个select框中间的灰色字“请选择”，别的select框有的咱们也得有啊！

这玩意一般叫做"placeholder"，按道理设置一下就好了。

搜索一下咱们的文档，可以发现有两个，简单阅读理解一下，咱们要的是前者placeholder，后者search-placeholder是用于展开下拉框中的搜索框。

兴高采烈的准备去给代码加上一行~

​

wait a second…… have we missed anything?

这玩意不是有默认值吗？就每个select框都有的灰色字“请选择”。咱们这个框的去哪了？？

！！！有没有人已经猜到了

对！input框！修改它的class，把它变小，印证了我们的想法，“请输入”也被挡住了！

咋办？把input框继续缩小？

不，输入功能也不能落下。

那怎么办？

让input框显示提示字不就好了~

可是刚才咱们已经搜索过了属性，只有两个placeholder，没有input的对应属性，所以得想想别的办法了。

思来想去，只好用一个“笨办法”了……

首先我们去看看正宗input框的提示字属性长什么样

然后给咱们的input也加上这个属性，这个时候css修改似乎帮不上什么忙了，得通过js代码来强行添加。

mounted () {
	this.addPlaceHolder()
},
methods: {
	addPlaceHolder () {
		const e = document.querySelector('.bk-select-name')
		if (e) {
			e.setAttribute('placeholder', '请选择/输入')
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11

大功告成 ✿✿ヽ(°▽°)ノ✿

---

“魔改”第三步——做icon里最靓的仔

---

接上回书，应该有小伙伴发现了吧，魔改之后的搜索选择框左侧还有个bug

我说的bug是这个icon，不是那个bug哈，别想歪了

这个小家伙又是哪来的呢？

可能有围观群众要说了，这不就那啥吗，“前置icon”，bkui给了一个"prefix-icon"配置，设置一下就有了呗

没错，我们的蓝鲸大大已经给我们预留了这个配置

但在咱们的bk-magic-vue 图标集中，应该是找不到这个bug的吧

在这里，我想说，蓝鲸大大们给我们的icon库已经十分丰富啦，但是呢，这个，就是，怎么说呢，有的时候吧，还是没有那种能准确表达我们需要含义的icon，比如…… bug （bushi

所以我找了个icon库：Material Design Icons - Icon Library - Pictogrammers

目前它有7296个icon，总能找到一个贴近我们想表达含义的小可爱吧

这个icon库使用起来也比较方便，咱在蓝鲸大大的地盘上就不唠这个具体咋装了，请自行参照Getting Started with Vue.js - Docs - Pictogrammers

我们直接说怎么样用上心仪的icon

首先咱们看看咱们的bk icon是咋个用上去的，当我们配置了某个icon之后，就相当于引用了这个icon的css

那当我们想要用mdi的icon时，可以直接用webfont形式，如图

虽然官方十分地不推荐我们用这个webfont，但咱们主打一个叛逆

毕竟这样用起来比较快捷，只需要在我们的bk-select配置中加上这么一行

prefix-icon="mdi mdi-bug-check"
1

加完之后的效果：

这不就用上了与众不同的icon啦

不过，这个bug的位置似乎有点”小bug“哈，需要一些微调

咋整呢？应该又有小伙伴要抢答了

对咯~ 咱再给它的css加点料，这才符合我们的“魔改”主题

关于这个css到底咋个调，emmm…… 我就是一点点试出来的，修改到感觉大小位置差不多就行。

最终添加了如下代码

prefix-icon="mdi mdi-bug-check personalityIcon"
1

.personalityIcon {
	font-size: 15px;
	margin-top: -11px;
}
1
2
3
4

---

“魔改”第四步——拗不过的"甲方dad"

---

本以为这个可以输入的搜索选择框，完美的搞定了我们开头提到的需求

但是！ 甲方dad你懂的，真的是很难搞的啊

当我们美美的把测试版提交后

甲方dad:

“我有些别的要填，这个下拉框里没有怎么办？”

卑微的我：

“这个框是既可以选择，也可以直接输入的哈~”

甲方dad:

“你这个地方很难受，输入的时候默认是在下拉菜单的搜索框，如果没有就会以为没有这个选项，想不到还可以输入自定义名称……balabala”

默默地关掉对话框，接着整呗。

果然我们的蓝鲸大大不会让我们失望，我找到了这个

这个扩展插槽里的“加号”就很有灵性~

点一点看看，emmm，这玩意啥意思啊？

第一次看到这个示例的时候确实有点摸不着头脑，那索性不要管示例的设定了，直接整活

为了满足可爱的甲方Dad,我们需要的是：

点击“其他” -> 输入自定义值 -> 填充

那咱们可以尝试在扩展框里添加一个输入框，点击“其他”，切换成这个输入框。

这里要注意切换的时机，只要当我们展开下拉框时应该显示“+其他”。

当我们输完内容，点击对钩提交时，应该将展开下拉框收起。

具体代码如下：

<bk-select
	v-if="!isDisabled"
	prefix-icon="mdi mdi-bug-check personalityIcon"
	allow-create
	allow-enter
	size="large"
	v-model="formData.choice"
	@toggle="selectToggle"
	ext-cls="select-custom"
	search-with-pinyin
	searchable>
	<bk-option v-for="(value, key) in choiceMap"
		:key="key"
		:id="key"
		:name="value">
	</bk-option>
	<div style>
		<i>  其他</i>
		<bk-input
			v-else
			v-model="formData.choice"
			right-icon="mdi mdi-check personalityIcon"
			@right-icon-click="selectExtensionCheck"
			@enter="selectExtensionCheck"
			ext-cls="input-custom"
			placeholder="请输入">
		</bk-input>
	</div>
</bk-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

selectExtension () {
	this.isAdd = !this.isAdd
	this.formData.choice = ''
},
selectExtensionCheck () {
	document.querySelector('.select-custom').click()
},
selectToggle (isToggle) {
	this.isAdd = !isToggle
}
1
2
3
4
5
6
7
8
9
10

改完大概是这个样子：

至此，这个扩展插槽已经符合了我们的"甲方dad"要求

就是看起来总感觉有点怪异，这个插槽中的input框和插槽感觉不在一个世界，这个“其他”也比别的字号更大……

为了用户体验，我绝不能忍受这个诡异的框以及不统一的字号，当然要想办法去把它融进插槽的世界！

然后我又打开了控制台，开始剥洋葱……最终我加上了如下css

.icon-plus-circle {
    display: inline-block;
    vertical-align: -1px;
    font-size: 14px !important;
    margin-right: 4px;
}
.bk-form-control.with-right-icon.input-custom .bk-form-input {
    background-color: #fafbfd;
    border: 0;
}
.bk-form-control.with-right-icon.control-active.input-custom .bk-form-input {
    background-color: #fafbfd !important;
    border: 0 !important;
}
.bk-select-extension:hover {
    background-color: #fafbfd;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

什么里层外层的颜色、鼠标放置时的颜色、突兀的边框，统统给我变和谐！

最终效果如下图，甲方dad表示很满意✿✿ヽ(°▽°)ノ✿

ps： 虽然我们有了扩展插槽的输入框，但allow create 配置也不要关掉哦，不然单纯的select框将无法回显输入的东西

The End

---

至此，我们这个朴实无华的需求 “下拉框，有固定选项，并需要支持自定义输入”，就算正式完成啦。

篇幅有限，本篇文章主要分享一个组件的“魔改”方案，不知道大家在开发自己的SaaS时会不会遇到和我一样的“抓马瞬间”呢，欢迎一起交流讨论呀~

一些碎碎念

作为一个运维小姐姐，在从学生转变到职场打工人后，我就开始接触蓝鲸了。在此过程中收获颇丰，从蓝鲸各种平台能力带来的便利，到开发项目时的快速构建，不得不感慨一句蓝鲸平台真不错！

目前自己也还在不断学习中，平时也并不是专职开发前端的，可能有些知识了解的还不全面，如果文中有什么错误的地方，麻烦各位大佬轻喷~

最最最后，个人认为在页面这块，最重要的是用户体验，因此当我们准备在蓝鲸平台做一些更“花里胡哨”的SaaS工具时，我开始寻找一些不同风格的UI，希望让风格变的更加多样化，让用户有一个想继续使用的第一印象。

然后我就尝试了一些，比如bulma.js buefy.js，但在实际开发过程中发现，很多组件交互功能还得是bkui香啊，需要的大多数组件功能还是bkui比较全，这里不自主的想给我们的蓝鲸大大点个赞。

当然，有些页面也不一定非要框在某些UI组件里面，也可以尝试在网络上多看看别人的网页是什么样的找找灵感，或者是有他人分享的好模板，也可以尝试自己进行修改，去适配自己的需求。

我目前“魔改”过的一些页面：

总而言之，言而总之~

除了好用的UI、模板之外，最最最最重要的还是一个好的idea，多多发挥咱们的想象力，bkui也可以组合出一些 “花里胡哨”。

ps: 如果屏幕前的你觉得我的这篇文章有那么点意思的话，麻烦动动小手指分享给其他朋友们看看叭~