date week range

date-week-range (sélecteur de plage de semaines)

La version v1 est développée sur la base d'element-ui 2.x et peut être utilisée en s'appuyant sur element-ui 2.x, elle peut également être utilisée indépendamment, mais les styles correspondants doivent être introduits ;

La version v2 est développée sur la base d'Element-Plus. Il peut être utilisé en s'appuyant sur element-plus ; il peut également être utilisé indépendamment, mais les styles correspondants doivent être introduits.

portail de la version v1

Exemple

version v1, version v2

But

• Les exigences du projet nécessitaient la fonction de sélection hebdomadaire, mais je n'ai pas trouvé la bibliothèque de composants correspondante, je l'ai donc modifiée en fonction de element-ui/element-plus.

compatible

• La version v1, correspondant à la branche v1, ne supporte que vue2
• La version v2, correspondant à la branche v2, ne supporte que vue3

plan

• Version 1.x, prend en charge vue2 (terminé)
• La version 2.x prendra en charge vue3 et devrait être mise à niveau via la méthode date-week-range@next.
• En attendant que vue3 soit stable, la version principale passera de la v1 à la v2, et la branche master sera également synchronisée avec la branche v2.

Avis

• CSS ne sera pas automatiquement injecté et doit être introduit manuellement pour éviter les remplacements de style ; si le style element-plus est introduit globalement, aucune introduction supplémentaire n'est requise !

• Le mode de développement local utilise le module esm par défaut. Si vous devez passer à es5, veuillez vous référer à :

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

Installer && Importer

• Installer

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

• registre

Inscription globale

 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 ) 

inscription partielle

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

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

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

Utilisation du navigateur

 <!-- 引入样式。如果全局引入了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 >

internationalisation

Le chinois est utilisé par défaut

Lors de votre inscription à l'échelle mondiale

 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

Lors d'une inscription locale

 < 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 >

document

Ce plug-in est développé sur la base du composant el-date-picker dans le framework element-plus. Sa documentation est cohérente avec le composant el-date-picker type="daterange".