组件二次封装-选择日期星期

发表于 更新于 分类于

图示

组件使用

1
2
3
4
5
6
7
8
<el-form ref="form" :model="conditionForm" label-width="80px">
  <condition-date-week
    popper-class="condition-picker"
    :picker-options="pickerOptions"
    v-model="conditionForm.analysisDate"
    placeholder="选择日期星期"
  ></condition-date-week>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import ConditionDateWeek from "@/components/ConditionForm/ConditionDateWeek";

export default {
  data() {
    return {
      conditionForm: {
        analysisDate: ""
      },
      pickerOptions: {
        disabledDate(date) {
          return date > new Date() || date < new Date("1999-12-31");
        }
      }
    };
  },
  components: { ConditionDateWeek }
};

API

Props

参数说明类型默认值
picker-options当前时间日期选择器特有的选项object{}

组件完整代码展示

该组件需要全局注入 element-ui 中的 Form，FormItem 组件

1
2
3
4
// main.js
import { Form, FormItem } from "element-ui";

Vue.use(Form).use(FormItem);
1
2
3
4
5
6
7
8
9
10
<el-form-item style="margin-right: 0;">
  <el-date-picker
    v-model="inputValue"
    :editable="false"
    type="week"
    format="yyyy-WW"
    v-bind="$attrs"
    @change="setValue"
  ></el-date-picker>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { DatePicker } from "element-ui";
export default {
  inheritAttrs: false,
  data() {
    return {
      inputValue: ""
    };
  },
  props: {
    format: {
      type: String,
      default: ""
    }
  },
  model: {
    prop: "value",
    event: "change"
  },
  components: {
    ElDatePicker: DatePicker
  },
  methods: {
    setValue() {
      this.$nextTick()
        .then(result => {
          const value = this.$el.children[0].children[0].children[0].value;
          this.$emit("change", value);
          this.dispatch("ElFormItem", "el.form.change", [value]);
        })
        .catch(err => {});
    },
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.componentName;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    }
  },
  watch: {
    value() {
      if (this.value != this.inputValue) {
        this.inputValue == this.value;
      }
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.quarter-popover.el-popper {
  padding: 24px;
  .popover-body {
    margin-top: 20px;
  }
  .popover-body::after {
    content: "";
    display: block;
    clear: both;
  }
  .popover-item {
    float: left;
    width: 150px;
    text-align: center;
    color: #333333;
    padding: 10px 0;
    cursor: pointer;
    &:hover,
    &.active {
      color: #2683ff;
    }
    &.disabled {
      color: #ddd;
      cursor: not-allowed;
    }
  }
}