ant 디자인 vue datepicker 날짜 선택기에서 문화 조작

ant design vue 공식 설명에 따르면 날짜 선택기를 사용하려면 입구 파일 (main.js) 전역 설정 언어가 필요합니다.

//   en-US， ，  locale
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
 
<a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')" />

이 절차를 마친 후 날짜는 일부분만 중국어이고 연월 순서가 틀렸기 때문에 많은 자료를 찾아서ant 디자인 vue에 국제화 설정이 있습니다. 입구 파일(App.vue)에 구성 요소인 Locale Provider를 도입하여 전역 설정 국제화 방안에 사용해야 합니다.

<template>
 <a-locale-provider :locale="locale">
 <App />
 </a-locale-provider>
</template>
 
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
export default {
 data() {
 return {
 locale: zhCN,
 }
 }
}
</script>

따라서 App을 직접 병합하여 쓸 수 있습니다.vue

<template>
 <a-locale-provider :locale="locale">
 <App />
 </a-locale-provider>
</template>
 
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
 data() {
 return {
 locale: zhCN,
 }
 }
}
</script>

날짜 선택기는 어느 모듈에서 사용하든지 바로 중국어입니다.
작은 구덩이가 있어요~
여기까지 완성하면 eslint가 오류를 보고할 수 있습니다.
Identifier is not a camel case (camelcase)
eslint 프로필에rules를 추가합니다.
"camelcase": [0, {"properties": "never"}]
그만!
설명이 잘 안 되거나 잘 모르는 부분이 있어요. 댓글 토론 환영합니다.
보충 지식: ant-design-vue의 DatePicker 날짜 선택 상자에서 만나는 구덩이
문제 설명:
ant-design-vue의 구성 요소 DatePicker 날짜 선택 상자와 밑에 있는 선택 상자를 사용할 때 밑에 있는 선택 상자의 데이터는 백그라운드에서 요청한 것이기 때문에 로컬에서 두 개의 데이터를 수동으로 추가합니다.(일단 백그라운드에서 요청한 데이터는 A클래스 데이터이고 수동으로 추가된 데이터는 B클래스 데이터이다.)드롭다운에서 A클래스 데이터를 선택한 후 날짜 선택 상자를 선택하고 드롭다운에서 선택한 데이터를 B클래스 데이터로 선택하면 날짜 선택 상자에 데이터가 표시되지 않습니다.만약 밑에 B 클래스 데이터를 선택하고 날짜를 선택한 후에 밑에 A 클래스 데이터를 선택하면 날짜 선택 상자의 데이터도 표시되지 않습니다.
해결 방법:
이 문제가 발생하기 전에 날짜 선택 상자는 v-model을 사용하지 않았습니다. v-model로 모멘트 () 대상을 연결하면 사라지지 않습니다.moment () 대상을 연결하려면moment 플러그인을 설치해야 합니다.
설치 방법:
npm install moment --save #npm 방식
yarn add moment # Yarn 방식
필요한 파일에importmomentfrom'moment'를 도입하면moment() 대상을 사용할 수 있습니다.
예:

 <a-select style="width: 80%;"  v-model="publicChannel" @change="changeChannel" >
  <a-select-option :value="value.mediaPlatformCode" v-for="(value, key, index) in mediaPlate" :key="index" >           
  {{value.mediaPlatformName}}</a-select-option>
 </a-select> -----------------<a-date-picker v-model='mom' />  ----------------------

data(){
 return{
   mom:moment()
 }
}

만약 아래에서 선택한 데이터가 통일되어 있다면, 로컬에 추가하지 않으면 v-model로 대상을 연결하지 않고 직접
, 물론 onChange 이벤트에서 얻은 것은 하나의 moment 대상입니다. 얻은 데이터를 변환해야만 원하는 시간 형식을 얻을 수 있습니다.
상기 ant 디자인 vue datepicker 날짜 선택기에서 문화적 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.