date week range
v2.0.3
เวอร์ชัน v1 ได้รับการพัฒนาโดยใช้ element-ui 2.x และสามารถใช้งานได้โดยอาศัย element-ui 2.x นอกจากนี้ยังสามารถใช้แยกกันได้ แต่ต้องแนะนำสไตล์ที่เกี่ยวข้อง
เวอร์ชัน v2 ได้รับการพัฒนาโดยใช้ element-plus สามารถใช้โดยอาศัย element-plus; นอกจากนี้ยังสามารถใช้ได้อย่างอิสระ แต่ต้องแนะนำสไตล์ที่เกี่ยวข้อง
พอร์ทัลเวอร์ชัน v1
เวอร์ชัน v1, เวอร์ชัน v2
CSS จะไม่ถูกแทรกโดยอัตโนมัติและจำเป็นต้องแนะนำด้วยตนเองเพื่อหลีกเลี่ยงการแทนที่สไตล์ หากมีการแนะนำสไตล์ element-plus ทั่วโลก ก็ไม่จำเป็นต้องแนะนำเพิ่มเติม!
โหมดการพัฒนาในเครื่องจะใช้โมดูล esm เป็นค่าเริ่มต้น หากคุณต้องการ Escape ไปที่ 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-date-picker type="daterange"
