时间控件

components/page/dateRange.vue

 <template>
-  <div class="time-view" v-if="timeValue.startDate && timeValue.endDate">
-    <div>{{ timeValue.startDate }}</div>
-    <div class="jian-tou">
-      <div>{{ date }}</div>
+  <div class="time-view">
+    <div>{{ startDate }}</div>
+    <div class="jian-tou" v-if="startDate && endDate">
+      <div>{{ jg }} {{ unit }}</div>
     </div>
-    <div>{{ timeValue.endDate }}</div>
+    <div>{{ endDate }}</div>
   </div>
 </template>
 <script>
 export default {
   name: "",
   data() {
-    return {};
+    return {
+      startDate: null,
+      endDate: null,
+      unit: "h",
+      jg: 0,
+    };
   },
   props: {
-    // model: {
-    //   prop: "value",
-    //   event: "on-change",
-    // },
+    value: Object,
+    start: {
+      type: String,
+      default: "startDate",
+    },
+    end: {
+      type: String,
+      default: "endDate",
+    },
+    mode: {
+      type: String,
+      default: "h", //h：小时，d:天,w：周，m：月
+    },
     timeValue: {
       type: [String, Object],
       default: "",
     },
     work: {
       type: [String, Number], //传入的work为0，转换为小时，1为天，2为周，3为月
-      default: 0,
+      default: 8,
     },
   },
-  computed: {
-    date() {
-      var date1 = new Date(this.timeValue.startDate).getTime(); //开始时间，时间戳
-      var date2 = new Date(this.timeValue.endDate).getTime(); //结束时间，时间戳
-      var date3 = 0;
-      date3 = date2 - date1;
 
-      // var timeSpanStr;
-      // if (date3 <= 1000 * 60 * 1) {
-      //   timeSpanStr = "刚刚";
-      // } else if (1000 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60) {
-      //   timeSpanStr = Math.round(date3 / (1000 * 60)) + "分钟";
-      // } else if (1000 * 60 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60 * 24) {
-      //   timeSpanStr = Math.round(date3 / (1000 * 60 * 60)) + "小时";
-      // } else if (
-      //   1000 * 60 * 60 * 24 <
-      //   date3
-      //   // && date3 <= 1000 * 60 * 60 * 24 * 30
-      // ) {
-      //   timeSpanStr = Math.round(date3 / (1000 * 60 * 60 * 24)) + "天";
-      // }
-      // return timeSpanStr;
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init(v) {
+      this.startDate = v[this.start];
+      this.endDate = v[this.end];
+
+      this.unit = this.mode;
+      var date1 = new Date(this.startDate).getTime(); //开始时间，时间戳
+      var date2 = new Date(this.endDate).getTime(); //结束时间，时间戳
 
+      this.jg = date2 - date1;
       var result = "";
       var minute = 1000 * 60;
       var hour = minute * 60;
       var day = hour * 24;
       var month = day * 30;
-      if (date3 < 0) return;
-      var monthC = date3 / month;
-      var weekC = date3 / (7 * day);
-      var dayC = date3 / day;
-      var hourC = date3 / hour;
-      var minC = date3 / minute;
-      if (this.work == 3) {
-        result = "" + parseInt(monthC) + "月";
-      } else if (this.work == 2) {
-        result = "" + parseInt(weekC) + "周";
-      } else if (this.work == 1) {
-        result = "" + parseInt(dayC) + "天";
-      } else if (this.work == 0) {
-        result = "" + parseInt(hourC) + " h";
-      }
-      // if (monthC >= 1) {
-      //   result = "" + parseInt(monthC) + "月";
-      // } else if (weekC >= 1) {
-      //   result = "" + parseInt(weekC) + "周";
-      // } else if (dayC >= 1) {
-      //   result = "" + parseInt(dayC) + "天";
-      // } else if (hourC >= 1) {
-      //   result = "" + parseInt(hourC) + "小时";
-      // }
-      // else if (minC >= 1) {
-      //   result = "" + parseInt(minC) + "分钟";
-      // }
-      else {
-        result = "0";
+      if (this.jg < 0) return;
+      var monthC = this.jg / month;
+      var weekC = this.jg / (7 * day);
+      var dayC = this.jg / day;
+      var hourC = this.jg / hour;
+      var minC = this.jg / minute;
+      if (this.unit == "m") {
+        result = "" + parseInt(monthC);
+      } else if (this.unit == "w") {
+        result = "" + parseInt(weekC);
+      } else if (this.unit == "d") {
+        result = "" + parseInt(dayC);
+      } else if (this.unit == "h") {
+        result = "" + parseInt(hourC);
       }
-      return result;
+      this.jg = result;
+    },
+  },
+  watch: {
+    value: {
+      handler: function (n, v) {
+        this.init(n);
+      },
+      deep: true,
     },
   },
-  mounted() {},
-  methods: {},
-  watch: {},
 };
 </script>
 <style lang="less">