antd-design-vue1.7.8浏览器中使用

快速开始

引入js和css

<link href="antd/antd.css" rel="stylesheet">
<script src="vue2/vue.js" type="text/javascript"></script>
<script src="antd/antd.js" type="text/javascript"></script>

调用

<div id="app"><a-button type="primary">Primary</a-button><a-button>Default</a-button><a-button type="dashed">Dashed</a-button><a-button type="danger">Danger</a-button><a-config-provider :auto-insert-space-in-button="false"><a-button type="primary">按钮</a-button></a-config-provider><a-button type="primary">按钮</a-button><a-button type="link">Link</a-button></div><script type="text/javascript">var vm = new Vue({el: "#app",created: function () {console.log('vue初始化');}})</script>

在这里插入图片描述
这样即可使用了，不过DatePicker 组件使用不了，依赖于momentjs

<div id="app"><a-date-picker show-time placeholder="选择时间"></a-date-picker>
</div>

在这里插入图片描述

<!--注意moment要引入浏览器支持的版本，一般cdn中是可以的https://www.bootcdn.cn/moment.js/-->
<script src="moment/moment.min.js" type="text/javascript"></script>

在这里插入图片描述

国际化

可以看到上面的是英文的，我们一般是中文网站，引入多语言插件

<script src="moment/moment.min.js" type="text/javascript"></script>
<script src="moment/zh-cn.js" type="text/javascript"></script>
<script src="antd/antd.js" type="text/javascript"></script>
<script src="antd/antd-with-locales.js" type="text/javascript"></script>

momentjs设置为中文

moment.locale("zh-cn");

在这里插入图片描述
但是antd没有设置中文效果

<script src="antd/antd-with-locales.js" type="text/javascript"></script><div id="app"><a-locale-provider :locale="locale"><a-date-picker show-time placeholder="选择时间"></a-date-picker></a-locale-provider>
</div>
<script type="text/javascript">moment.locale("zh-cn");var vm = new Vue({el: "#app",data: {locale: window.antd.locales.zh_CN},created: function () {console.log('vue初始化');}})
</script>

在这里插入图片描述

最终代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ant-design-vue使用</title><link href="antd/antd.css" rel="stylesheet"><script src="vue2/vue.js" type="text/javascript"></script><script src="moment/moment.min.js" type="text/javascript"></script><script src="moment/zh-cn.js" type="text/javascript"></script><script src="antd/antd.js" type="text/javascript"></script><script src="antd/antd-with-locales.js" type="text/javascript"></script></head><body><div id="app"><div><div><a-button type="primary">Primary</a-button><a-button>Default</a-button><a-button type="dashed">Dashed</a-button><a-button type="danger">Danger</a-button><a-config-provider :auto-insert-space-in-button="false"><a-button type="primary">按钮</a-button></a-config-provider><a-button type="primary">按钮</a-button><a-button type="link">Link</a-button></div></div><div><a-locale-provider :locale="locale"><a-date-picker show-time placeholder="选择时间"></a-date-picker></a-locale-provider></div></div><script type="text/javascript">moment.locale("zh-cn");var vm = new Vue({el: "#app",data: {locale: window.antd.locales.zh_CN},created: function () {console.log('vue初始化');}})</script>
</body></html>

参考

https://1x.antdv.com/docs/vue/introduce-cn/
https://1x.antdv.com/components/locale-provider-cn/
https://www.npmjs.com/package/ant-design-vue/v/1.7.8
https://www.antdv.com/docs/vue/introduce-cn
https://momentjs.com/
https://momentjs.cn/
https://www.npmjs.com/package/moment/v/2.30.1

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/408.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！