十一、Vben框架部分组件样式的重新封装

在使用vben框架的时候发现部分的样式不符合实际的需求，ant-design-vue的样式也不支持我们的需求，那怎么办呢，只能自己来修改，下面我就改大家说说我遇到的一些修改过的样式和组件。

一、inputNumber带前后标志

先看下目前支持的样式，底下是ant-design-vue支持的样式，当他输入的时候还需要光标方法%后面。$也会被删掉，所以非常难受。

实际需求的样式是这样的

 

开发思路:

1. 不影响原先的inputNumber组件在封装一个BInputNumber组件
2. 增加前后两个slot（插槽）prefix, suffix
3. 将原先的change事件reture出去，方便外部调用

下面直接上代码：

Html部分

 js部分，change方法采用源码的代码

css代码，使其定位到前后两边

在父组件如何使用呢，如下图

 

二、select组件增加label返回

我们知道在ant-design-vue中select的v-model只能绑定value属性，想获取label还需要写change方法，然后再在其中取值赋值给变量。

那么能不能在有一个属性绑定label，让它也能双向绑定，那么就要改他的源码了。

开发思路:

1、不影响原先的select组件在封装一个BSelect

2、在emits返回时增加一个update:label的参数

3、在change事件中修改label的值，并考虑多选的情况。

下面直接上代码

 在父组件如何使用呢，如下图

好了，组件封装还有很多，像是table的拖拽功能，upload的自定义封装，下次有机会再和大家分享，大家也可以积极留言沟通。