深入浅出Ant Design Of Vue

1.ant design a-col里面的元素居中、居左，居右怎么设置

Ant Design 的 组件是一个布局组件，一般用于网格（Grid）布局中。要实现在 中的元素居中、居左或居右对齐，可以使用 flex 布局和 text-align 样式来实现。下面是一些示例代码：

1. 居中对齐：在 上添加 justify="center" 和 align="middle" 属性。

<a-row>
  <a-col :span="8" :offset="8" justify="center" align="middle">
    <!-- 这里的元素会在水平和垂直方向上居中对齐 -->
    <div>居中对齐</div>
  </a-col>
</a-row>

2. 居左对齐：在子元素上设置 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>

3. 居右对齐：在子元素上设置 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>

上述示例代码中，第一个示例使用了 的 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