vue组件封装—单属性非props的应用

待我称王封你为后i 2021-09-17 02:58 401阅读 0赞

功能：  
1，支持显示快捷选择时间跨度，  
2，支持自定义初始值和重置时的值  
3，支持换行展示  
4，支持自定label  
5，支持是否开启快捷选择功能

基于iview的二次封装  
效果图：  
![在这里插入图片描述][20181127163605559.png]  
![在这里插入图片描述][2018112716280811.png]

![在这里插入图片描述][20181127162828618.png]  
![在这里插入图片描述][20181127162842396.png]  
![在这里插入图片描述][20181127162921695.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]

源码：

组件
    <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>

引用

![在这单属性里插入图片描述][20181127163345575.png]  
单属性的使用，更加直观  
欢迎指点，交流。。

[20181127163605559.png]: /images/20210813/2935128292344d4894b5a2a7064dd340.png
[2018112716280811.png]: /images/20210813/d8595c3c34a545a9ae42f96ca1b917bc.png
[20181127162828618.png]: /images/20210813/3dbf34fd901245c28ebed5aeb7137815.png
[20181127162842396.png]: /images/20210813/6dbdd90b55eb4b79a9f2fa6a864b2ae0.png
[20181127162921695.png]: /images/20210813/e11605cc67d24f25b351601cd863b32b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/53ad3adc781f4e50b54399bf9150c182.png
[20181127163345575.png]: /images/20210813/d63a826e51664425b8183b87cdcfa666.png