date week range 다운로드 - date week range 소스코드 다운로드

date week range

기타 카테고리

v2.0.3

다운로드

날짜-주-범위(주 범위 선택기)

v1 버전은 element-ui 2.x를 기반으로 개발되었으며 element-ui 2.x를 기반으로 사용할 수 있지만 독립적으로 사용할 수도 있지만 해당 스타일을 도입해야 합니다.

v2 버전은 element-plus를 기반으로 개발되었습니다. 요소 플러스에 의존하여 사용할 수도 있지만 독립적으로 사용할 수도 있지만 해당 스타일을 도입해야 합니다.

v1 버전 포털

예

v1 버전, v2 버전

목적

프로젝트 요구사항에 주간 셀렉터 기능이 필요했는데, 해당 컴포넌트 라이브러리를 찾을 수 없어서 element-ui/element-plus를 기준으로 수정했습니다.

호환 가능

v1 브랜치에 해당하는 v1 버전은 vue2만 지원합니다.
v2 브랜치에 해당하는 v2 버전은 vue3만 지원합니다.

계획

~~버전 1.x, vue2 지원(완료)~~
~~버전 2.x는 vue3을 지원할 예정이며 date-week-range@next 메소드를 통해 업그레이드될 예정입니다.~~
~~vue3이 안정되기를 기다리면 메인 버전이 v1에서 v2로 전환되고 마스터 브랜치도 v2 브랜치로 동기화됩니다.~~

알아채다

CSS는 자동으로 삽입되지 않으며 스타일 재정의를 피하기 위해 수동으로 도입해야 합니다. 요소 플러스 스타일이 전역적으로 도입되면 추가 도입이 필요하지 않습니다.
로컬 개발 모드는 기본적으로 esm 모듈을 사용합니다. es5로 이스케이프해야 하는 경우 다음을 참조하세요.

  // 在 vue-cli 将指定的 node_modules 模块转义成es5：
  // vue.config.js
  module . exports = {
    // 省略代码
    transpileDependencies : [ 'date-week-range' , 'element-plus' ]
  }

설치 및 가져오기

설치하다

npm install date-week-range@next --save
yarn add date-week-range@next --save

등록하다

글로벌 등록

 import DateWeekRange from 'date-week-range'
import { createApp } from 'vue'

// 引入样式；如果全局引入了 element-plus 样式，则无需再次引入


// 全局引入 element-plus 样式
// import 'element-plus/dist/index.css'

// 或引入
// import 'element-plus/theme-chalk/el-icon.css'
// import 'element-plus/theme-chalk/el-date-picker.css'
// import 'element-plus/theme-chalk/el-var.css';

// 或引入
// import 'date-week-range/index.css'

const app = createApp ( {
  /* ... */
} )

app . use ( DateWeekRange )

부분 등록

 < template >
  < DateWeekRange v-model = "test" > </ DateWeekRange >
</ template >

< script >
import { DateWeekRange } from 'date-week-range'
// 注意要引入样式！引入方式参考上面

export default {
  data ( ) {
    return {
      test : ''
    }
  } ,
  components : {
    DateWeekRange
  }
}
< / script>

브라우저 사용

 <!-- 引入样式。如果全局引入了element-plus 样式，则不需额外引入 -->
<!-- 全局引入 element-plus 样式 -->
< link type =" text/css " href =" https://unpkg.com/element-plus/lib/theme-chalk/index.css " >
<!-- 或者额外引入 -->
< link type =" text/css " href =" https://unpkg.com/element-plus/lib/theme-chalk/el-icon.css " >
< link type =" text/css " href =" https://unpkg.com/element-plus/lib/theme-chalk/el-date-picker.css " >

< script src =" https://unpkg.com/date-week-range@next " > </ script >

< body >
  < div id =" app " >
    < date-week-range v-model =" test " > </ date-week-range >
  </ div >
</ body >

< script >
const app = window . Vue . createApp ( {
  data ( ) {
    return {
      test : ''
    }
  }
} )
app . use ( window . DateWeekRange )
app . mount ( "#app" )
</ script >

국제화

기본적으로 중국어가 사용됩니다.

글로벌 등록 시

 import { createApp } from 'vue'
import App from './App.vue'
import DateWeekRange from 'date-week-range'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp ( App )

app . use ( DateWeekRange , { locale } )
app . mount ( '#app' )

export default app

현지에서 등록하는 경우

 < script >
import { DateWeekRange , locale } from 'date-week-range'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'

locale(lang)
/* 省略… */
</ script >