vue-slider-timer-control 1.0.0 → 1.0.2

package/package.json

@@ -1,16 +1,16 @@
-{
-  "name": "vue-slider-timer-control",
-  "version": "1.0.0",
-  "description": "",
-  "main": "vue-slider-timer-control.common.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "vue",
-    "vue-slider-component",
-    "自定义视频进度条"
-  ],
-  "author": "XinSC",
-  "license": "ISC"
-}
+{
+  "name": "vue-slider-timer-control",
+  "version": "1.0.2",
+  "description": "这是一个可自定义的播放器进度条组件",
+  "main": "vue-slider-timer-control.common.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vue",
+    "vue-slider-component",
+    "自定义视频进度条"
+  ],
+  "author": "XinSC",
+  "license": "ISC"
+}

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

@@ -28,6 +28,27 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".vue-slider-disabled{opacity:.5;cursor
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 225:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(601);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+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-e98463a8]{position:relative;padding:20px;width:100%;box-sizing:border-box}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 238:
@@ -151,24 +172,19 @@ module.exports = function (cssWithMappingToString) {
 
 /***/ }),
 
-/***/ 419:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(601);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
-// Imports
-
+/***/ 458:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-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}", ""]);
-// Exports
-/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+// style-loader: Adds some css to the DOM by adding a <style> tag
 
+// load the styles
+var content = __webpack_require__(225);
+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("11ad13bc", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -436,22 +452,6 @@ function applyToTag (styleElement, obj) {
 }
 
 
-/***/ }),
-
-/***/ 592:
-/***/ (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__(419);
-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("7ee65530", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ 601:
@@ -569,8 +569,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 = []
 
@@ -580,162 +580,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__(238);
-;// ./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-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.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__(592);
-;// ./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-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.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-12.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.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__(458);
+;// ./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).
@@ -848,7 +868,7 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "2836fa1c",
+  "e98463a8",
   null
   
 )
@@ -858,6 +878,7 @@ var component = normalizeComponent(
 // 这个文件是插件的入口文件，它的作用是将插件注册到Vue中，这样就可以在Vue的任何组件中使用插件了。
 
 //import vue文件的name from 路径
+// 导入组件，SDK通过webpack.ProvidePlugin提供为全局变量
 
 
 const components = [VueSliderTimerControl];