本文来自腾讯蓝鲸智云社区用户：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', '请选择/输入')
}
}
}
大功告成 ✿✿ヽ(°▽°)ノ✿
***
“魔改”第三步——做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"
加完之后的效果：
这不就用上了与众不同的icon啦
不过，这个bug的位置似乎有点”小bug“哈，需要一些微调
咋整呢？应该又有小伙伴要抢答了
对咯~ 咱再给它的css加点料，这才符合我们的“魔改”主题
关于这个css到底咋个调，emmm…… 我就是一点点试出来的，修改到感觉大小位置差不多就行。
最终添加了如下代码
prefix-icon="mdi mdi-bug-check personalityIcon"
.personalityIcon {
font-size: 15px;
margin-top: -11px;
}
***
“魔改”第四步——拗不过的"甲方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>
selectExtension () {
this.isAdd = !this.isAdd
this.formData.choice = ''
},
selectExtensionCheck () {
document.querySelector('.select-custom').click()
},
selectToggle (isToggle) {
this.isAdd = !isToggle
}
改完大概是这个样子：
至此，这个扩展插槽已经符合了我们的"甲方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;
}
什么里层外层的颜色、鼠标放置时的颜色、突兀的边框，统统给我变和谐！
最终效果如下图，甲方dad表示很满意✿✿ヽ(°▽°)ノ✿
ps： 虽然我们有了扩展插槽的输入框，但allow create 配置也不要关掉哦，不然单纯的select框将无法回显输入的东西
The End
至此，我们这个朴实无华的需求 “下拉框，有固定选项，并需要支持自定义输入”，就算正式完成啦。
篇幅有限，本篇文章主要分享一个组件的“魔改”方案，不知道大家在开发自己的SaaS时会不会遇到和我一样的“抓马瞬间”呢，欢迎一起交流讨论呀~
一些碎碎念
作为一个运维小姐姐，在从学生转变到职场打工人后，我就开始接触蓝鲸了。在此过程中收获颇丰，从蓝鲸各种平台能力带来的便利，到开发项目时的快速构建，不得不感慨一句蓝鲸平台真不错！
目前自己也还在不断学习中，平时也并不是专职开发前端的，可能有些知识了解的还不全面，如果文中有什么错误的地方，麻烦各位大佬轻喷~
最最最后，个人认为在页面这块，最重要的是用户体验，因此当我们准备在蓝鲸平台做一些更“花里胡哨”的SaaS工具时，我开始寻找一些不同风格的UI，希望让风格变的更加多样化，让用户有一个想继续使用的第一印象。
然后我就尝试了一些，比如bulma.js buefy.js，但在实际开发过程中发现，很多组件交互功能还得是bkui香啊，需要的大多数组件功能还是bkui比较全，这里不自主的想给我们的蓝鲸大大点个赞。
当然，有些页面也不一定非要框在某些UI组件里面，也可以尝试在网络上多看看别人的网页是什么样的找找灵感，或者是有他人分享的好模板，也可以尝试自己进行修改，去适配自己的需求。
我目前“魔改”过的一些页面：
总而言之，言而总之~
除了好用的UI、模板之外，最最最最重要的还是一个好的idea，多多发挥咱们的想象力，bkui也可以组合出一些 “花里胡哨”。
ps: 如果屏幕前的你觉得我的这篇文章有那么点意思的话，麻烦动动小手指分享给其他朋友们看看叭~
