AntdVue使用
配置与安装
#安装
npm install ant-design-vue --save
#按需加载
import {
Button,
Layout,
Row,
Col,
Menu,
Icon,
Card,
Tabs,
Table,
Form,
Tree,
Popover,
Divider,
Input,
Select,
Radio,
Popconfirm,
Message,
Spin,
Switch,
Pagination,
LocaleProvider,
Dropdown,
Modal,
Upload,
Drawer,
DatePicker,
InputNumber,
Tag,
Alert,
Empty,
Tooltip,
Transfer,
AutoComplete,
List,
Cascader,
Checkbox,
TimePicker,
Collapse,
Notification,
Carousel,
Descriptions,
Avatar,
Comment,
FormModel,
Calendar,
Skeleton,
Badge
} from "ant-design-vue";
Vue.use(...)
国际化
ant-design-vue 目前的默认文案是英文
Components
1.`上传`
3.`间距`
5.`面包屑`
#属性
***
6.`确认框` 单个按钮
9.`分页`
11.`用户头像`
#属性
(1)accordion // 点击只允许单个展示
(2)default-active-key="1" //默认展示编号列表
15.`评分rate`-----打星功能
提示文字
xxxxx //触发文字
#属性
(1)placement="" //提示方位 top topLeft .....
19.`警告提示alert`
#属性
(1)message=""//设置提示框内容
(2) type=""//警告类型 error红色 warning黄色 success绿色 info蓝色
(3):show-icon=""// 布尔值 是否显示提示小图标
(4)closable //允许被叉掉（图标）
(5)close-text="" //自定义关闭 设置关闭文字
20.`抽屉drwaer`----点击弹出全屏菜单框并带有遮罩层
1
2
3
#属性
(1) title="" //抽屉标题
(2) placement="" //弹出抽屉方位right left top bottom
(3) :closable="false" //不允许叉掉
(4):visible="" //布尔值 是否显示抽屉
21.`对话框modal`-----点击弹出确定框
#属性
(1):destroyOnClose=""// 布尔值 关闭时销毁 Modal 里的子元素
(2):footer=""//底部内容，不需要时设置为:footer="null"
22.`加载框spin`
//这里设置样式标签
24.`分割线divder` ---默认水平分割
菜单项
#属性
(1)disabled=''//布尔值 是否被禁用
(2)key=''//绑定这个菜单项的标识
(3)title=""//设置收缩展示的悬浮标题
子菜单项
#属性
(1)mode=""//菜单类型 垂直vertical 水平horizontal 内嵌inline
27.`select选择器`
#属性
(1)defalut-value=""//默认选中的值
(2)disabled //是否禁用
(3)mode=''//设置select的模式为多选或标签 multiple多选 tags标签
(4)allowClear //支持清除
(5)showSearch // 布尔值使单选模式可搜索
(6)defaultOpen //布尔值 是否默认展开下拉菜单
(7)dropdownMatchSelectWidth //布尔值 下拉菜单和选择器同宽
(8)notFOundContent="" //下拉列表为空时显示的内容 默认Not Found
(9)showArrow //是否显示下拉小箭头
#事件
(1)dropdownVisibleChange //展开下拉菜单的回调
表单
具有数据收集、校验和提交功能的表单
`表单`
//单个表单框使用
#属性
(1)laber="" //表单名称显示
<----1输入框----->
xxxx
<----3表单域---->
#属性
(1):form="form"//第二个form在data中关联 经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用 this.$form.createForm(this, options) 在data()中设置form: this.$form.createForm(this),设置以后就可以在组件使用this.form上的方法
(2)layout="" //布局 'horizontal'|'vertical'|'inline'
(3):label-col="{ span: 8 }" //label布局 设置span和offset
(4):wrapper-col="{ span: 14 }" //需要为输入控件设置布局样式时,同label-col
表单校验
v-decorator=[
'name',
{
rules:[//设置校验规则
{
initialValue: "",//初始化值，也就是默认值,可不写
required:true,//必须
message:'xxxxxx',//未输入提示信息，
pattern:/^ &/, //正则规则，可选
}，
{
validator:funtion(rule,value,callback){//自定义校验（callback必须被调用） if (!value) {
callback()
} else {
callback('您输入的验证码不正确!')
}
}
}
}
]
}
]
# this.form方法
(1)this.form.validateFields() 校验并获取一组输入域的值与 Error
eg：this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
(2)this.form.setFieldsValue() 设置一组输入控件的值
eg:this.form.setFieldsValue({
name: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,//这个name可以任意设置名称，与v-decorator中name相同
})
(3)this.form.resetFields() 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件
(4)this.form.getFieldDecorator(id, options)用于和表单进行双向绑定，单文件 template 可以使用指令v-decorator进行绑定
eg：
表格
对数据进行排序、搜索、分页、自定义操作等复杂行为
表格的数据源 dataSource 为一个数组
#属性
(1):rowKey="record => record.id" //表格每一行都必须有一个key值
(2):columns="columns" //表格列的配置描述，绑定columns，自定义后还需要在data()中注册
(3):pagination="false"//布尔值，表格的分页，推荐使用分页组件
(4):dataSource="dataSource" //列表数据 需要在data()注册
(5) bordered //布尔值默认false 是否展示外边框
(6):rowSelection="{ //列表项是否被选择
#rowSelection配置项
selecedRowkeys:[]//指定选中项的key数组，需要和 onChange 进行配合
onChange:function(selectedRowKeys, selectedRows) //选中项发生变化的回调
}" //选中功能
(7)customRow="function(record,index)"//设置行属性
eg:props: {
xxx... //属性
},
on: { // 事件
click: (event) => {}, // 点击行
dblclick: (event) => {},
contextmenu: (event) => {},
mouseenter: (event) => {}, // 鼠标移入行
mouseleave: (event) => {}
}
eg:
{{ text }}
//插槽绑定的数据对象
const columns = [
{
title: 'Name', //表格头一列标题文字
dataIndex: 'name',
key: 'name',
scopedSlots: { customRender: 'name' },//用来支持表格中的slot-scope属性
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 80,
},
]
//表格里的数据
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park, London No. 2 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
export default {
data() {
return {
dataSource,//表格具体数据
columns,//列描述属性数据
};
},
};
插槽渲染
在scirpt中定义columns
const columns=[
.......
{
title:'',//表格列表标题
align:''，//样式
width:''，//
ellipsis: true ,//开启标题内容溢出省略
scopedSlots:{custonRender:'name'}//这个name与标签中的slot关联 支持配置slot-scope
}
]
#columns配置项
(1)dataIndex：string//列数据在数据项中对应的 key
(2)customRender:Function(text, record, index) {}|slot-scope//生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引
(3)scopedSlots:{ customRender:'xxx'} // 使用 columns 时，可以通过该属性配置支持 slot-scope 的属性
(4)align:''//设置列内容的对齐方式
(5)ellipsis//布尔值
(6)width:''//列宽度
选项卡
内容1
内容2
内容3
#属性
(1)tab="" //标题
(2)key=""//绑定key
#属性
(1)defaule-active-key=""//默认选择哪一项
Message全局提示
this.$message方法（成功、失败、警告）
(1)this.$message.info('成功提示内容',延迟关闭弹窗提示时间) //默认提示时间为3秒，
(2)this.$message.error('失败提示内容')
(3)this.$message.warning('警告提示内容')
(4)this.$message.loading('等待提示内容')
#eg:
this.$message.loading({ content: 'Loading...', key });
setTimeout(() => {
this.$message.success({ content: 'Loaded!', key, duration: 2 });
}, 1000);