增加公共方法模块;优化scroll;完成datepicker;优化input
parent
5220b030d5
commit
b936200b45
23
build.dev.js
23
build.dev.js
|
@ -37,15 +37,19 @@ $cd: #62778d #526273 #425064;
|
||||||
::after{box-sizing:border-box;}
|
::after{box-sizing:border-box;}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
function fixImport(str) {
|
||||||
|
return str
|
||||||
|
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
||||||
|
.replace(
|
||||||
|
/import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g,
|
||||||
|
'import $1 from "$2.js"'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function compileJs(entry, output) {
|
function compileJs(entry, output) {
|
||||||
log('编译JS: %s', chalk.green(entry))
|
log('编译JS: %s', chalk.green(entry))
|
||||||
let buf = fs.cat(entry).toString()
|
let buf = fs.cat(entry).toString()
|
||||||
let code = buf
|
let code = fixImport(buf)
|
||||||
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
|
|
||||||
.replace(
|
|
||||||
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
|
|
||||||
'import $1 from "$2.js"'
|
|
||||||
)
|
|
||||||
|
|
||||||
fs.echo(code, output)
|
fs.echo(code, output)
|
||||||
}
|
}
|
||||||
|
@ -81,16 +85,11 @@ function mkWCFile({ style, html, js }) {
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
|
||||||
js = js
|
js = fixImport(js)
|
||||||
.replace(/class ([\w]+)/, function(s, m) {
|
.replace(/class ([\w]+)/, function(s, m) {
|
||||||
name = m
|
name = m
|
||||||
return `${s} extends HTMLElement `
|
return `${s} extends HTMLElement `
|
||||||
})
|
})
|
||||||
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
|
|
||||||
.replace(
|
|
||||||
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
|
|
||||||
'import $1 from "$2.js"'
|
|
||||||
)
|
|
||||||
.replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
|
.replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
|
||||||
.replace(
|
.replace(
|
||||||
'/* render */',
|
'/* render */',
|
||||||
|
|
|
@ -37,16 +37,21 @@ $cd: #62778d #526273 #425064;
|
||||||
::after{box-sizing:border-box;}
|
::after{box-sizing:border-box;}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
function fixImport(str) {
|
||||||
|
return str
|
||||||
|
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
||||||
|
.replace(
|
||||||
|
/import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g,
|
||||||
|
'import $1 from "$2.js"'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const compileJs = (entry, output) => {
|
const compileJs = (entry, output) => {
|
||||||
let t1 = Date.now()
|
let t1 = Date.now()
|
||||||
let buf = fs.cat(entry).toString()
|
let buf = fs.cat(entry).toString()
|
||||||
let { code } = uglify.minify(buf)
|
let { code } = uglify.minify(buf)
|
||||||
code = code
|
code = fixImport(code)
|
||||||
.replace(/import"([a-z0-9\/\.\-_]*)"/g, 'import "$1.js"')
|
|
||||||
.replace(
|
|
||||||
/import ([\w]*) from"([a-z0-9\/\.\-_]*)"/g,
|
|
||||||
'import $1 from "$2.js"'
|
|
||||||
)
|
|
||||||
log(
|
log(
|
||||||
'编译JS: %s, 耗时 %s ms',
|
'编译JS: %s, 耗时 %s ms',
|
||||||
chalk.green(entry),
|
chalk.green(entry),
|
||||||
|
@ -87,16 +92,11 @@ function mkWCFile({ style, html, js }) {
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
|
||||||
js = js
|
js = fixImport(js)
|
||||||
.replace(/class ([\w]+)/, function(s, m) {
|
.replace(/class ([\w]+)/, function(s, m) {
|
||||||
name = m
|
name = m
|
||||||
return `${s} extends HTMLElement `
|
return `${s} extends HTMLElement `
|
||||||
})
|
})
|
||||||
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
|
|
||||||
.replace(
|
|
||||||
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
|
|
||||||
'import $1 from "$2.js"'
|
|
||||||
)
|
|
||||||
.replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
|
.replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
|
||||||
.replace(
|
.replace(
|
||||||
'/* render */',
|
'/* render */',
|
||||||
|
|
|
@ -6,7 +6,9 @@
|
||||||
<slot class="append" name="append"></slot>
|
<slot class="append" name="append"></slot>
|
||||||
|
|
||||||
<div class="suggestion">
|
<div class="suggestion">
|
||||||
<ul class="list"></ul>
|
<wc-scroll>
|
||||||
|
<ul class="list"></ul>
|
||||||
|
</wc-scroll>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -17,6 +19,7 @@ li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
:host {
|
:host {
|
||||||
|
overflow: hidden;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
@ -25,7 +28,6 @@ li {
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -94,11 +96,11 @@ li {
|
||||||
|
|
||||||
.suggestion {
|
.suggestion {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
z-index: 10240;
|
z-index: 10240;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 50px;
|
top: 0;
|
||||||
width: 100%;
|
width: 200px;
|
||||||
height: auto;
|
height: auto;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
min-height: 46px;
|
min-height: 46px;
|
||||||
|
@ -108,8 +110,6 @@ li {
|
||||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -219,7 +219,9 @@ li {
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import '../scroll/index'
|
||||||
import '../icon/index'
|
import '../icon/index'
|
||||||
|
import { nextTick, ebind, bind, unbind } from '../utils'
|
||||||
|
|
||||||
const IS_FIREFOX = !!window.sidebar
|
const IS_FIREFOX = !!window.sidebar
|
||||||
const TYPES = ['text', 'textarea', 'password']
|
const TYPES = ['text', 'textarea', 'password']
|
||||||
|
@ -327,7 +329,9 @@ export default class Input {
|
||||||
if (list && list.length) {
|
if (list && list.length) {
|
||||||
ev.preventDefault()
|
ev.preventDefault()
|
||||||
var step = ev.keyCode === 38 ? -1 : 1
|
var step = ev.keyCode === 38 ? -1 : 1
|
||||||
var items = Array.from(this.__LIST__.firstElementChild.children)
|
var items = Array.from(
|
||||||
|
this.__LIST__.firstElementChild.firstElementChild.children
|
||||||
|
)
|
||||||
if (this.props.mvidx === null) {
|
if (this.props.mvidx === null) {
|
||||||
this.props.mvidx = 0
|
this.props.mvidx = 0
|
||||||
} else {
|
} else {
|
||||||
|
@ -383,8 +387,8 @@ export default class Input {
|
||||||
|
|
||||||
var { type } = this.props
|
var { type } = this.props
|
||||||
|
|
||||||
// 回车事件
|
// 键盘事件
|
||||||
this._handleSubmit = ev => {
|
this._handleSubmit = ebind(this.__INPUT__, 'keydown', ev => {
|
||||||
if (this.disabled || this.readonly) {
|
if (this.disabled || this.readonly) {
|
||||||
ev.stopPropagation()
|
ev.stopPropagation()
|
||||||
return
|
return
|
||||||
|
@ -404,7 +408,6 @@ export default class Input {
|
||||||
return this._fetchSelect(this.props.mvidx, ev)
|
return this._fetchSelect(this.props.mvidx, ev)
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
|
||||||
if (
|
if (
|
||||||
type === 'text' ||
|
type === 'text' ||
|
||||||
(type === 'textarea' && (ev.ctrlKey || ev.metaKey))
|
(type === 'textarea' && (ev.ctrlKey || ev.metaKey))
|
||||||
|
@ -416,69 +419,65 @@ export default class Input {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
|
||||||
// 输入状态事件
|
|
||||||
this._handleChange = ev => {
|
|
||||||
ev.preventDefault()
|
|
||||||
this.dispatchEvent(
|
|
||||||
new CustomEvent('fetch-suggestions', {
|
|
||||||
detail: {
|
|
||||||
value: this.value,
|
|
||||||
send: list => {
|
|
||||||
this.props.list = list
|
|
||||||
this._parseSuggestion()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 渲染建议列表
|
|
||||||
this._parseSuggestion = ev => {
|
|
||||||
var { list } = this.props
|
|
||||||
if (list && list.length) {
|
|
||||||
var html = list
|
|
||||||
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
|
|
||||||
.join('')
|
|
||||||
this.__LIST__.firstElementChild.innerHTML = html
|
|
||||||
this.__LIST__.classList.toggle('show', true)
|
|
||||||
} else {
|
|
||||||
this.__LIST__.classList.toggle('show', false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 失去焦点
|
|
||||||
this._handleBlur = ev => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.__LIST__.classList.remove('show')
|
|
||||||
}, 50)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择建议
|
|
||||||
this._handleSelect = ev => {
|
|
||||||
if (ev.target.tagName === 'LI') {
|
|
||||||
this._fetchSelect(ev.target.dataset.idx, ev)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.__INPUT__.addEventListener('keydown', this._handleSubmit, false)
|
|
||||||
|
|
||||||
// 非textarea, 可做输入建议功能
|
// 非textarea, 可做输入建议功能
|
||||||
if (type === 'text') {
|
if (type === 'text') {
|
||||||
this.__INPUT__.addEventListener('input', this._handleChange, false)
|
// 输入状态事件
|
||||||
this.__INPUT__.addEventListener('focus', this._parseSuggestion, false)
|
this._handleChange = bind(this.__INPUT__, 'input', ev => {
|
||||||
this.__INPUT__.addEventListener('blur', this._handleBlur, false)
|
ev.preventDefault()
|
||||||
this.__LIST__.addEventListener('click', this._handleSelect, false)
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('fetch-suggest', {
|
||||||
|
detail: {
|
||||||
|
value: this.value,
|
||||||
|
send: list => {
|
||||||
|
this.props.list = list
|
||||||
|
this._parseSuggestion()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 渲染建议列表
|
||||||
|
this._parseSuggestion = bind(this.__INPUT__, 'click', ev => {
|
||||||
|
var { list } = this.props
|
||||||
|
let { x, y, width } = this.getBoundingClientRect()
|
||||||
|
if (list && list.length) {
|
||||||
|
var html = list
|
||||||
|
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
|
||||||
|
.join('')
|
||||||
|
this.__LIST__.firstElementChild.firstElementChild.innerHTML = html
|
||||||
|
this.__LIST__.classList.toggle('show', true)
|
||||||
|
this.__LIST__.style.cssText = `left:${x}px;top:${y +
|
||||||
|
50}px;width:${width}px;`
|
||||||
|
} else {
|
||||||
|
this.__LIST__.classList.toggle('show', false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this._bubbleFn = ebind(this, 'click')
|
||||||
|
|
||||||
|
this._inactiveFn = bind(document, 'click', ev => {
|
||||||
|
this.__LIST__.classList.remove('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
// 选择建议
|
||||||
|
this._handleSelect = bind(this.__LIST__, 'click', ev => {
|
||||||
|
if (ev.target.tagName === 'LI') {
|
||||||
|
this._fetchSelect(ev.target.dataset.idx, ev)
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
this.__INPUT__.removeEventListener('keydown', this._handleSubmit)
|
unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||||
this.__INPUT__.removeEventListener('input', this._handleChange)
|
unbind(this.__INPUT__, 'input', this._handleChange)
|
||||||
this.__INPUT__.removeEventListener('focus', this._parseSuggestion)
|
unbind(this, 'click', this._bubbleFn)
|
||||||
this.__INPUT__.removeEventListener('blur', this._handleBlur)
|
unbind(document, 'click', this._inactiveFn)
|
||||||
this.__LIST__.removeEventListener('click', this._handleSelect)
|
unbind(this.__INPUT__, 'blur', this._handleBlur)
|
||||||
|
unbind(this.__LIST__, 'click', this._handleSelect)
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(name, old, val) {
|
watch(name, old, val) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<label class="input" tabindex="0">
|
<label class="input" tabindex="0">
|
||||||
<span>ddd</span>
|
<span></span>
|
||||||
<wc-icon class="icon" is="calendar"></wc-icon>
|
<wc-icon class="icon" is="calendar"></wc-icon>
|
||||||
</label>
|
</label>
|
||||||
<div class="calendar">
|
<div class="calendar">
|
||||||
|
@ -21,6 +21,7 @@
|
||||||
<span>六</span>
|
<span>六</span>
|
||||||
</section>
|
</section>
|
||||||
<section class="days"></section>
|
<section class="days"></section>
|
||||||
|
<div class="tips">日期超出限制</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -41,7 +42,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 64px;
|
min-width: 64px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
border: 1px solid nth($cp, 3);
|
border: 1px solid nth($cp, 3);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
@ -57,14 +58,10 @@
|
||||||
color: nth($cgr, 1);
|
color: nth($cgr, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: nth($ct, 1);
|
|
||||||
}
|
|
||||||
/* ----- */
|
/* ----- */
|
||||||
.icon {
|
.icon {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
--size: 20px;
|
--size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,11 +71,12 @@
|
||||||
z-index: 10240;
|
z-index: 10240;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 202px;
|
width: 216px;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
@ -100,11 +98,13 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
wc-icon {
|
wc-icon {
|
||||||
--size: 16px;
|
--size: 16px;
|
||||||
margin: 0 3px;
|
margin: 0 3px;
|
||||||
color: nth($cgr, 1);
|
color: nth($cgr, 1);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@ -113,10 +113,9 @@
|
||||||
}
|
}
|
||||||
.week {
|
.week {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 27px;
|
height: 29px;
|
||||||
border-bottom: 1px solid #f2f5fc;
|
border-bottom: 1px solid #f2f5fc;
|
||||||
text-align: center;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
|
||||||
span {
|
span {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
@ -125,47 +124,88 @@
|
||||||
.days {
|
.days {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
margin-top: 8px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
span {
|
span {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 26px;
|
width: 28px;
|
||||||
height: 26px;
|
height: 28px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #f2f5fc;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
&[weekend] {
|
&[weekend] {
|
||||||
color: nth($ct, 1);
|
color: nth($ct, 1);
|
||||||
}
|
}
|
||||||
&[picked] {
|
&[picked] {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
border-color: #f2f5fc;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 3px;
|
||||||
top: 0;
|
top: 3px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
width: 100%;
|
width: 20px;
|
||||||
height: 100%;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: nth($ct, 1);
|
background: nth($ct, 1);
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
|
border-color: transparent;
|
||||||
|
font-size: 12px;
|
||||||
color: nth($cp, 3);
|
color: nth($cp, 3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10241;
|
||||||
|
left: 25%;
|
||||||
|
top: 40%;
|
||||||
|
width: 50%;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 28px;
|
||||||
|
background: #fffbed;
|
||||||
|
color: nth($co, 2);
|
||||||
|
border: 1px solid nth($co, 1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:focus-within) {
|
||||||
|
box-shadow: 0 0 3px nth($ct, 1);
|
||||||
|
}
|
||||||
|
:host(:focus-within[readonly]) {
|
||||||
|
box-shadow: 0 0 3px nth($co, 1);
|
||||||
|
}
|
||||||
|
:host([disabled]) {
|
||||||
|
opacity: 0.6;
|
||||||
|
.input {
|
||||||
|
cursor: not-allowed;
|
||||||
|
background: #f3f5fb;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import '../icon/index'
|
import '../icon/index'
|
||||||
|
import { nextTick, each, ebind, bind, unbind } from '../utils'
|
||||||
|
|
||||||
const today = new Date()
|
const today = new Date()
|
||||||
|
|
||||||
/**************** 公共函数 *****************/
|
/**************** 公共函数 *****************/
|
||||||
|
|
||||||
//计算日历数组
|
//计算日历数组
|
||||||
function getCalendarTable({ year, month, max, min, last }) {
|
function getCalendarTable({ year, month, max, min, last }) {
|
||||||
let nums = getTotalDays(year, month)
|
let nums = getTotalDays(year, month)
|
||||||
|
@ -173,7 +213,6 @@ function getCalendarTable({ year, month, max, min, last }) {
|
||||||
let isLimitYM = isLimited({ max, min }, { year, month })
|
let isLimitYM = isLimited({ max, min }, { year, month })
|
||||||
let list = []
|
let list = []
|
||||||
|
|
||||||
log(isLimitYM, year, month)
|
|
||||||
for (let i = numsFixed; i <= nums; i++) {
|
for (let i = numsFixed; i <= nums; i++) {
|
||||||
let day = {
|
let day = {
|
||||||
weekend: false,
|
weekend: false,
|
||||||
|
@ -210,10 +249,6 @@ function isLimited({ max, min }, { year, month }) {
|
||||||
} else if (month === max.month) {
|
} else if (month === max.month) {
|
||||||
result += '+'
|
result += '+'
|
||||||
}
|
}
|
||||||
// todo next
|
|
||||||
// result += '+'
|
|
||||||
} else {
|
|
||||||
// return true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -226,9 +261,6 @@ function isLimited({ max, min }, { year, month }) {
|
||||||
} else if (month === min.month) {
|
} else if (month === min.month) {
|
||||||
result += '-'
|
result += '-'
|
||||||
}
|
}
|
||||||
// todo next
|
|
||||||
} else {
|
|
||||||
// return true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result
|
return result
|
||||||
|
@ -291,7 +323,9 @@ export default class DatePicker {
|
||||||
'min-date': '',
|
'min-date': '',
|
||||||
max: null,
|
max: null,
|
||||||
min: null,
|
min: null,
|
||||||
calendar: null
|
calendar: null,
|
||||||
|
readonly: false,
|
||||||
|
disabled: false
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -301,7 +335,8 @@ export default class DatePicker {
|
||||||
this.__INPUT__ = this.root.children[1]
|
this.__INPUT__ = this.root.children[1]
|
||||||
this.__CALENDAR__ = this.root.children[2]
|
this.__CALENDAR__ = this.root.children[2]
|
||||||
this.__CTRL__ = this.__CALENDAR__.firstElementChild
|
this.__CTRL__ = this.__CALENDAR__.firstElementChild
|
||||||
this.__DAYS__ = this.__CALENDAR__.lastElementChild
|
this.__DAYS__ = this.__CALENDAR__.children[2]
|
||||||
|
this.__TIPS__ = this.__CALENDAR__.lastElementChild
|
||||||
}
|
}
|
||||||
|
|
||||||
get value() {
|
get value() {
|
||||||
|
@ -313,7 +348,7 @@ export default class DatePicker {
|
||||||
if (!Date.isDate(val)) {
|
if (!Date.isDate(val)) {
|
||||||
val = new Date(val)
|
val = new Date(val)
|
||||||
if (val.toString() === 'Invalid Date') {
|
if (val.toString() === 'Invalid Date') {
|
||||||
val = new Date()
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._updateValue(val)
|
this._updateValue(val)
|
||||||
|
@ -322,10 +357,68 @@ export default class DatePicker {
|
||||||
this.props.value = ''
|
this.props.value = ''
|
||||||
this.__INPUT__.firstElementChild.textContent = ''
|
this.__INPUT__.firstElementChild.textContent = ''
|
||||||
}
|
}
|
||||||
|
let { calendar, last } = this.props
|
||||||
|
|
||||||
|
if (
|
||||||
|
!calendar.year ||
|
||||||
|
(last && calendar.year !== last.year && calendar.month !== last.month)
|
||||||
|
) {
|
||||||
|
this.props.calendar = { ...last }
|
||||||
|
}
|
||||||
this._renderCalendar()
|
this._renderCalendar()
|
||||||
|
nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
|
||||||
}
|
}
|
||||||
|
|
||||||
_updateValue(oDate) {
|
get readonly() {
|
||||||
|
return this.props.readonly
|
||||||
|
}
|
||||||
|
|
||||||
|
set readonly(val) {
|
||||||
|
var type = typeof val
|
||||||
|
|
||||||
|
if (val === this.props.readonly) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||||
|
this.props.readonly = true
|
||||||
|
this.setAttribute('readonly', '')
|
||||||
|
} else {
|
||||||
|
this.props.readonly = false
|
||||||
|
this.removeAttribute('readonly')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get disabled() {
|
||||||
|
return this.props.disabled
|
||||||
|
}
|
||||||
|
|
||||||
|
set disabled(val) {
|
||||||
|
var type = typeof val
|
||||||
|
|
||||||
|
if (val === this.props.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||||
|
this.props.disabled = true
|
||||||
|
this.setAttribute('disabled', '')
|
||||||
|
this.__INPUT__.removeAttribute('tabindex')
|
||||||
|
} else {
|
||||||
|
this.props.disabled = false
|
||||||
|
this.removeAttribute('disabled')
|
||||||
|
this.__INPUT__.setAttribute('tabindex', '0')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_tips() {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.__TIPS__.style.display = 'block'
|
||||||
|
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.__TIPS__.style.display = ''
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateValue(oDate, needUpdateStyle) {
|
||||||
this.props.last = {
|
this.props.last = {
|
||||||
year: oDate.getFullYear(),
|
year: oDate.getFullYear(),
|
||||||
month: oDate.getMonth(),
|
month: oDate.getMonth(),
|
||||||
|
@ -333,6 +426,18 @@ export default class DatePicker {
|
||||||
}
|
}
|
||||||
this.props.value = oDate.format(this.props.format)
|
this.props.value = oDate.format(this.props.format)
|
||||||
this.__INPUT__.firstElementChild.textContent = this.props.value
|
this.__INPUT__.firstElementChild.textContent = this.props.value
|
||||||
|
|
||||||
|
if (needUpdateStyle) {
|
||||||
|
each(this.__DAYS__.children, (el, i) => {
|
||||||
|
if (this.props.last.day === this.calendar[i].day) {
|
||||||
|
this.calendar[i].picked = true
|
||||||
|
el.setAttribute('picked', '')
|
||||||
|
} else {
|
||||||
|
this.calendar[i].picked = false
|
||||||
|
el.removeAttribute('picked')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_renderCalendar() {
|
_renderCalendar() {
|
||||||
|
@ -361,85 +466,91 @@ export default class DatePicker {
|
||||||
|
|
||||||
this._renderCalendar()
|
this._renderCalendar()
|
||||||
|
|
||||||
this.__INPUT__.addEventListener(
|
this._activeFn = bind(this.__INPUT__, 'click', ev => {
|
||||||
'click',
|
if (this.props.disabled || this.props.readonly || this.props.active) {
|
||||||
ev => {
|
return
|
||||||
if (this.props.active) {
|
}
|
||||||
|
this.props.active = true
|
||||||
|
|
||||||
|
let { x, y } = this.getBoundingClientRect()
|
||||||
|
|
||||||
|
this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y +
|
||||||
|
50}px`
|
||||||
|
})
|
||||||
|
|
||||||
|
this._bubbleFn = ebind(this, 'click')
|
||||||
|
this._inactiveFn = bind(document, 'click', ev => {
|
||||||
|
this.__CALENDAR__.style.cssText = ''
|
||||||
|
this.props.active = false
|
||||||
|
})
|
||||||
|
|
||||||
|
this._ctrlFn = bind(this.__CTRL__, 'click', ev => {
|
||||||
|
let {
|
||||||
|
calendar: { year, month },
|
||||||
|
max,
|
||||||
|
min
|
||||||
|
} = this.props
|
||||||
|
if (ev.target.tagName === 'WC-ICON') {
|
||||||
|
let act = ev.target.is
|
||||||
|
// log(ev.target, act)
|
||||||
|
switch (act) {
|
||||||
|
case 'left':
|
||||||
|
month--
|
||||||
|
if (month < 0) {
|
||||||
|
month = 11
|
||||||
|
year--
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'right':
|
||||||
|
month++
|
||||||
|
if (month > 11) {
|
||||||
|
month = 0
|
||||||
|
year++
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'dbl-left':
|
||||||
|
year--
|
||||||
|
break
|
||||||
|
case 'dbl-right':
|
||||||
|
year++
|
||||||
|
break
|
||||||
|
}
|
||||||
|
if (isLimited({ max, min }, { year, month }) === true) {
|
||||||
|
return this._tips()
|
||||||
|
}
|
||||||
|
this.props.calendar.month = month
|
||||||
|
this.props.calendar.year = year
|
||||||
|
this._renderCalendar()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this._pickFn = bind(this.__DAYS__, 'click', ev => {
|
||||||
|
if (ev.target.tagName === 'SPAN') {
|
||||||
|
let { calendar, last } = this.props
|
||||||
|
let item = this.calendar[ev.target.dataset.idx]
|
||||||
|
if (
|
||||||
|
item.disabled ||
|
||||||
|
(last &&
|
||||||
|
calendar.year === last.year &&
|
||||||
|
calendar.month === last.month &&
|
||||||
|
item.day === last.day)
|
||||||
|
) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.props.active = true
|
|
||||||
|
|
||||||
let { x, y } = this.getBoundingClientRect()
|
this._updateValue(item._, true)
|
||||||
|
nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
|
||||||
|
this._inactiveFn()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y +
|
unmount() {
|
||||||
50}px`
|
unbind(this.__INPUT__, 'click', this._activeFn)
|
||||||
},
|
unbind(this, 'click', this._bubbleFn)
|
||||||
false
|
unbind(document, 'click', this._inactiveFn)
|
||||||
)
|
unbind(this.__CTRL__, 'click', this._ctrlFn)
|
||||||
|
unbind(this.__DAYS__, 'click', this._pickFn)
|
||||||
this.addEventListener('click', ev => ev.stopPropagation(), false)
|
|
||||||
|
|
||||||
document.addEventListener(
|
|
||||||
'click',
|
|
||||||
ev => {
|
|
||||||
this.__CALENDAR__.style.cssText = ''
|
|
||||||
this.props.active = false
|
|
||||||
},
|
|
||||||
false
|
|
||||||
)
|
|
||||||
|
|
||||||
this.__CTRL__.addEventListener(
|
|
||||||
'click',
|
|
||||||
ev => {
|
|
||||||
let { year, month } = this.props.calendar
|
|
||||||
if (ev.target.tagName === 'WC-ICON') {
|
|
||||||
let act = ev.target.is
|
|
||||||
// log(ev.target, act)
|
|
||||||
switch (act) {
|
|
||||||
case 'left':
|
|
||||||
month--
|
|
||||||
if (month < 0) {
|
|
||||||
month = 11
|
|
||||||
year--
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'right':
|
|
||||||
month++
|
|
||||||
if (month > 11) {
|
|
||||||
month = 0
|
|
||||||
year++
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'dbl-left':
|
|
||||||
year--
|
|
||||||
break
|
|
||||||
case 'dbl-right':
|
|
||||||
year++
|
|
||||||
break
|
|
||||||
}
|
|
||||||
this.props.calendar.month = month
|
|
||||||
this.props.calendar.year = year
|
|
||||||
this._renderCalendar()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
false
|
|
||||||
)
|
|
||||||
|
|
||||||
this.__DAYS__.addEventListener(
|
|
||||||
'click',
|
|
||||||
ev => {
|
|
||||||
if (ev.target.tagName === 'SPAN') {
|
|
||||||
let item = this.calendar[ev.target.dataset.idx]
|
|
||||||
log(item)
|
|
||||||
if (item.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
item.selected = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
false
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(name, old, val) {
|
watch(name, old, val) {
|
||||||
|
@ -485,19 +596,12 @@ export default class DatePicker {
|
||||||
|
|
||||||
case 'value':
|
case 'value':
|
||||||
this.value = val
|
this.value = val
|
||||||
|
|
||||||
if (!this.props.calendar.year) {
|
|
||||||
this.props.calendar = {
|
|
||||||
year: this.props.pick.getFullYear(),
|
|
||||||
month: this.props.pick.getMonth()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this._renderCalendar()
|
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'readonly':
|
||||||
case 'disabled':
|
case 'disabled':
|
||||||
if (val === '') {
|
if (val === '') {
|
||||||
this.disabled = true
|
this[name] = true
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -32,6 +33,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: rgba(44, 47, 53, 0.25);
|
background: rgba(44, 47, 53, 0.25);
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(44, 47, 53, 0.5);
|
background: rgba(44, 47, 53, 0.5);
|
||||||
|
|
|
@ -0,0 +1,87 @@
|
||||||
|
/**
|
||||||
|
* 公共方法库
|
||||||
|
* @author yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/08/08 10:47:55
|
||||||
|
*/
|
||||||
|
|
||||||
|
function noop() {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 异步回调
|
||||||
|
*/
|
||||||
|
export const nextTick = (function() {
|
||||||
|
let queue = []
|
||||||
|
function callback() {
|
||||||
|
let n = queue.length
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
queue[i]()
|
||||||
|
}
|
||||||
|
queue = queue.slice(n)
|
||||||
|
}
|
||||||
|
|
||||||
|
let node = document.createTextNode('<!-- -->')
|
||||||
|
new MutationObserver(callback).observe(node, { characterData: true })
|
||||||
|
|
||||||
|
let bool = false
|
||||||
|
return function(fn) {
|
||||||
|
queue.push(fn)
|
||||||
|
bool = !bool
|
||||||
|
node.data = bool
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 对象/数组遍历
|
||||||
|
* 支持跳出
|
||||||
|
*/
|
||||||
|
export const each = function(obj, fn) {
|
||||||
|
if (obj) {
|
||||||
|
if (Array.isArray(obj)) {
|
||||||
|
for (let i = 0, it; (it = obj[i++]); ) {
|
||||||
|
if (fn(it, i - 1) === false) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let i in obj) {
|
||||||
|
if (obj.hasOwnProperty(i) && fn(obj[i], i) === false) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 事件绑定
|
||||||
|
*/
|
||||||
|
export const bind = function(dom, type, fn = noop, phase = false) {
|
||||||
|
let events = type.split(',')
|
||||||
|
each(events, function(t) {
|
||||||
|
t = t.trim()
|
||||||
|
dom.addEventListener(t, fn, phase)
|
||||||
|
})
|
||||||
|
return fn
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 事件绑定(默认不冒泡)
|
||||||
|
*/
|
||||||
|
export const ebind = function(dom, type, fn, phase) {
|
||||||
|
function fn2(ev) {
|
||||||
|
ev.stopPropagation()
|
||||||
|
fn && fn(ev)
|
||||||
|
}
|
||||||
|
return bind(dom, type, fn2, phase)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解除事件绑定
|
||||||
|
*/
|
||||||
|
export const unbind = function(dom, type, fn = noop, phase = false) {
|
||||||
|
let events = type.split(',')
|
||||||
|
each(events, function(t) {
|
||||||
|
t = t.trim()
|
||||||
|
dom.removeEventListener(t, fn, phase)
|
||||||
|
})
|
||||||
|
}
|
Reference in New Issue