vue-slider-timer-control 1.0.0 → 1.0.2

package/vue-slider-timer-control.umd.js

@@ -27,22 +27,6 @@ var update = add("b06be540", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 72:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(853);
-if(content.__esModule) content = content.default;
-if(typeof content === 'string') content = [[module.id, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = (__webpack_require__(548)/* ["default"] */ .A)
-var update = add("3f289cee", content, true, {"sourceMap":false,"shadowMode":false});
-
-/***/ }),
-
 /***/ 113:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -62,6 +46,22 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".vue-slider-disabled{opacity:.5;cursor
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 222:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(667);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(548)/* ["default"] */ .A)
+var update = add("3abedde0", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 274:
@@ -455,7 +455,7 @@ module.exports = function (i) {
 
 /***/ }),
 
-/***/ 853:
+/***/ 667:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -469,7 +469,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".time-slider-container[data-v-2836fa1c]{position:relative;padding:20px;width:100%;box-sizing:border-box}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".time-slider-container[data-v-e98463a8]{position:relative;padding:20px;width:100%;box-sizing:border-box}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -579,8 +579,8 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VueSliderTimerControl/index.vue?vue&type=template&id=2836fa1c&scoped=true
-var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:"sliderWrapper",staticClass:"time-slider-container"},[(_vm.showCurrentTime)?_c('div',{staticClass:"time-label",style:(_vm.timeLabelStyle)},[_vm._v(" "+_vm._s(_vm.formattedTime)+" ")]):_vm._e(),_c('vue-slider',{ref:"slider",attrs:{"min":_vm.min,"max":_vm.max,"step":_vm.step,"tooltip":_vm.tooltip,"tooltip-formatter":_vm.tooltipFormatter || _vm.formatTooltip,"rail-style":_vm.railStyle,"process-style":_vm.processStyle,"dot-style":_vm.dotStyle},on:{"change":_vm.handleSeek},model:{value:(_vm.currentSecond),callback:function ($$v) {_vm.currentSecond=$$v},expression:"currentSecond"}}),(_vm.showHoverTooltip && _vm.hoverVisible)?_c('div',{style:([_vm.hoverTooltipStyle, { left: _vm.hoverX + 'px' }])},[_vm._v(" "+_vm._s((_vm.tooltipFormatter || _vm.formatTooltip)(_vm.hoverSecond))+" ")]):_vm._e(),(_vm.showTickLabels)?_c('div',{staticClass:"tick-labels",style:(_vm.tickLabelsStyle)},_vm._l((_vm.tickLabels),function(label){return _c('span',{key:label},[_vm._v(_vm._s(label))])}),0):_vm._e()],1)
+;// ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VueSliderTimerControl/index.vue?vue&type=template&id=e98463a8&scoped=true
+var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:"sliderWrapper",staticClass:"time-slider-container"},[(_vm.showCurrentTime)?_c('div',{staticClass:"time-label",style:(_vm.timeLabelStyle)},[_vm._v(" "+_vm._s(_vm.formattedTime)+" ")]):_vm._e(),_c('vue-slider',{ref:"slider",attrs:{"min":_vm.min,"max":_vm.max,"step":_vm.step,"tooltip":_vm.tooltip,"tooltip-formatter":_vm.tooltipFormatter || _vm.formatTooltip,"rail-style":_vm.railStyle,"process-style":_vm.processStyle,"dot-style":_vm.dotStyle},on:{"drag-start":_vm.onDragStart,"drag-end":_vm.onDragEnd,"change":_vm.handleSeek},model:{value:(_vm.currentSecond),callback:function ($$v) {_vm.currentSecond=$$v},expression:"currentSecond"}}),(_vm.showHoverTooltip && _vm.hoverVisible)?_c('div',{style:([_vm.hoverTooltipStyle, { left: _vm.hoverX + 'px' }])},[_vm._v(" "+_vm._s((_vm.tooltipFormatter || _vm.formatTooltip)(_vm.hoverSecond))+" ")]):_vm._e(),(_vm.showTickLabels)?_c('div',{staticClass:"tick-labels",style:(_vm.tickLabelsStyle)},_vm._l((_vm.tickLabels),function(label){return _c('span',{key:label},[_vm._v(_vm._s(label))])}),0):_vm._e()],1)
 }
 var staticRenderFns = []
 
