week-range-picker
v1.0.9
Published
This is a week range selector based on element-ui 2.x.
Maintainers
mr_zhangqcReadme
week-range-picker
vue2 element-ui week range component
基于 element-ui 2.x 开发周范围选择组件
示例
注意
不会自动注入css，独立使用需手动引入（xxx/theme-chalk/icon.css，xxx/theme-chalk/date-picker.css），如果是element-ui项目内可以直接使用
安装
npm install week-range-picker --save
yarn add week-range-picker --save局部注册（vue2）
<template>
<WeekRangePicker v-model="range"></WeekRangePicker>
</template>
<script>
import WeekRangePicker from 'week-range-picker'
export default {
data() {
return {
range: []
}
},
components: {
WeekRangePicker
}
}
</script>浏览器使用（Vue 2）
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="https://unpkg.com/[email protected]/lib/theme-chalk/icon.css">
<link type="text/css" href="https://unpkg.com/[email protected]/lib/theme-chalk/date-picker.css">
</head>
<body>
<div id="app">
<week-range-picker v-model="range"></week-range-picker>
</div>
<!-- 先引入 Vue 2 -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 再引入组件 -->
<script src="https://unpkg.com/[email protected]/dist/week-range-picker.umd.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
range: []
}
}
});
</script>
</body>
</html>FQA
webpack4.x旧项目中使用，es模块解析出错，需要额外配置webpack rules
module: {
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',
include: resolve('node_modules/week-range-picker'),
options: {
presets: ['@babel/preset-env'],
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator'
]
}
}
]
}文档
文档和 el-date-picker组件 type="daterange" 一致。