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">
        
### ant-design-vue@1.7.8 ARangePicker 中文本地化配置 为了使 `ARangePicker` 组件能够以中文显示,需要引入并配置 Ant Design Vue 的国际化支持。具体操作如下: #### 安装依赖包 对于基于 Vue 2 的项目,应安装特定版本的 `ant-design-vue`: ```bash npm i --save ant-design-vue@1.7.8 ``` #### 导入语言包 接着,在项目的入口文件(通常是 main.js 或 app.js)中导入中文语言包[^2]: ```javascript // 引入整个 antd 组件库及其默认样式表 import Antd from 'ant-design-vue'; import App from './App.vue'; // 引入中文语言包 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; import { ConfigProvider } from 'ant-design-vue'; const app = createApp(App); app.use(Antd); app.component('ConfigProvider', ConfigProvider); new Vue({ render: h => h(App), }).$mount('#app'); ``` #### 使用 ConfigProvider 进行全局配置 为了让所有的日期选择器都能识别当前的语言环境,可以利用 `<config-provider>` 来包裹根组件,并传递 locale 参数给它。 ```html <template> <a-config-provider :locale="zhCN"> <!-- Your application components here --> <div id="app"></div> </a-config-provider> </template> <script> export default { name: "App", }; </script> ``` 通过上述方式设置之后,所有受支持的时间选择类组件将会自动应用所指定的语言资源,包括但不限于 `ARangePicker`. 另外需要注意的是,如果遇到某些情况下仍然无法正常切换至中文的情况,则可能是因为部分自定义属性未被正确处理所致;此时建议查阅官方文档获取更多关于国际化的指导信息[^5].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

假装我不帅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值