@@ -590,162 +590,182 @@ var vue_slider_component_umd_min = __webpack_require__(378);
 var vue_slider_component_umd_min_default = /*#__PURE__*/__webpack_require__.n(vue_slider_component_umd_min);
 // EXTERNAL MODULE: ./node_modules/vue-slider-component/theme/default.css
 var theme_default = __webpack_require__(46);
-;// ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VueSliderTimerControl/index.vue?vue&type=script&lang=js
-
-
-
-
-/* harmony default export */ var VueSliderTimerControlvue_type_script_lang_js = ({
-  name: "VueSliderTimerControl",
-  components: { VueSlider: (vue_slider_component_umd_min_default()) },
-  props: {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 86400 },
-    step: { type: Number, default: 1 },
-    currentTime: { type: Number, default: 0 },
-
-    // 是否显示当前时间
-    showCurrentTime: { type: Boolean, default: false },
-
-    // 当前时间样式
-    timeLabelStyle: {
-      type: Object,
-      default: () => ({
-        textAlign: "center",
-        fontSize: "18px",
-        fontWeight: "500",
-        marginBottom: "10px",
-      }),
-    },
-
-    // hover 提示是否显示
-    showHoverTooltip: { type: Boolean, default: true },
-    hoverTooltipStyle: {
-      type: Object,
-      default: () => ({
-        position: "absolute",
-        top: "58px",
-        transform: "translateY(-70%)",
-        backgroundColor: "rgba(0, 0, 0, 0.75)",
-        color: "#fff",
-        padding: "2px 6px",
-        borderRadius: "4px",
-        fontSize: "12px",
-        pointerEvents: "none",
-        whiteSpace: "nowrap",
-        zIndex: 10,
-      }),
-    },
-
-    // 是否显示刻度
-    showTickLabels: { type: Boolean, default: false },
-    tickLabels: {
-      type: Array,
-      default: () => ["00:00", "12:00", "24:00"],
-    },
-    tickLabelsStyle: {
-      type: Object,
-      default: () => ({
-        display: "flex",
-        justifyContent: "space-between",
-        fontSize: "14px",
-        color: "#666",
-        marginTop: "6px",
-        padding: "0 2px",
-      }),
-    },
-
-    // 滑块样式配置
-    railStyle: {
-      type: Object,
-      default: () => ({ backgroundColor: "#d3d3d3" }),
-    },
-    processStyle: {
-      type: Object,
-      default: () => ({ backgroundColor: "#409EFF" }),
-    },
-    dotStyle: {
-      type: Object,
-      default: () => ({ backgroundColor: "#409EFF", border: "none" }),
-    },
-
-    tooltip: { type: [Boolean, String], default: "always" },
-    tooltipFormatter: { type: Function, default: null },
-  },
-  data() {
-    return {
-      rawSecond: 0,
-      hoverVisible: false,
-      hoverSecond: 0,
-      hoverX: 0,
-    };
-  },
-  computed: {
-    currentSecond: {
-      get() {
-        return this.rawSecond;
-      },
-      set(val) {
-        this.rawSecond = val;
-        this.$emit("seek", val);
-      },
-    },
-    formattedTime() {
-      return (this.tooltipFormatter || this.formatTooltip)(this.currentSecond);
-    },
-  },
-  watch: {
-    currentTime(val) {
-      if (val !== this.rawSecond) {
-        this.rawSecond = val;
-      }
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const rail = this.$refs.slider?.$el?.querySelector(".vue-slider-rail");
-      if (rail && this.showHoverTooltip) {
-        rail.addEventListener("mousemove", this.handleHover);
-        rail.addEventListener("mouseleave", this.hideHoverTime);
-      }
-    });
-  },
-  methods: {
-    formatTooltip(val) {
-      const h = String(Math.floor(val / 3600)).padStart(2, "0");
-      const m = String(Math.floor((val % 3600) / 60)).padStart(2, "0");
-      const s = String(val % 60).padStart(2, "0");
-      return `${h}:${m}:${s}`;
-    },
-    handleHover(e) {
-      const rail = this.$refs.slider?.$el?.querySelector(".vue-slider-rail");
-      if (!rail) return;
-
-      const rect = rail.getBoundingClientRect();
-      const offsetX = e.clientX - rect.left;
-      const ratio = Math.min(Math.max(offsetX / rect.width, 0), 1);
-      const second = Math.round((this.max - this.min) * ratio + this.min);
-
-      this.hoverVisible = true;
-      this.hoverX = offsetX;
-      this.hoverSecond = second;
-    },
-    hideHoverTime() {
-      this.hoverVisible = false;
-    },
-    handleSeek(val) {
-      this.$emit("seek", val);
-    },
-  },
-});
+;// ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VueSliderTimerControl/index.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ var VueSliderTimerControlvue_type_script_lang_js = ({
+  name: "VueVideoTimerControl",
+  components: { VueSlider: (vue_slider_component_umd_min_default()) },
+  props: {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 86400 },
+    step: { type: Number, default: 1 },
+    currentTime: { type: Number, default: 0 },
+    // 是否显示当前时间
+    showCurrentTime: { type: Boolean, default: false },
+    // 当前时间样式
+    timeLabelStyle: {
+      type: Object,
+      default: () => ({
+        textAlign: "center",
+        fontSize: "18px",
+        fontWeight: "500",
+        marginBottom: "10px",
+      }),
+    },
+    // hover 提示是否显示
+    showHoverTooltip: { type: Boolean, default: true },
+    hoverTooltipStyle: {
+      type: Object,
+      default: () => ({
+        position: "absolute",
+        top: "58px",
+        transform: "translateY(-70%)",
+        backgroundColor: "rgba(0, 0, 0, 0.75)",
+        color: "#fff",
+        padding: "2px 6px",
+        borderRadius: "4px",
+        fontSize: "12px",
+        pointerEvents: "none",
+        whiteSpace: "nowrap",
+        zIndex: 10,
+      }),
+    },
+
+    // 是否显示刻度
+    showTickLabels: { type: Boolean, default: false },
+    tickLabels: {
+      type: Array,
+      default: () => ["00:00", "12:00", "24:00"],
+    },
+    tickLabelsStyle: {
+      type: Object,
+      default: () => ({
+        display: "flex",
+        justifyContent: "space-between",
+        fontSize: "14px",
+        color: "#666",
+        marginTop: "6px",
+        padding: "0 2px",
+      }),
+    },
+    // 滑块样式配置
+    railStyle: {
+      type: Object,
+      default: () => ({ backgroundColor: "#d3d3d3" }),
+    },
+    processStyle: {
+      type: Object,
+      default: () => ({ backgroundColor: "#409EFF" }),
+    },
+    dotStyle: {
+      type: Object,
+      default: () => ({ backgroundColor: "#409EFF", border: "none" }),
+    },
+
+    tooltip: { type: [Boolean, String], default: "always" },
+    tooltipFormatter: { type: Function, default: null },
+  },
+  data() {
+    return {
+      rawSecond: 0,
+      hoverVisible: false,
+      hoverSecond: 0,
+      hoverX: 0,
+      isDragging: false, // 拖动标志
+    };
+  },
+  computed: {
+    currentSecond: {
+      get() {
+        return this.rawSecond;
+      },
+      set(val) {
+        this.rawSecond = val;
+        // this.$emit("seek", val);
+      },
+    },
+    formattedTime() {
+      return (this.tooltipFormatter || this.formatTooltip)(this.currentSecond);
+    },
+  },
+  watch: {
+    currentTime(val) {
+      if (!this.isDragging && val !== this.rawSecond) {
+        this.rawSecond = val;
+      }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const slider = this.$refs.slider;
+      const sliderEl = slider && slider.$el;
+      const rail = sliderEl && sliderEl.querySelector(".vue-slider-rail");
+      if (rail && this.showHoverTooltip) {
+        rail.addEventListener("mousemove", this.handleHover);
+        rail.addEventListener("mouseleave", this.hideHoverTime);
+      }
+    });
+  },
+  methods: {
+    formatTooltip(val) {
+      const h = String(Math.floor(val / 3600)).padStart(2, "0");
+      const m = String(Math.floor((val % 3600) / 60)).padStart(2, "0");
+      const s = String(val % 60).padStart(2, "0");
+      return `${h}:${m}:${s}`;
+    },
+    handleHover(e) {
+      const slider = this.$refs.slider;
+      const sliderEl = slider && slider.$el;
+      const rail = sliderEl && sliderEl.querySelector(".vue-slider-rail");
+      if (!rail) return;
+      const rect = rail.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      const ratio = Math.min(Math.max(offsetX / rect.width, 0), 1);
+      const second = Math.round((this.max - this.min) * ratio + this.min);
+
+      this.hoverVisible = true;
+      this.hoverX = offsetX;
+      this.hoverSecond = second;
+    },
+    hideHoverTime() {
+      this.hoverVisible = false;
+    },
+    onDragStart() {
+      this.isDragging = true;
+      this.$emit("dragging-change", true); // 通知父组件开始拖动
+    },
+    onDragEnd() {
+      this.isDragging = false;
+      this.$emit("dragging-change", false); // 通知父组件结束拖动
+      this.$emit("seek", this.rawSecond); // 拖动结束时手动触发
+    },
+    handleSeek(val, index) {
+      if (!this.isDragging) {
+        this.rawSecond = val;
+        this.$emit("seek", val); // 点击轨道时触发
+      }
+      // 拖动中不触发
+    },
+    // onDragging(val, index) {
+    //   console.log(val, index, "dragging");
+    // },
+    // // 只要轨道落点变了就出发用于该组件的change监听（点击的时候可用但是拖动触发太频繁需要节流）
+    // handleSeek(val) {
+    //   this.$emit("seek", val);
+    // },
+  },
+});
 
 ;// ./src/components/VueSliderTimerControl/index.vue?vue&type=script&lang=js
  /* harmony default export */ var components_VueSliderTimerControlvue_type_script_lang_js = (VueSliderTimerControlvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VueSliderTimerControl/index.vue?vue&type=style&index=0&id=2836fa1c&prod&scoped=true&lang=css
-var VueSliderTimerControlvue_type_style_index_0_id_2836fa1c_prod_scoped_true_lang_css = __webpack_require__(72);
-;// ./src/components/VueSliderTimerControl/index.vue?vue&type=style&index=0&id=2836fa1c&prod&scoped=true&lang=css
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VueSliderTimerControl/index.vue?vue&type=style&index=0&id=e98463a8&prod&scoped=true&lang=css
+var VueSliderTimerControlvue_type_style_index_0_id_e98463a8_prod_scoped_true_lang_css = __webpack_require__(222);
+;// ./src/components/VueSliderTimerControl/index.vue?vue&type=style&index=0&id=e98463a8&prod&scoped=true&lang=css
 
-;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
+;// ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
 
 // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
@@ -858,7 +878,7 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "2836fa1c",
+  "e98463a8",
   null
   
 )
@@ -868,6 +888,7 @@ var component = normalizeComponent(
 // 这个文件是插件的入口文件，它的作用是将插件注册到Vue中，这样就可以在Vue的任何组件中使用插件了。
 
 //import vue文件的name from 路径
+// 导入组件，SDK通过webpack.ProvidePlugin提供为全局变量
 
 
 const components = [VueSliderTimerControl];