ai.touchui-vue 1.31.3 → 1.32.0

package/packages/dialog/index.js

@@ -1,8 +1,8 @@
-import Dialog from './src/dialog';
-
-/* istanbul ignore next */
-Dialog.install = function(Vue) {
-	Vue.component(Dialog.name, Dialog);
-};
-
-export default Dialog;
+import Dialog from './src/dialog';
+
+/* istanbul ignore next */
+Dialog.install = function(Vue) {
+	Vue.component(Dialog.name, Dialog);
+};
+
+export default Dialog;

package/packages/dialog/src/dialog.vue

@@ -1,313 +1,313 @@
-<template>
-	<div v-if="lazy ? visible : true" v-show="visible" class="to-dialog" :class="setClass" @click.stop="blur">
-		<div ref="dialogWrapper" class="wrapper" :style="setWrapperStyle" @click.stop>
-			<to-header v-if="slide" :title-position="titlePosition" :title="title" level="0" @back="closeHandele">
-				<template v-slot:title>
-					<slot name="title"></slot>
-				</template>
-			</to-header>
-			<div v-else-if="showHeader" ref="dialogHeader" class="header">
-				<template>
-					<div class="text" :style="setTextStyle">
-						<slot name="title">
-							{{ title }}
-						</slot>
-					</div>
-					<div v-if="$slots.fn" class="fn">
-						<slot name="fn"></slot>
-					</div>
-					<div class="fn">
-						<div v-if="closable" class="close" @click="closeHandele"></div>
-					</div>
-				</template>
-			</div>
-			<div class="content" :class="`content-color-${contentColor}`">
-				<slot></slot>
-			</div>
-		</div>
-	</div>
-</template>
-<script>
-export default {
-	name: 'ToDialog',
-	props: {
-		showHeader: {
-			type: Boolean,
-			default: true
-		},
-		closable: {
-			type: Boolean,
-			default: true
-		},
-		draggable: {
-			type: Boolean,
-			default: false
-		},
-		visible: Boolean,
-		lazy: {
-			type: Boolean,
-			default() {
-				if (this.$TouchUI && this.$TouchUI.dialog && this.$TouchUI.dialog.lazy === true) {
-					return true
-				} else {
-					return false
-				}
-			}
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		titlePosition: { // left center right
-			type: String,
-			default: 'left'
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		closeOnBlur: {
-			type: Boolean,
-			default: true
-		},
-		contentColor: {
-			type: String,
-			default: ''
-		},
-		global: {
-			type: Boolean,
-			default: true
-		},
-
-		// 是否改为侧滑模式
-		slide: Boolean
-	},
-	data() {
-		return {
-			closed: true
-		}
-	},
-	computed: {
-		setClass() {
-			let arr = []
-			if (this.slide) {
-				arr.push('is-slide')
-			}
-			if (!this.closed) {
-				arr.push('is-show')
-			}
-			return arr
-		},
-		setWrapperStyle() {
-			let obj = {}
-			if (this.width) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em';
-				} else if (this.width === 'full') {
-					obj.width = '100%';
-				} else {
-					obj.width = this.width;
-				}
-			}
-			return obj
-		},
-		setTextStyle() {
-			let position = 'left'
-			if (this.titlePosition && typeof this.titlePosition === 'string') {
-				position = this.titlePosition
-			}
-			return { 'text-align': position }
-		}
-	},
-	watch: {
-		visible(val) {
-			if (val) {
-				this.$nextTick(() => {
-					this.$emit('beforeOpen');
-					this.$el.style.zIndex = window.$TouchUI.zIndex
-					window.$TouchUI.zIndex++
-					this.$nextTick(()=>{
-						this.closed = false
-						this.$emit('opened')
-						if (this.showHeader) {
-							this.initDrag()
-						}
-					})
-				});
-			} else {
-				if (!this.closed) {
-					this.hide()
-				}
-			}
-		}
-	},
-	mounted() {
-		this.init()
-	},
-	activated() {
-		this.init()
-	},
-	deactivated() {
-		this.destroy()
-	},
-	beforeDestroy() {
-		this.destroy()
-	},
-	methods: {
-		init() {
-			if (this.$el && this.global) {
-				document.body.appendChild(this.$el);
-			}
-		},
-		destroy() {
-			if (this.$el && this.$el.parentNode) {
-				this.$el.parentNode.removeChild(this.$el);
-			}
-		},
-		initDrag() {
-			const dialogHeaderEl = this.$refs.dialogHeader;
-			const dragDom = this.$refs.dialogWrapper;
-			const bodyW = document.body.clientWidth
-			const bodyH = document.body.clientHeight
-			if (dragDom) {
-				dragDom.style.left = '';
-				dragDom.style.top = '';
-			}
-			if (dialogHeaderEl) {
-				dialogHeaderEl.style.cursor = 'move';
-			} else {
-				return
-			}
-			// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
-			const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
-			let dialogHeaderFn = function(e) {
-				// 鼠标按下，计算当前元素距离可视区的距离
-				let clientX = e.clientX
-				let clientY = e.clientY
-				if (e.touches) {
-					clientX = e.touches[0].clientX
-					clientY = e.touches[0].clientY
-				}
-				const disX = clientX - dialogHeaderEl.offsetLeft;
-				const disY = clientY - dialogHeaderEl.offsetTop;
-
-				// 获取到的值带px 正则匹配替换
-				let styL, styT;
-				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-				if (sty.left.includes('%')) {
-					styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
-					styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
-				} else if (sty.left.includes('auto')) {
-					styL = 0;
-					styT = 0;
-				} else {
-					styL = +sty.left.replace(/px/g, '');
-					styT = +sty.top.replace(/px/g, '');
-				}
-				document.onmousemove = function(e) {
-					// 通过事件委托，计算移动的距离
-					let clientX = e.clientX
-					let clientY = e.clientY
-					const l = clientX - disX;
-					const t = clientY - disY;
-					const pleft = l + styL
-					const ptop = t + styT
-					const w = bodyW - dragDom.clientWidth
-					const h = bodyH - dragDom.clientHeight
-
-					// 移动当前元素
-					if (pleft < -w / 2) {
-						dragDom.style.left = '-${w/2}px';
-					} else if (pleft > w - dragDom.clientWidth / 2) {
-						dragDom.style.left = '${w - dragDom.clientWidth / 2}px';
-					} else {
-						dragDom.style.left = `${pleft}px`;
-					}
-					if (ptop < -h / 2) {
-						dragDom.style.top = '-${h/2}px';
-					} else if (ptop > h - dragDom.clientHeight) {
-						dragDom.style.top = '${h - dragDom.clientHeight}px';
-					} else {
-						dragDom.style.top = `${ptop}px`;
-					}
-					// 将此时的位置传出去
-					// binding.value({x:e.pageX,y:e.pageY})
-				};
-				document.onmouseup = function(e) {
-					document.onmousemove = null;
-					document.onmouseup = null;
-					document.ontouchmove = null;
-					document.ontouchend = null;
-				};
-
-				document.ontouchmove = function(e) {
-					// 通过事件委托，计算移动的距离
-					let clientX = e.clientX
-					let clientY = e.clientY
-					if (e.touches) {
-						clientX = e.touches[0].clientX
-						clientY = e.touches[0].clientY
-					}
-					const l = clientX - disX;
-					const t = clientY - disY;
-					const pleft = l + styL
-					const ptop = t + styT
-					const w = bodyW - dragDom.clientWidth
-					const h = bodyH - dragDom.clientHeight
-					// 移动当前元素
-					// dragDom.style.left = `${l + styL}px`;
-					// dragDom.style.top = `${t + styT}px`;
-					// 移动当前元素
-					if (pleft < -w / 2) {
-						dragDom.style.left = '-${w/2}px';
-					} else if (pleft > w - dragDom.clientWidth / 2) {
-						dragDom.style.left = '${w - dragDom.clientWidth / 2}px';
-					} else {
-						dragDom.style.left = `${pleft}px`;
-					}
-					if (ptop < -h / 2) {
-						dragDom.style.top = '-${h/2}px';
-					} else if (ptop > h - dragDom.clientHeight) {
-						dragDom.style.top = '${h - dragDom.clientHeight}px';
-					} else {
-						dragDom.style.top = `${ptop}px`;
-					}
-					// 将此时的位置传出去
-					// binding.value({x:e.pageX,y:e.pageY})
-				};
-				document.ontouchend = function(e) {
-					document.onmousemove = null;
-					document.onmouseup = null;
-					document.ontouchmove = null;
-					document.ontouchend = null;
-				};
-			}
-			if (this.draggable) {
-				dialogHeaderEl.addEventListener('mousedown', function(e) { dialogHeaderFn(e) }, true)
-				dialogHeaderEl.addEventListener('touchstart', function(e) { dialogHeaderFn(e) }, true)
-			} else {
-				dialogHeaderEl.style.cursor = ''
-				dialogHeaderEl.removeEventListener('mousedown', function(e) { dialogHeaderFn(e) }, true)
-				dialogHeaderEl.removeEventListener('touchstart', function(e) { dialogHeaderFn(e) }, true)
-			}
-		},
-		blur() {
-			if (this.closeOnBlur && this.closable) {
-				this.hide()
-			}
-		},
-		hide() {
-			this.$emit('beforeClose')
-			this.closed = true;
-			setTimeout(() => {
-				this.$emit('update:visible', false);
-				this.$emit('closed');
-			}, this.slide ? 300 : 100);
-		},
-		closeHandele() {
-			this.$emit('close-button-click')
-			this.hide()
-		}
-	}
-};
-</script>
+<template>
+	<div v-if="lazy ? visible : true" v-show="visible" class="to-dialog" :class="setClass" @click.stop="blur">
+		<div ref="dialogWrapper" class="wrapper" :style="setWrapperStyle" @click.stop>
+			<to-header v-if="slide" :title-position="titlePosition" :title="title" level="0" @back="closeHandele">
+				<template v-slot:title>
+					<slot name="title"></slot>
+				</template>
+			</to-header>
+			<div v-else-if="showHeader" ref="dialogHeader" class="header">
+				<template>
+					<div class="text" :style="setTextStyle">
+						<slot name="title">
+							{{ title }}
+						</slot>
+					</div>
+					<div v-if="$slots.fn" class="fn">
+						<slot name="fn"></slot>
+					</div>
+					<div class="fn">
+						<div v-if="closable" class="close" @click="closeHandele"></div>
+					</div>
+				</template>
+			</div>
+			<div class="content" :class="`content-color-${contentColor}`">
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ToDialog',
+	props: {
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		visible: Boolean,
+		lazy: {
+			type: Boolean,
+			default() {
+				if (this.$TouchUI && this.$TouchUI.dialog && this.$TouchUI.dialog.lazy === true) {
+					return true
+				} else {
+					return false
+				}
+			}
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		titlePosition: { // left center right
+			type: String,
+			default: 'left'
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		closeOnBlur: {
+			type: Boolean,
+			default: true
+		},
+		contentColor: {
+			type: String,
+			default: ''
+		},
+		global: {
+			type: Boolean,
+			default: true
+		},
+
+		// 是否改为侧滑模式
+		slide: Boolean
+	},
+	data() {
+		return {
+			closed: true
+		}
+	},
+	computed: {
+		setClass() {
+			let arr = []
+			if (this.slide) {
+				arr.push('is-slide')
+			}
+			if (!this.closed) {
+				arr.push('is-show')
+			}
+			return arr
+		},
+		setWrapperStyle() {
+			let obj = {}
+			if (this.width) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em';
+				} else if (this.width === 'full') {
+					obj.width = '100%';
+				} else {
+					obj.width = this.width;
+				}
+			}
+			return obj
+		},
+		setTextStyle() {
+			let position = 'left'
+			if (this.titlePosition && typeof this.titlePosition === 'string') {
+				position = this.titlePosition
+			}
+			return { 'text-align': position }
+		}
+	},
+	watch: {
+		visible(val) {
+			if (val) {
+				this.$nextTick(() => {
+					this.$emit('beforeOpen');
+					this.$el.style.zIndex = window.$TouchUI.zIndex
+					window.$TouchUI.zIndex++
+					this.$nextTick(()=>{
+						this.closed = false
+						this.$emit('opened')
+						if (this.showHeader) {
+							this.initDrag()
+						}
+					})
+				});
+			} else {
+				if (!this.closed) {
+					this.hide()
+				}
+			}
+		}
+	},
+	mounted() {
+		this.init()
+	},
+	activated() {
+		this.init()
+	},
+	deactivated() {
+		this.destroy()
+	},
+	beforeDestroy() {
+		this.destroy()
+	},
+	methods: {
+		init() {
+			if (this.$el && this.global) {
+				document.body.appendChild(this.$el);
+			}
+		},
+		destroy() {
+			if (this.$el && this.$el.parentNode) {
+				this.$el.parentNode.removeChild(this.$el);
+			}
+		},
+		initDrag() {
+			const dialogHeaderEl = this.$refs.dialogHeader;
+			const dragDom = this.$refs.dialogWrapper;
+			const bodyW = document.body.clientWidth
+			const bodyH = document.body.clientHeight
+			if (dragDom) {
+				dragDom.style.left = '';
+				dragDom.style.top = '';
+			}
+			if (dialogHeaderEl) {
+				dialogHeaderEl.style.cursor = 'move';
+			} else {
+				return
+			}
+			// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+			const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+			let dialogHeaderFn = function(e) {
+				// 鼠标按下，计算当前元素距离可视区的距离
+				let clientX = e.clientX
+				let clientY = e.clientY
+				if (e.touches) {
+					clientX = e.touches[0].clientX
+					clientY = e.touches[0].clientY
+				}
+				const disX = clientX - dialogHeaderEl.offsetLeft;
+				const disY = clientY - dialogHeaderEl.offsetTop;
+
+				// 获取到的值带px 正则匹配替换
+				let styL, styT;
+				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+				if (sty.left.includes('%')) {
+					styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
+					styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
+				} else if (sty.left.includes('auto')) {
+					styL = 0;
+					styT = 0;
+				} else {
+					styL = +sty.left.replace(/px/g, '');
+					styT = +sty.top.replace(/px/g, '');
+				}
+				document.onmousemove = function(e) {
+					// 通过事件委托，计算移动的距离
+					let clientX = e.clientX
+					let clientY = e.clientY
+					const l = clientX - disX;
+					const t = clientY - disY;
+					const pleft = l + styL
+					const ptop = t + styT
+					const w = bodyW - dragDom.clientWidth
+					const h = bodyH - dragDom.clientHeight
+
+					// 移动当前元素
+					if (pleft < -w / 2) {
+						dragDom.style.left = '-${w/2}px';
+					} else if (pleft > w - dragDom.clientWidth / 2) {
+						dragDom.style.left = '${w - dragDom.clientWidth / 2}px';
+					} else {
+						dragDom.style.left = `${pleft}px`;
+					}
+					if (ptop < -h / 2) {
+						dragDom.style.top = '-${h/2}px';
+					} else if (ptop > h - dragDom.clientHeight) {
+						dragDom.style.top = '${h - dragDom.clientHeight}px';
+					} else {
+						dragDom.style.top = `${ptop}px`;
+					}
+					// 将此时的位置传出去
+					// binding.value({x:e.pageX,y:e.pageY})
+				};
+				document.onmouseup = function(e) {
+					document.onmousemove = null;
+					document.onmouseup = null;
+					document.ontouchmove = null;
+					document.ontouchend = null;
+				};
+
+				document.ontouchmove = function(e) {
+					// 通过事件委托，计算移动的距离
+					let clientX = e.clientX
+					let clientY = e.clientY
+					if (e.touches) {
+						clientX = e.touches[0].clientX
+						clientY = e.touches[0].clientY
+					}
+					const l = clientX - disX;
+					const t = clientY - disY;
+					const pleft = l + styL
+					const ptop = t + styT
+					const w = bodyW - dragDom.clientWidth
+					const h = bodyH - dragDom.clientHeight
+					// 移动当前元素
+					// dragDom.style.left = `${l + styL}px`;
+					// dragDom.style.top = `${t + styT}px`;
+					// 移动当前元素
+					if (pleft < -w / 2) {
+						dragDom.style.left = '-${w/2}px';
+					} else if (pleft > w - dragDom.clientWidth / 2) {
+						dragDom.style.left = '${w - dragDom.clientWidth / 2}px';
+					} else {
+						dragDom.style.left = `${pleft}px`;
+					}
+					if (ptop < -h / 2) {
+						dragDom.style.top = '-${h/2}px';
+					} else if (ptop > h - dragDom.clientHeight) {
+						dragDom.style.top = '${h - dragDom.clientHeight}px';
+					} else {
+						dragDom.style.top = `${ptop}px`;
+					}
+					// 将此时的位置传出去
+					// binding.value({x:e.pageX,y:e.pageY})
+				};
+				document.ontouchend = function(e) {
+					document.onmousemove = null;
+					document.onmouseup = null;
+					document.ontouchmove = null;
+					document.ontouchend = null;
+				};
+			}
+			if (this.draggable) {
+				dialogHeaderEl.addEventListener('mousedown', function(e) { dialogHeaderFn(e) }, true)
+				dialogHeaderEl.addEventListener('touchstart', function(e) { dialogHeaderFn(e) }, true)
+			} else {
+				dialogHeaderEl.style.cursor = ''
+				dialogHeaderEl.removeEventListener('mousedown', function(e) { dialogHeaderFn(e) }, true)
+				dialogHeaderEl.removeEventListener('touchstart', function(e) { dialogHeaderFn(e) }, true)
+			}
+		},
+		blur() {
+			if (this.closeOnBlur && this.closable) {
+				this.hide()
+			}
+		},
+		hide() {
+			this.$emit('beforeClose')
+			this.closed = true;
+			setTimeout(() => {
+				this.$emit('update:visible', false);
+				this.$emit('closed');
+			}, this.slide ? 300 : 100);
+		},
+		closeHandele() {
+			this.$emit('close-button-click')
+			this.hide()
+		}
+	}
+};
+</script>

package/packages/dis/index.js

@@ -1,8 +1,8 @@
-import dis from './src/directive';
-
-export default {
-	install(Vue) {
-		Vue.use(dis);
-	},
-	dis
-}
+import dis from './src/directive';
+
+export default {
+	install(Vue) {
+		Vue.use(dis);
+	},
+	dis
+}