date week range

نطاق التاريخ والأسبوع (محدد نطاق الأسبوع)

تم تطوير الإصدار v1 استنادًا إلى element-ui 2.x ويمكن استخدامه بالاعتماد على element-ui 2.x؛ كما يمكن استخدامه بشكل مستقل، ولكن يجب تقديم الأنماط المقابلة.

تم تطوير الإصدار v2 بناءً على element-plus. يمكن استخدامه بالاعتماد على 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 إلى الإصدار 2، وستتم أيضًا مزامنة الفرع الرئيسي مع الفرع v2.

يلاحظ

• لن يتم إدخال CSS تلقائيًا ويجب تقديمه يدويًا لتجنب تجاوزات النمط؛ إذا تم تقديم نمط element-plus عالميًا، فلن تكون هناك حاجة إلى مقدمة إضافية!

• يستخدم وضع التطوير المحلي وحدة 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 >

وثيقة

تم تطوير هذا البرنامج الإضافي استنادًا إلى مكون منتقي التاريخ el-date-picker في إطار عمل element-plus، وتتوافق وثائقه مع مكون منتقي التاريخ el-daterange = "daterange".