今天重写一个 Vue 项目,使用的是 Ant Design for Vue 框架,发现 Collapse 折叠面板的 expand-icon-position
属性不能用。
将小箭头设置在右侧不生效,代码如下:
<a-collapse :bordered="false" expand-icon-position="right"> <a-collapse-panel header="公司选择"> w3h5.com </a-collapse-panel> </a-collapse>
检查了一下 Ant Design for Vue 版本是1.4.x ,线上稳定版本是 1.6.3 ,盲猜是新加的功能。
更新/升级 Ant Design for Vue 版本:
npm install ant-design-vue --save
我使用的是 npm ,如果你习惯用 yarn ,可以执行如下命令:
yarn add ant-design-vue
更新成功,首先是报了一堆错误,下面是截取的部分,包括 moment 的路径错误:
error in ./node_modules/moment/locale/zh-cn.js Module build failed: Error: ENOENT: no such file or directory, open 'D:/vue/rencaiyoujia/node_modules/moment/locale/zh-cn.js' @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 16:0-29 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8081 webpack/hot/dev-server ./src/main.js error in ./node_modules/moment/moment.js
重新启动项目,正常运行,不再报错了。
但是 console 控制台又报错:warning.js?49ae:7 Warning: [antdv: LocaleProvider] `LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead
原因出在 ant-design-for-vue 国际化组件,我之前整理过一篇文章:Antd Vue LocaleProvider国际化组件zh_CN中文配置
报错的意思的 `LocaleProvider`
已弃用。请改用 `locale`
和 `ConfigProvider`
;
修改一下写法,把 <a-locale-provider>
标签换成 <a-config-provider>
:
<a-config-provider :locale="zh_CN"> <div id="app"> <router-view></router-view> </div> </a-config-provider>
这时候应该又会报另一个错误了:
vue.esm.js?efeb:628 [Vue warn]: Unknown custom element: <a-config-provider> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <App> at src/App.vue <Root>
这个不难理解,因为我们使用了新的标签,但是还没有注册。
在 main.js 中引入并注册一下就好了:
import { ConfigProvider } from 'ant-design-vue';//引用 Vue.component(ConfigProvider.name, ConfigProvider);//注册
现在我们可以看到,报错已经消失了,继续愉快的 Coding 吧~
原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/150466.html