antd-vue 使用记录

一、安装

yarn add ant-design-vue

1.按需加载

vite.config

import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: false })],
      // 添加{ importStyle: false } 解决切换主题之后primary-color这些颜色又被替代的问题
    }),
  ],
})

message等需要手动

import { message } from 'ant-design-vue'; 
import 'ant-design-vue/es/message/style/css'; 
//vite只能用 ant-design-vue/es 而非 ant-design-vue/lib

main.ts中需要添加样式文件

import 'ant-design-vue/es/message/style/css';
import 'ant-design-vue/es/modal/style/css';
import 'ant-design-vue/dist/antd.css';

2.全局主题色

<div
  class="top-user"
  style="margin-right: 150px"
  @click="changeThemeColor"
>
  切换{{ themeColor }}色
</div>


import { ConfigProvider } from "ant-design-vue";

const themeColor = ref('绿');
const changeThemeColor = () => {
  ConfigProvider.config({
    theme: {
      primaryColor: themeColor.value == '绿' ? '#25b864' : '#1890ff',
    },
  });
  themeColor.value = themeColor.value == '绿' ? '蓝' : '绿'
};

二、使用组件

1.时间选择器

<a-range-picker
    format="YYYY-MM-DD"
    :allowClear="false"
    v-model:value="times1"
    @change="(val,valstr) => timeChange('time1',valstr)"
/>

设置 v-modal 需要使用 dayjs处理，设置默认值

// 时间处理
const datatimeArr = [
  dayjs().format('YYYY-MM-DD' + ' 00:00:00'),
  dayjs().format('YYYY-MM-DD' + ' 23:59:59')
]
let goodsSticState = reactive({
  datatimes1: datatimeArr,
})
let times1 = computed(() => {
  return [
      dayjs(goodsSticState.datatimes1[0], 'YYYY-MM-DD HH:mm:ss'), 
      dayjs(goodsSticState.datatimes1[1], 'YYYY-MM-DD HH:mm:ss')
  ]
})
const timeChange = (type, dateString) => {
  const start = `${dateString[0]} 00:00:00`
  const end = `${dateString[1]} 23:59:59`
  goodsSticState.datatimes1 = [start, end];
}