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