Ant Design 引入vue2项目
Ant Design 引入vue2项目
1.安装指定版本的ant-design-vue UI框架(当项目为vue2项目时)
npm i --save ant-design-vue@1.7.8
2.vue2项目引入
在main.js中
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
Ant Design 引入vue3项目
环境介绍
vue3+ts+ant-design-vue
使用组件 #
安装 #
$ npm i --save ant-design-vue
全局完整注册
全局完整注册
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(Antd).mount('#app');
1.form表单
api:
1.labelCol
labelCol : label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`
例如:
<a-form :model="formState" name="normal_login" class="login-form" :label-col="labelCol" :wrapper-col="wrapperCol" @finish="onFinish" @finishFailed="onFinishFailed">
<script lang="ts">
setup() {
return{
labelCol: { style: { width: '65px' } },
}
}
</script>
2.wrapperCol
wrapperCol : 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol
例如:
<a-form :model="formState" name="normal_login" class="login-form" :label-col="labelCol" :wrapper-col="wrapperCol" @finish="onFinish" @finishFailed="onFinishFailed">
<script lang="ts">
setup() {
return{
wrapperCol:{ style: { width: '323px', } },
}
}
</script>
2.Input 输入框
api
1.prefix
prefix 带有前缀图标的 input string|slot
例如:
<a-form-item class="login-item" name="username" :rules="[{ required: true, message: '请输入账号!' }]">
<a-input v-model:value="formState.username" placeholder="请输入账号" >
<template #prefix>
<img class="img1" src="../assets/Frame@2x.png" alt="" srcset="">
<div class="login-content">
</div>
</template>
</a-input>
</a-form-item>
2.suffix
suffix 带有后缀图标的 input string|slot
例如:
<a-form-item class="login-item" name="imag" :rules="[{ required: true, message: '请输入图形验证码!' }]">
<a-input v-model:value="formState.imag" placeholder="请输入图形验证码" :bordered="false" style="height: 70px;">
<template #suffix>
<div class="imag-code">ABCD</div>
</template>
</a-input>
</a-form-item>
3.allow-clear 带移除的图标
例如:
<a-input v-model:value="value1" placeholder="input with clear icon" allow-clear />
3.转中文:
在vue3中
<template>
<a-config-provider :locale="zhCN">
<div class="page-middle">
<!-- 分页 -->
<a-pagination class="page1" v-model:current="current1" show-quick-jumper :total="50"
@change="onChange" />
</div>
</a-config-provider>
</template>
<script>
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('en');
import { defineComponent, ref , watch } from 'vue';
export default defineComponent({
setup() { // 语言
const locale = ref(enUS.locale);
watch(locale, val => {
dayjs.locale(val);
});
//分页
const onChange = pageNumber => {
console.log('Page: ', pageNumber);
};
return {
onChange,
locale,
dayjs,
enUS,
zhCN,
}
}
4.回到顶部
<a-back-top />
5.表格
1.分页:
组件使用如示: <a-table :columns="columns" :data-source="data" bordered></a-table>
组件自带分页功能,并默认开启。
那我们有时候数据量不大,根本不想有分页器的存在该怎样把它取消呢?
在使用table组件的时候,配置:pagination="false"
即可。
效果如下:
2.选中行样式:
:customRow=“onClickRow”
1.环境介绍:
vue3+js+ant-design-vue+vite
使用npm 创建vite项目
npm create vite@latest
输入项目的名字
按上下选择框架,这就选vue然后回车
**
**
选择js或者ts
2、安装less/scss
由于是使用vite,vite它提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持,但必须安装相应的预处理器依赖;
国内一般只使用 less 或 scss,所以我只写这两个安装
安装less依赖
npm add -D less
安装scss and sass 依赖
npm add -D sass