这是我参与「第四届青训营 」笔记创作活动的第3天
布局
栅格系统
支持Flex布局
a-row a-col(列)
- 所有列必须放在row内,col的最外面一定要有一个row,col里面可以套另外的col
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `` 来创建
- 如果一个
row中的col总和超过 24，那么多余的col会作为一个整体另起一行排列
<a-row>
<a-col :span="8">col-8</a-col>
<a-col :span="8">col-8</a-col>
<a-col :span="8">col-8</a-col>
</a-row>
API
Row
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| align | flex 布局下的垂直对齐方式：top middle bottom | string | top |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（1.5.0 后支持）。 | number/object/array | 0 |
| justify | flex 布局下的水平排列方式：start end center space-around space-between | string | start |
| wrap | 是否自动换行 | boolean | false |
Col
| 成员 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| flex | flex 布局填充 | string | number | - |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
响应式栅格
| xs | <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| --- | --------------------------------- | -------------- | - |
| sm | ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| md | ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| lg | ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| xl | ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| xxl | ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
例子:
{ xs: 8, sm: 16, md: 24, lg: 32 }
表格的使用
消息提示
Modal对话框,除了可以使用a-modal以外,还可以使用Modal.method()这个方法
对应的具体属性:
| 参数 | 功能 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string & VNode & function(h) | 无 |
| centered | 垂直居中显示 | boolean | false |
| okText | 确认按钮文字 | string & slot | 确定 |
| content | 内容 | string & VNode & function(h) | 无 |
举例
/**
* 分别用于提示以下信息：
* tips：轻提示，默认3秒后消息
* Info：基本提示信息
* Success：成功提示信息
* Warning：警告提示信息
* Error：错误提示信息
* @param content 要显示的提示内容
* @param timeout 延迟关闭提示框的秒数，为0则不关闭
* @returns void
*/
public info(content: string, timeout = 0) {
const model = Modal.info({
title: () => '温馨提示', //这也是一个函数,返回的就是普通的String类型
centered: true, //居中
okText: '确定', //确定的文字
content: () => h('div', {}, [h('p', content)]), //用h函数返回一个VNode节点
});
if (timeout > 0) {
setTimeout(() => {
model.destroy();
}, timeout * 1000);
}
}
组件:
封装好的组件,使用的时候直接用暴露出的useDycMessageBox()函数创建一个
const messageBox=useDycMessageBox()
messageBox.error( res.errMsg , 3 );
/**
* 封装常用的用于提示用户的消息类
* @author www.glm2m.com
*/
import { message, Modal } from 'ant-design-vue';
import { h, createVNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export class DycMessageBox {
/**
* 分别用于提示以下信息：
* tips：轻提示，默认3秒后消息
* Info：基本提示信息
* Success：成功提示信息
* Warning：警告提示信息
* Error：错误提示信息
* @param content 要显示的提示内容
* @param timeout 延迟关闭提示框的秒数，为0则不关闭
* @returns void
*/
public tips(content: string) {
message.info(content);
}
public info(content: string, timeout = 0) {
const model = Modal.info({
title: () => '温馨提示',
centered: true,
okText: '确定',
content: () => h('div', {}, [h('p', content)]),
});
if (timeout > 0) {
setTimeout(() => {
model.destroy();
}, timeout * 1000);
}
}
public success(content: string, timeout = 0) {
const model = Modal.success({
title: () => '温馨提示',
centered: true,
okText: '确定',
content: () => h('div', {}, [h('p', content)]),
});
if (timeout > 0) {
setTimeout(() => {
model.destroy();
}, timeout * 1000);
}
}
public error(content: string, timeout = 0) {
const model = Modal.error({
title: () => '温馨提示',
centered: true,
okText: '确定',
content: () => h('div', {}, [h('p', content)]),
});
if (timeout > 0) {
setTimeout(() => {
model.destroy();
}, timeout * 1000);
}
}
public warning(content: string, timeout = 0) {
const model = Modal.warning({
title: () => '温馨提示',
centered: true,
okText: '确定',
content: () => h('div', {}, [h('p', content)]),
});
if (timeout > 0) {
setTimeout(() => {
model.destroy();
}, timeout * 1000);
}
}
/**
* 需要用户确认后再进行指定的操作
* @public
*/
public confirm(
content: string,
callbackOk: (...args: any[]) => any,
callbackOnCancel: (...args: any[]) => any,
) {
Modal.confirm({
title: () => '温馨提示',
centered: true,
icon: () => createVNode(ExclamationCircleOutlined),
content: () => content,
onOk: callbackOk,
onCancel: callbackOnCancel,
});
}
}
const messageBox = new DycMessageBox();
export function useDycMessageBox() {
return messageBox;
}
页面内标签页
效果
上面是标签页(a-tab),具体显示多少个标签通过读取时刻改变的数组来解决
每个标签上面的重新加载和叉号是标签的插槽,填上对应的效果即可
右键弹出菜单的功能也是slot带有的
\
