vue+iview自定义季度选择器组件

先看看效果：

样式和当前iview的DatePicker类似。这里用到了iview的Input和一个自定义的下拉面板。

整体思路：

1. 当点击Input聚焦时，触发on-focus事件设置visible=true显示下拉面板。
2. 下拉面板分为上下两部分，上半部分为左、中、右。左右两边进行翻页显示上下年份，中间显示年份（默认为当前年份）。下半部分为所选年份的四个季度（首次打开时当前季度标亮）。
3. 选择对应季度后组成将要在Input框上显示的内容。
4. 添加不可选日期。使用options设置不可选季度，格式与DatePicker中options相同。
5. Input框内添加删除按钮，当存在数据时并且鼠标在范围内则显示，点击删除清空数据。
6. Input进行只读设定。（按个人需求，如果可编辑，需要对编辑的数据进行处理。我这里直接设成了只读）
7. 鼠标离开后关闭下拉面板（自定义v-clickoutside事件）。
   完整代码
   父组件引用：

<template>
 	<quarter-picker v-model="value" @on-change="changeQuarter"></quarter-picker>
</template> 
<script>
  import quarterPicker from './quarter-picker.vue';
    export default {
        name: 'demo',
        components: {
            quarterPicker
        },
        data () {
            return {
              value: null,
              options: {}
            };
        },
        mounted: {
       		const currentYear = new Date().getFullYear();
       		this.options = {
                 disabledDate (y, q) {
                        return y < currentYear || (y === currentYear && q < 4);
                   }
            };
        },
        methods: {
        	changeQuarter() {
        	}
        }
   }
</script>
 

quarter-picker季度选择器组件

<template>
    <div v-clickoutside="closePicker" style="width: 100px; display: inline-block">
        <Input v-model="message" :icon="arrowType" readonly
               @on-focus="show"
               @on-click="clickIcon"
               @mouseenter