ant-design-vue注意事项

参考：

1. 配置多语言

参考：

1.1 配置全局多语言

<!--
 * @Description: 
 * @Author: Eden
 * @Date: 2020-09-27 16:45:47
 * @LastEditTime: 2020-10-10 11:04:41
 * @LastEditors: Eden
-->
<template>
  <a-config-provider :locale="locale">
    <div id="app">
      ......
      <router-view style="height: 100%" :key="$route.fullPath" />
    </div>
  </a-config-provider>
</template>

<script>
import moment from moment;
import "moment/locale/zh-cn"
moment.locale(zh-cn)
// import zhCN from ant-design-vue/lib/locale-provider/zh_CN
import en_US from ant-design-vue/es/locale/en_US;
import zh_CN from ant-design-vue/es/locale/zh_CN;
import de_DE from ant-design-vue/es/locale/de_DE;
import ja_JP from ant-design-vue/es/locale/ja_JP;
export default {
          
   
  data () {
          
   
    return {
          
   
      // locale: zhCN,
    }
  },
  name: "app",
  created () {
          
   
  },
  mounted () {
          
   
  },
  watch: {
          
   
  },
  computed: {
          
   
    locale () {
          
   
      switch (this.$store.state.language) {
          
   
        case cn:
          return zh_CN
        case en:
          return en_US;
        default:
          break;
      }
    }
  },
  methods: {
          
   
    getPopupContainer (el, dialogContext) {
          
   
      if (dialogContext) {
          
   
        return dialogContext.getDialogWrap();
      } else {
          
   
        return document.body;
      }
    },
  }
}
</script>

<style>
.emptyCanvas-items {
          
   
  display: none;
}
#app {
          
   
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

1.2 组件配置多语言

同2.1 原理一样，用 a-config-provider包裹组件即可，如果既设置了全局多语言，又设置了组件多语言，组件会覆盖全局

2. 设置scoped属性后框架自带组件样式设置无效

下面以popover组件为例，补充 "/deep/"属性

下面的写法无效

.text-popover {
          
   
  .ant-popover-content {
          
   
    .ant-popover-inner {
          
   
      /deep/ .ant-popover-inner-content {
          
   
        padding: 0 !important;
      }
    }
  }
  .text-popover-container {
          
   
    width: 375px;

    .line-width {
          
   
      border-bottom: 1px solid #e4e4e4;
      .line-width-item {
          
   
        width: 75px;
        height: 75px;
        .dots {
          
   
          border-radius: 50%;
          background: #343434;
        }
      }
    }
    .color {
          
   
      width: 100%;
      padding: 16px 0 18px;
      .color-item {
          
   
        width: 25px;
        height: 25px;
      }
      .colorSelectedStyle {
          
   
        padding: 4px;
        border: 1px solid #1f85ff;
        box-sizing: content-box !important;
        background-clip: content-box !important;
      }
    }
  }
}

下面的写法才有效

/deep/ .text-popover {
          
   
  .ant-popover-content {
          
   
    .ant-popover-inner {
          
   
      .ant-popover-inner-content {
          
   
        padding: 0 !important;
      }
    }
  }
  .text-popover-container {
          
   
    width: 375px;

    .line-width {
          
   
      border-bottom: 1px solid #e4e4e4;
      .line-width-item {
          
   
        width: 75px;
        height: 75px;
        .dots {
          
   
          border-radius: 50%;
          background: #343434;
        }
      }
    }
    .color {
          
   
      width: 100%;
      padding: 16px 0 18px;
      .color-item {
          
   
        width: 25px;
        height: 25px;
      }
      .colorSelectedStyle {
          
   
        padding: 4px;
        border: 1px solid #1f85ff;
        box-sizing: content-box !important;
        background-clip: content-box !important;
      }
    }
  }
}

3. a-form-model失去焦点立即表单验证

Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以要确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化，可以通过如下方式验证：

<a-form-model
  labelAlign="left"
  :label-col="labelCol"
  :wrapper-col="wrapperCol"
  :model="scheduleMeetingForm"
  :rules="scheduleMeetingRules"
  ref="scheduleMeetingFormRef"
>
  <a-form-model-item
     class="recurrentInterval-item"
     :label="$t(message.Interval)"
     prop="recurrentInterval"
   >
     <!-- 周期类型：每天 -->
     <div v-if="scheduleMeetingForm.recurrentType == 1">
       <a-input
         v-model="scheduleMeetingForm.recurrentInterval"
         style="width: 50px"
         @blur="onRecurrentIntervalBlur"
       />
       {
         
  { $t("message.Day") }}
     </div>
   </a-form-model-item>
<a-form-model>

onRecurrentIntervalBlur(){
          
   
  this.$refs.scheduleMeetingFormRef.validateField(recurrentInterval)
}

4. 修改<a-select>样式

需求：修改下拉框组件的默认样式，改成下图所示

// 取消外框
.ant-select-focused .ant-select-selection,
  .ant-select-selection:focus,
  .ant-select-selection:active {
          
   
    border: none !important;
    outline: none !important;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
  }

  .ant-select-selection:hover {
          
   
    border: none !important;
    outline: none !important;
  }
  .ant-select,
  .ant-selet-open,
  .ant-select-focused,
  .ant-select-enabled {
          
   
    //先将默认的select选择框样式清除
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    border: none !important;
    outline: 0 !important;
    background: transparent;
    * {
          
   
      border: none !important;
    }
    .ant-select-selection,
    .ant-select-selection--single {
          
   
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      border: none !important;
      height: 100%;
    }
  }
  // 自定义下拉箭头
  .ant-select-selection__rendered {
          
   
    padding-right:18px;
    background: url("../../assets/images/pc/login/pullDown.png") right center no-repeat !important;
    background-size: 14px 14px !important;
  }