深入浅出Ant Design Of Vue
深入浅出AntDesign Of Vue
·
1.ant design a-col里面的元素居中、居左,居右怎么设置
Ant Design 的 <a-col>
组件是一个布局组件,一般用于网格(Grid)布局中。要实现在 <a-col>
中的元素居中、居左或居右对齐,可以使用 flex 布局和 text-align 样式来实现。下面是一些示例代码:
- 居中对齐:在
<a-col>
上添加justify="center"
和align="middle"
属性。
<a-row>
<a-col :span="8" :offset="8" justify="center" align="middle">
<!-- 这里的元素会在水平和垂直方向上居中对齐 -->
<div>居中对齐</div>
</a-col>
</a-row>
- 居左对齐:在子元素上设置
justify-self: flex-start;
样式。
<a-row>
<a-col :span="8" :offset="8" style="display: flex">
<!-- 这里的元素会在水平方向上居左对齐 -->
<div style="justify-self: flex-start;">居左对齐</div>
</a-col>
</a-row>
- 居右对齐:在子元素上设置
justify-self: flex-end;
样式。
<a-row>
<a-col :span="8" :offset="8" style="display: flex">
<!-- 这里的元素会在水平方向上居右对齐 -->
<div style="justify-self: flex-end;">居右对齐</div>
</a-col>
</a-row>
上述示例代码中,第一个示例使用了 <a-col>
的 justify
和 align
属性来实现居中对齐;而后两个示例使用了 flex 布局中子元素的 justify-self
样式来实现居左和居右对齐。需要注意的是,在使用 justify-self
样式时,父级容器 display
样式必须为 flex
,否则该样式无效。
2 项目入口htm文件实现国际化
2.1 在index.html文件追加下面代码
var lang=localStorage.getItem('lang')
if(lang==='"zh-CN"'){
document.title="汉语系统"
}
else{
document.title="English System"
}
注意:‘lang’是本地缓存中系统语言的key,可以在下面看到
2.2 在login.vue 中添加数据监视
watch: {
'$i18n.locale'() {
document.title = this.$t('websiteTitle')
},
},
其中,‘websiteTitle’是locales中的key
更多推荐
已为社区贡献1条内容
所有评论(0)