ai.touchui-vue 1.40.0 → 1.40.2

package/lib/slide.js

@@ -199,7 +199,7 @@ function normalizeComponent(
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/slide/src/slide.vue?vue&type=template&id=020258e2
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/slide/src/slide.vue?vue&type=template&id=0f2000b8
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
@@ -274,7 +274,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/slide/src/slide.vue?vue&type=template&id=020258e2
+// CONCATENATED MODULE: ./packages/slide/src/slide.vue?vue&type=template&id=0f2000b8
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/slide/src/slide.vue?vue&type=script&lang=js
 //
@@ -296,6 +296,31 @@ render._withStripped = true
 //
 //
 
+function db(fn) {
+	var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
+
+	// 通过闭包缓存一个定时器 id
+	var timer = null;
+	// 将 debounce 处理结果当作函数返回
+	// 触发事件回调时执行这个返回函数
+	return function () {
+		var _this = this;
+
+		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+			args[_key] = arguments[_key];
+		}
+
+		// 如果已经设定过定时器就清空上一次的定时器
+		if (timer) clearTimeout(timer);
+		// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
+		timer = setTimeout(function () {
+			fn.apply(_this, args);
+
+			clearTimeout(timer);
+			timer = null;
+		}, wait);
+	};
+}
 /* harmony default export */ var slidevue_type_script_lang_js = ({
 	name: 'ToSlide',
 	componentName: 'ToSlide',
@@ -334,91 +359,98 @@ render._withStripped = true
 		}
 	},
 	mounted: function mounted() {
-		var _this = this;
+		var _this2 = this;
 
-		setTimeout(function () {
-			_this.width = _this.$el.offsetWidth;
-			_this.setLength();
-			_this.$refs.lastFake.innerHTML = _this.$refs.ul.querySelector(':nth-child(2)').innerHTML;
-			_this.$refs.firstFake.innerHTML = _this.$refs.ul.querySelector(':nth-child(' + (_this.length + 1) + ')').innerHTML;
-			_this.play();
-			window.addEventListener('resize', function () {
-				_this.width = _this.$el.offsetWidth;
-			});
+		this.setLength();
+		this.$refs.lastFake.innerHTML = this.$refs.ul.querySelector(':nth-child(2)').innerHTML;
+		this.$refs.firstFake.innerHTML = this.$refs.ul.querySelector(':nth-child(' + (this.length + 1) + ')').innerHTML;
+		this.play();
 
-			// 初始化 MutationObserver
-			var observer = new MutationObserver(function (mutations) {
-				_this.setLength(); // 每次子节点变化时更新长度
-			});
-			observer.observe(_this.$refs.ul, {
-				childList: true, // 监听子节点变化
-				subtree: true // 监听所有后代节点
-			});
-			_this.observer = observer;
-		}, 100);
+		window.addEventListener('resize', this.setWidth);
+
+		// 初始化 MutationObserver
+		var observer = new MutationObserver(function (mutations) {
+			_this2.setLength(); // 每次子节点变化时更新长度
+		});
+		observer.observe(this.$refs.ul, {
+			childList: true, // 监听子节点变化
+			subtree: true // 监听所有后代节点
+		});
+		this.observer = observer;
+
+		var mo = new MutationObserver(function (mutations) {
+			_this2.width = _this2.$el.offsetWidth;
+		});
+		mo.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['style']
+		});
 	},
 	beforeDestroy: function beforeDestroy() {
-		var _this2 = this;
-
 		if (this.observer) {
 			this.observer.disconnect(); // 断开监听
 		}
 		clearInterval(this.playTimer); // 清理定时器
-		window.removeEventListener('resize', function () {
-			_this2.width = _this2.$el.offsetWidth;
-		});
+		window.removeEventListener('resize', this.setWidth);
 	},
 
 	methods: {
-		play: function play() {
+		setWidth: function setWidth() {
 			var _this3 = this;
 
+			db(function () {
+				_this3.width = _this3.$el.offsetWidth;
+			}, 200)();
+		},
+		play: function play() {
+			var _this4 = this;
+
 			if (!this.autoplay || this.length < 2) {
 				return;
 			}
 			this.playTimer = setInterval(function () {
-				_this3.next();
+				_this4.next();
 			}, Number(this.speed));
 		},
 		pause: function pause() {
 			clearInterval(this.playTimer);
 		},
 		setLength: function setLength() {
-			var _this4 = this;
+			var _this5 = this;
 
 			this.$nextTick(function () {
-				if (_this4.$refs.ul) {
-					_this4.length = _this4.$refs.ul.children.length - 2;
+				if (_this5.$refs.ul) {
+					_this5.length = _this5.$refs.ul.children.length - 2;
 				}
 			});
 		},
 		next: function next() {
-			var _this5 = this;
+			var _this6 = this;
 
 			if (this.animate) {
 				this.current += 1;
 				if (this.current === this.length) {
 					setTimeout(function () {
-						_this5.animate = false;
-						_this5.current = 0;
+						_this6.animate = false;
+						_this6.current = 0;
 						setTimeout(function () {
-							_this5.animate = true;
+							_this6.animate = true;
 						}, 300);
 					}, 300);
 				}
 			}
 		},
 		prev: function prev() {
-			var _this6 = this;
+			var _this7 = this;
 
 			if (this.animate) {
 				this.current -= 1;
 				if (this.current === -1) {
 					setTimeout(function () {
-						_this6.animate = false;
-						_this6.current = _this6.length - 1;
+						_this7.animate = false;
+						_this7.current = _this7.length - 1;
 						setTimeout(function () {
-							_this6.animate = true;
+							_this7.animate = true;
 						}, 300);
 					}, 300);
 				}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ai.touchui-vue",
-	"version": "1.40.0",
+	"version": "1.40.2",
 	"description": "TouchUI Component Library for Vue.js.",
 	"main": "lib/ai.touchui-vue.common.js",
 	"files": [

package/packages/slide/src/slide.vue

@@ -7,16 +7,33 @@
 				<li ref="lastFake"></li>
 			</ul>
 		</div>
-		<div v-if="length>1" class="fn">
+		<div v-if="length > 1" class="fn">
 			<span class="prev" @click="prev()"></span>
 			<span class="next" @click="next()"></span>
 		</div>
-		<div v-if="length>1" class="page">
-			<span v-for="index of length" :key="index" :class="{ 'on': index === current + 1 }" @click="jumpTo(index-1)"></span>
+		<div v-if="length > 1" class="page">
+			<span v-for="index of length" :key="index" :class="{ 'on': index === current + 1 }" @click="jumpTo(index - 1)"></span>
 		</div>
 	</div>
 </template>
 <script>
+function db(fn, wait = 50) {
+	// 通过闭包缓存一个定时器 id
+	let timer = null
+	// 将 debounce 处理结果当作函数返回
+	// 触发事件回调时执行这个返回函数
+	return function(...args) {
+		// 如果已经设定过定时器就清空上一次的定时器
+		if (timer) clearTimeout(timer)
+		// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
+		timer = setTimeout(() => {
+			fn.apply(this, args)
+
+			clearTimeout(timer)
+			timer = null
+		}, wait)
+	}
+}
 export default {
 	name: 'ToSlide',
 	componentName: 'ToSlide',
@@ -54,38 +71,46 @@ export default {
 		}
 	},
 	mounted() {
-		setTimeout(() => {
-			this.width = this.$el.offsetWidth
-			this.setLength()
-			this.$refs.lastFake.innerHTML = this.$refs.ul.querySelector(':nth-child(2)').innerHTML
-			this.$refs.firstFake.innerHTML = this.$refs.ul.querySelector(`:nth-child(${this.length + 1})`).innerHTML
-			this.play()
-			window.addEventListener('resize', () => {
-				this.width = this.$el.offsetWidth
-			})
 
-			// 初始化 MutationObserver
-			const observer = new MutationObserver((mutations) => {
-				this.setLength(); // 每次子节点变化时更新长度
-			});
-			observer.observe(this.$refs.ul, {
-				childList: true, // 监听子节点变化
-				subtree: true // 监听所有后代节点
-			});
-			this.observer = observer;
+		this.setLength()
+		this.$refs.lastFake.innerHTML = this.$refs.ul.querySelector(':nth-child(2)').innerHTML
+		this.$refs.firstFake.innerHTML = this.$refs.ul.querySelector(`:nth-child(${this.length + 1})`).innerHTML
+		this.play()
+
+		window.addEventListener('resize', this.setWidth)
+
+		// 初始化 MutationObserver
+		const observer = new MutationObserver((mutations) => {
+			this.setLength(); // 每次子节点变化时更新长度
+		});
+		observer.observe(this.$refs.ul, {
+			childList: true, // 监听子节点变化
+			subtree: true // 监听所有后代节点
+		});
+		this.observer = observer;
+
+		const mo = new MutationObserver((mutations) => {
+			this.width = this.$el.offsetWidth
+		});
+		mo.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['style']
+		});
 
-		}, 100)
 	},
 	beforeDestroy() {
 		if (this.observer) {
 			this.observer.disconnect(); // 断开监听
 		}
 		clearInterval(this.playTimer); // 清理定时器
-		window.removeEventListener('resize', () => {
-			this.width = this.$el.offsetWidth;
-		});
+		window.removeEventListener('resize', this.setWidth);
 	},
 	methods: {
+		setWidth() {
+			db(() => {
+				this.width = this.$el.offsetWidth
+			}, 200)()
+		},
 		play() {
 			if (!this.autoplay || this.length < 2) {
 				return

package/src/index.js

@@ -455,7 +455,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-	version: '1.40.0',
+	version: '1.40.2',
 	locale: locale.use,
 	i18n: locale.i18n,
 	install,