Ant Design 踩坑之路

目录

1. 使用版本
2. select 篇
3. modal 篇

一、使用版本

1 Vue2 项目引入 Antd 报错

（1） 两个错误

Uncaught ReferenceError: Antd is not defined
Uncaught TypeError: Object(...) is not a function 

（2） 解决方法

先说下错误时项目的状态：

安装了 babel-plugin-import 插件

npm i --save ant-design-vue
npm i --save babel-plugin-import

babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      {
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: 'css'
      }
    ]
  ]
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
Vue.use(Antd)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

发现是版本的问题：将版本降低即可

npm uninstall ant-design-vue
npm install ant-design-vue@1.7.8 --save

main.js

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd)

babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      {
        libraryName: "Antd",
        libraryDirectory: "es",
        style: 'css'
      }
    ]
  ]
}

二、select 篇

1 placeholder 不生效

（1） 问题

select 使用 v-model 绑定了 value，当 value 的值为 '' 或者 null 的时候 placeholder 无效。

（2） 解决方法

要使 placeholder 生效可以将 value 值设置为 undefined。

2 dropdownRender 加入 input 引起的一系列问题

2.1 点击 select 中的 input 会自动收缩下拉列表

（1）定位原因

当点击 a-input 时，焦点事件离开 select 触发 blur 事件，导致下拉列表收缩。

既然 blur 事件会导致下拉列表自动关闭，那就需要手动接管 select 展开收缩。

（2）解决方法

• 在外部套一层 div 容器
• 新增变量 selectOpen: 用于控制展开收缩
• 新增 click 事件：点击 select 的时候展开下拉菜单
• 新增事件 selectOpen: 用于根据变量控制展开收缩

<div @click="e => { e.preventDefault(); this.selectOpen = !this.selectOpen; }">
    <a-select 
      v-model="value" 
      :open="selectOpen" 
      @select="selectOpen = false">
        <template #dropdownRender="{ menuNode: menu }">
            <div >
              <a-input 
                v-model="search"
                placeholder="请输入关键词" 
              />
            </div>
            <v-nodes :vnodes="menu" />
        </template>
        <a-select-option 
          :label="v.name" 
          :value="v.id" 
          v-for="(v, k) in options" 
          :key="k">
            {{ v.name }}
        </a-select-option>
    </a-select>
</div>

2.2 点击空白处无法收缩 select

（1）定位原因

解决第一个问题时没有考虑到各种事件对下拉列表是否收缩的影响

（2）解决方法

• a-select 新增 @blur="blurEvent"
• a-input 新增 @blur="blurEvent"
• a-input 新增 id="inputSearch"

blurEvent() {
  // 获取当前焦点 id
  if(document.activeElement.id != 'inputSearch') {
      this.selectOpen = false
  }
}

三、modal 篇

1 modal 样式无法修改

（1） 定位原因

modal 样式无法通过 scoped + >>> 进行修改，并且当给 modal 添加一个 class 类，发现浏览器中 modal 没有加上 data-v-xxxx 的标志。

（2） 解决方法

a. 全局样式修改（不推荐）

<style>
.example-modal .ant-modal-body{
  padding: 12px;
}
</style>

b. 利用 bodyStyle 属性去修改

<a-modal
  :bodyStyle="{color: 'red', padding: '12px'}"
  >
</a-modal>