当前位置：首页 > article >正文

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

article 2025/1/11 3:59:05

快速开始

引入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.kler.cn/a/487572.html