|
2 | 2 | <divclass="md-date-range-picker"v-clickoutside="clickOutside"> |
3 | 3 | <divclass="md-date-range-picker__activator"@click="togglePicker"> |
4 | 4 | <slotname="input"> |
5 | | - <default-activator:value="`${startText} - ${endText}`"readonly /> |
| 5 | + <default-activatorref="defaultActivator":value="`${startText} - ${endText}`"readonly /> |
6 | 6 | </slot> |
7 | 7 | </div> |
8 | 8 | <transitionname="slide-fade"mode="out-in"> |
@@ -236,7 +236,34 @@ export default { |
236 | 236 | } |
237 | 237 | }, |
238 | 238 | togglePicker () { |
239 | | -this.pickerVisible=!this.pickerVisible; |
| 239 | +// ---- fix #53 start ---- |
| 240 | +let elm=this.$refs.defaultActivator&&this.$refs.defaultActivator.$el; |
| 241 | +constslotActivator=this.$slots.input&&this.$slots.input.length&&this.$slots.input[0]; |
| 242 | +if (!elm&& (slotActivator.querySelector('input')||slotActivator.querySelector('button'))) { |
| 243 | + elm= slotActivator; |
| 244 | + } |
| 245 | +
|
| 246 | +if (elm) { |
| 247 | +// 1. dont return or do nothing here, |
| 248 | +// because you need to show the picker panel if the picker panel is hidden(example: user click the activator first time) |
| 249 | +// but `this.pickerVisible = !this.pickerVisible;` do the samething in this case. |
| 250 | +// So why set pickerVisible always `true` if elm exist? |
| 251 | +// 2. [interact]: because if the type of activator is input or button and the picker panel is already visible (pickerVisible === true), |
| 252 | +// when the user click the activator, the picker panel should keep visible(can not fold the picker panel) |
| 253 | +
|
| 254 | +// Chinese： |
| 255 | +// 1. 不能在这里 return 或 啥都不做 |
| 256 | +// 因为如果日期选择器是隐藏的，点击了 input 需要显示日期选择器。比如用户第一次点击日期选择器的时候 |
| 257 | +// 但是在这种情况下做，下面的 `this.pickerVisible = !this.pickerVisible;` 做了一样的事 |
| 258 | +// 那么为何需要在 elm 为 true 的时候，总是设置 pickerVisible 为 true 呢？ |
| 259 | +// 2. [交互] 我们约定，当 activator 的类型是 input 或 button，以及 选择器面板已经 打开的情况下， |
| 260 | +// 当用户点击了 activator 的时候，不收起日期选择器面板 |
| 261 | +
|
| 262 | +this.pickerVisible=true; |
| 263 | + }else { |
| 264 | +this.pickerVisible=!this.pickerVisible; |
| 265 | + } |
| 266 | +// ---- fix #53 start ---- |
240 | 267 | }, |
241 | 268 | pickerStyles () { |
242 | 269 | return { |
|