antd vue 问题汇总

1. carousel 轮播

• 开启左右箭头

1. arrows 属性设为 true

 <a-carousel arrows :dots="false" ref="carouselRef">
	<div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
		<i class="iconfont icon-bg-left"/>
	</div>
	<div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
		<i class="iconfont icon-bg-right"/>
	</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
 </a-carousel>

2. 或者： 自定义左右箭头，并添加点击事件，配合api

mothods:{
	next(){
		this.$refs.carouselRef.next()
	},
	prev(){
		this.$refs.carouselRef.prev()
	},
	goTo(){
		this.$refs.carouselRef.goTo(1)  // 去第几个面板
	}
}

2. antd按需加载

• 安装antd

npm install ant-design-vue

• 安装 babel-plugin-import

npm install babel-plugin-import --save-dev

• 在 babel.config.js 文件中添加或者 新建babel.config.js文件

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: true, // `style: true` 会加载 less 文件
      },
    ],
  ],
}

• 按需加载：在utils目录下新增antd.js (目录和文件名无所谓)

import Vue from "vue";

import{Carousel,Radio,Button,DatePicker,Spin,FormModel,Input,Icon,Checkbox,Modal,Popover,Timeline,Divider,Tag,ConfigProvider,Tabs,Table,Popconfirm,List,Anchor,Message,Row,Col,Statistic,Card} from "ant-design-vue";

Vue.use(Carousel).use(Radio).use(Button).use(DatePicker).use(Spin).use(FormModel).use(Input).use(Icon).use(Checkbox).use(Modal).use(Popover).use(Timeline).use(Divider).use(Tag).use(ConfigProvider).use(Tabs).use(Table).use(Popconfirm).use(List).use(Anchor).use(Row).use(Col).use(Statistic).use(Card)

Vue.prototype.$message = Message

• main.js 中引用 antd.js 文件

import '@/utils/antd'

• 运行 yarn serve，报错
  
  安装 less less-loader

npm install less-loader less --save-dev

• 运行 yarn serve， 报错
  vue.config.js 配置文件中的less-loader配置里开启允许javascript

css: {
      loaderOptions: {
          less: {
            lessOptions:{
              javascriptEnabled: true,
            }
          }
      }
  },

• 运行 yarn serve 成功
  如果还报错，试试降级

    "less": "3.5.0",
    "less-loader": "7.0.2"