Vue开发:组件库美化项目

不会偷懒的程序员不是一个好的程序员 (bushi
但是,有现成封装好的组件库为什么不用呢?
本文主要以 Ant Design Vue 为例

组件

Button

根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 ConfigProvider 的 autoInsertSpaceInButton 为 false。
——引自 Ant Design Vue 官网

为了美观,官方会自动在文字中间添加空格,但有时我们可能并不需要,可以如下进行操作:

Antd 中引入 ConfigProvider 组件,然后将该 Button 包裹在 ConfigProvider 组件中,并设置 autoInsertSpaceInButton 属性即可

1
2
3
4
5
<a-config-provider :autoInsertSpaceInButton="false"> 
<a-button type="primary">
按钮
</a-button>
</a-config-provider>

1.DatePicker

该组件中可以通过 disabled-date 来限制可选择日期的范围,其通过箭头函数来返回需要限制的条件,官方写法如下:

1
2
3
4
const disabledDate = (current: Dayjs) => {
// Can not select days before today and today
return current && current < dayjs().endOf('day');
};

参数 current 指的是当前时间选择面板的日期,语句 dayjs().endOf('day') 指的是返回当前 dayjs 对象并设置为时间末尾

整个返回语句表明今天和比时间末尾小的时间都不可以选择

2.Table

ant design 表格columns配置解析(text, record)

设置复选框

需要给表格设置复选框时,如果从后台接收的源数据没有key值,则需要给源数据中指定 key 值用于区分选中的是哪一行

1
2
3
4
// this.historyList 从后台获取的源数据
for (let i: number = 0; i < this.historyList.length; i++) {
this.historyList[i].key = i;
}

修改复选框

现象:在 Antd 组件库表格中的复选框默认大小为16px,当开发人员手动修改复选框大小时,会发现复选框的对号位置整体偏右下了

原因:造成该现象是因为修改宽高时真正变化的时右侧宽度和底部高度,而对号相对于复选框定位时,实际并没有变化,所以感官上感觉是偏右下移动了

方法:只需要修改 .ant-checkbox-inner::after 该class中的left和top值让其重新定位即可解决

ToolTip

(1).包裹元素被禁用时无法显示ToolTip

当 ToolTip 标签包裹的元素被禁用时就无法正常显示,如:

1
2
3
<ToolTip :title="标题">
<a-button type="default" :disabled="true">禁用</a-button>
</ToolTip>

这时只要给被禁用元素套一层容器即可,<div>/<span> 等都可:

1
2
3
4
5
<ToolTip :title="标题">
<span>
<a-button type="default" :disabled="true">禁用</a-button>
</span>
</ToolTip>

Tree

(1).自定义节点

在官网的案例及API中,只提到了如何自定义切换图标以及节点图标,唯独没有提到如何自定义节点,以下记录使用插槽来自定义节点使其具备添加删除按钮等

(2).TypeScript类型定义

TypeScript 中需要给变量定义类型,包括函数参数返回值等,而针对于 tree 这个组件中,可能需要定义的类型如下:

  • DataNode :表示树的每一个节点信息
  • EventDataNode :表示某些事件中的节点信息,如 select()/expand() 等事件
  • AntTreeNodeSelectedEvent :表示某些事件中返回的 Event 类型,如 select() 事件中的第二个参数就是该类型

(3).Flex布局影响竖向滚动条

如果该组件的父元素使用了 Flex 布局时,当该组件的层级较多时,会导致超出父元素的高度,这时并不会出现竖向滚动条

如果给 <a-tree> 的父元素设置高度时就不会超出父元素且会正常显示竖向滚动条,但此时高度固定

因此可以将高度设置为0,即 height: 0; ,这时高度就不是固定的了,会自动根据 flex-grow: 1; 来进行计算(该方法参考自@winenr123

(4).双击事件

公司项目前端框架从 Angular 迁移到了 Vue3,所用组件库从 ng-zorro 迁移到了 ant design vue

在之前的组件库中是可以给树的节点绑定双击事件的,但现在的组件库中貌似并没有提供双击事件(至少在文档中是看不到的)

实际上如果查看源代码是有的,如下:

可以看到该该事件和 select() 类似的,同样接收两个参数

Tree-Select

(1).横线滚动丢失问题

将该组件放入某些布局时,会导致下拉框中的内容无法横向滚动

这时需要使用dropdownClassName=“tree-select-dropdown” 字段给该组件设置class类名

然后修改相应样式来覆盖点原本的样式(需要放置在全局样式中)

1
2
3
4
5
6
7
8
9
10
11
// 修复tree-select组件下拉框无横向滚动条问题
.tree-select-dropdown {
.ant-select-tree-list-holder {
& > div {
overflow: unset !important;
.ant-select-tree-node-content-wrapper {
white-space: nowrap;
}
}
}
}

3.Select

关于 placeholder 的显示,Angular 和 Vue 下是不同的

  • 前者只需要将 value 为 '' 即可显示 placeholder
  • 而后者需要将 value 设置为 undefined 才可以正常显示 placeholder

快速设置样式

Angular 中可以使用 :host ::ng-deep .ant-upload-drag 来跳过DOM的层层嵌套直接定位到 upload 组件

Vue 中可以使用 :deep(.ant-upload-drag) 来跳过DOM的层层嵌套直接定位到 upload 组件

注意1

之前的 ::v-deep 虽然可以使用,但会在控制台警告被废弃

注意2

虽然在样式标签中使用了 scoped 来限制当前的样式只应用于当前的组件

但是当需要使用 :deep 来修改组件库样式时,如果子组件也使用了和父组件一样的组件库时,父组件修改的样式就会覆盖到子组件上

所以需要在子组件的样式前面限定一样,这个样式只作用于某一容器中的组件中