123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- <template>
- <!-- 组件使用时 需要传入属性 openOptions:true|false 控制是否打开
- left :string|0 left为侧边的按钮的定位 0 表示不改变 或者传入字符串 如-100px 表示css中left:-100px
- -->
- <div class="datePicker">
- <a-range-picker
- v-model="dateValue"
- style="width:250px;height:150px"
- :open='openOptions'
- :disabled-date="disabledDate"
- :openChange='openChange'
- @change="onChange" />
- <div class="pickOptions" v-show='openOptions' ref="pickOptions">
- <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
- </div>
- </div>
- </template>
- <script>
- import moment from 'moment';
- let pickOptions=[
- {
- title:'今天',
- key:'1',
- value:1,
- dateValue:[moment(),moment()]
-
- },
- {
- title:'昨天',
- key:'2',
- value:2,
- dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')]
-
- },
- {
- title:'一周',
- key:'3',
- value:3,
- dateValue:[moment().subtract(7,'days'),moment().subtract(1,'days')]
-
- },
- {
- title:'一个月',
- key:'5',
- value:5,
- dateValue:[moment().subtract(1,'days').subtract(1,'months'),moment().subtract(1,'days')]
-
- },
- {
- title:'三个月',
- key:'6',
- value:6,
- dateValue:[moment().subtract(1,'days').subtract(3,'months'),moment().subtract(1,'days')]
-
- },
- {
- title:'六个月',
- key:'7',
- value:7,
- dateValue:[moment().subtract(1,'days').subtract(6,'months'),moment().subtract(1,'days')]
-
- },
- {
- title:'一年',
- key:'8',
- value:8,
- dateValue:[moment().subtract(1,'days').subtract(1,'years'),moment().subtract(1,'days')]
- },
- ]
- export default {
- props:['openOptions','left'],
- data() {
- return {
- moment,
- dateValue:[],
- type:0,
- pickOptions
- // pickOptions:JSON.parse(JSON.stringify(pickOptions))
- }
- },
-
- methods: {
- //日期改变事件
- onChange(date,dateString){
- this.dateValue=date;
- // console.log(this.dateValue)
- if(dateString.length==2){
- this.$parent.opendate();
- this.$parent.type=9
- this.$parent.dateValue=date
- };
- },
- //侧边的按钮点击事件
- changeDate(val){
- this.type=val.value
- this.dateValue=val.dateValue;
- // console.log(this.dateValue)
- this.$parent.type=val.value
- this.$parent.dateValue=val.dateValue
- },
-
- disabledDate(current) {
- // console.log(current)
- return current && current > moment().subtract(1, 'day')
- },
- openChange(open){
- // console.log(open)
- },
- },
- mounted() {
- this.dateValue=[moment(),moment()]
- if(this.left){
- this.$refs.pickOptions.style.left=this.left
- }
-
- // console.log(this.$refs.pickOptions.style.left)
- },
- }
- </script>
- <style lang="scss" scoped>
- .datePicker{
- position: relative;
- .pickOptions{
- width: 100px;
- background-color: #FFF;
- height: 302px;
- position: absolute;
- top: -2px;
- left: -402px;
- border-right: 1px solid #999;
- box-shadow: 0 0 15px rgba(0,0,0,0.1);
- cursor: pointer;
- div{
- height: 43px;
- padding: 10px 15px;
- box-sizing: border-box;
-
- }
- }
- }
- </style>
|