VUE封装一个类似iview的组件———单属性非props的应用

先看效果，功能，样式根据参数决定,(二次封装)

源码：

组件
<template>
  <div style="position: relative;display: inline-block;">
    {{label}}
    <Date-picker v-model="params.startTime" @on-change="handleChangeStart" type="date" placeholder="开始日期" class="date-picker" :options="options"></Date-picker>
    <span>至</span>
    <Date-picker v-model="params.endTime" @on-change="handleChangeEnd" type="date" placeholder="结束日期" class="date-picker" :options="options"></Date-picker>
    <Radio-group v-model="params.status" :class="(isBr)?'radio-group':''" v-if="quickSelect">
      <span>最近：</span>
      <Radio label="week">一周</Radio>
      <Radio label="onemonth">1个月</Radio>
      <Radio label="threemonth">3个月</Radio>
      <Radio label="sixmonth">半年</Radio>
      <Radio label="year">一年</Radio>
    </Radio-group>
  </div>
</template>
<script>
export default {
  //disableDate 禁用日期        string   (beforeToady,afterToady)
  props: ['startTime', 'endTime', 'disableDate'],
  data () {
    return {
      params: {
        status: '',
        startTime: null,
        endTime: null
      },
      isBr: false, //isBr 是否分行显示
      quickSelect: false,// 是否显示快捷选择
      label: '选择时间：',// label默认的字段
      // 禁用日期
      options: {}
    };
  },
  created () {
    // 是否显示快捷选择
    if (this.$attrs.hasOwnProperty('quickSelect')) { //也可以用in
      this.quickSelect = true
    }
    // 是否分行显示
    if (this.$attrs.hasOwnProperty('isBr')) {
      this.isBr = true
    }
    // 传了label,就改变label
    if (this.$attrs.label) {
      this.label = this.$attrs.label
    }
    // 初始化开始时间和结束时间
    this.params.startTime = this.startTime
    this.params.endTime = this.endTime

    // 初始化禁用日期,默认不禁用
    // 禁用今天之前的日期
    if (this.disableDate === 'beforeToady') {
      this.options = {
        disabledDate: date => {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      }
      // 禁用今天之后的日期
    } else if (this.disableDate === 'afterToady') {
      this.options = {
        disabledDate: date => {
          return date && date.valueOf() > Date.now();
        }
      }
    }
  },
  mounted () {
    // 重置方法
    // 触发方式 this.$refs.foo.$emit('reset',startTime,endTime)
    this.$on('reset', (startTime, endTime) => {//也可以写在methods里，this.$refs.foo.reset()调用
      this.params.startTime = startTime;
      this.params.endTime = endTime;
      this.params.status = 'reset';
      this.$emit('selectData', this.params);
    })
  },
  methods: {
    handleChangeStart (data) {
      this.params.startTime = data;
      this.$emit('selectData', this.params);
    },
    handleChangeEnd (data) {
      this.params.endTime = data;
      this.$emit('selectData', this.params);
    }
  },
  watch: {
    'params.status' (val) {
      if (val === 'reset') {
        return;
      }
      this.params.endTime = this.$utils.time.formatTime();
      switch (val) {
        case 'week':
          this.params.startTime = this.$utils.time.formatSubtractTime(7, 'd')
          break;
        case 'onemonth':
          this.params.startTime = this.$utils.time.formatSubtractTime(1, 'M')
          break;
        case 'threemonth':
          this.params.startTime = this.$utils.time.formatSubtractTime(3, 'M')
          break;
        case 'sixmonth':
          this.params.startTime = this.$utils.time.formatSubtractTime(6, 'M')
          break;
        case 'year':
          this.params.startTime = this.$utils.time.formatSubtractTime(12, 'M')
          break;
      }
      this.$emit('selectData', this.params);
    }
  }
};
</script>
<style scoped>
.date-picker {
  width: 135px;
  display: inline-block;
  margin-right: 10px;
}
.radio-group {
  position: absolute;
  top: 40px;
  right: 0;
  min-width: 315px;
  z-index: 10;
}
</style>

引用

单属性的使用，更加直观 欢迎指点，交流。。