sh-view 1.7.6 → 2.0.0

package/packages/components/global-components/sh-corner/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<a class="sh-corner" :style="styles" :type="type" :size="size" :class="classes">
+	<a class="sh-corner" :style="styles" :class="classes">
 		<div class="sh-corner-content">
 			<div v-if="title || $slots.title">{{ title }}</div>
 			<span v-if="$slots.default"><slot></slot></span>
@@ -13,14 +13,6 @@ export default {
 	name: 'ShCorner',
 	components: {},
 	props: {
-		type: {
-			type: String,
-			default: ''
-		},
-		size: {
-			type: String,
-			default: 'default'
-		},
 		color: {
 			type: String,
 			default: '#e8e8e8'

package/packages/components/global-components/sh-count-to/index.vue

@@ -1,46 +1,102 @@
-<template>
-	<div class="sh-count-to">
-		<slot name="left"></slot>
-		<CountUp ref="count" :class="countClass" :start="start" :end="end" :decimals="decimals" :duration="duration" :options="options" :callback="callback" />
-		<slot name="right"></slot>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShCountTo',
-	props: {
-		start: {
-			type: Number,
-			default: 0
-		},
-		end: {
-			type: Number
-		},
-		decimals: {
-			type: Number
-		},
-		duration: {
-			type: Number,
-			default: 2
-		},
-		options: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		callback: {
-			type: Function
-		},
-		countClass: {
-			type: String
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss">
-.sh-count-to {
-}
-</style>
+<template>
+	<div class="sh-count-to">
+		<slot name="left"></slot>
+		<span ref="count" class="count-up" :class="countClass"></span>
+		<slot name="right"></slot>
+	</div>
+</template>
+
+<script>
+import CountUp from 'countup.js'
+export default {
+	name: 'ShCountTo',
+	props: {
+		start: {
+			type: Number,
+			default: 0
+		},
+		end: {
+			type: Number
+		},
+		decimals: {
+			type: Number,
+			default: 0
+		},
+		duration: {
+			type: Number,
+			default: 2
+		},
+		options: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		callback: {
+			type: Function,
+			default() {}
+		},
+		countClass: {
+			type: [String, Object]
+		}
+	},
+	data() {
+		return {
+			CountUp: null
+		}
+	},
+	watch: {
+		end(value) {
+			if (this.CountUp && this.CountUp.update) {
+				this.CountUp.update(value)
+			}
+		}
+	},
+	mounted() {
+		this.init()
+	},
+	methods: {
+		init() {
+			if (!this.CountUp) {
+				this.CountUp = new CountUp(this.$refs.count, this.start, this.end, this.decimals, this.duration, this.options)
+				this.CountUp.start(() => {
+					this.callback(this.CountUp)
+				})
+			}
+		},
+		destroy() {
+			this.CountUp = null
+		}
+	},
+	beforeUnmounted() {
+		this.destroy()
+	},
+	start(callback) {
+		if (this.CountUp && this.CountUp.start) {
+			this.CountUp.start(() => {
+				callback && callback(this.CountUp)
+			})
+		}
+	},
+	pauseResume() {
+		if (this.CountUp && this.CountUp.pauseResume) {
+			this.CountUp.pauseResume()
+		}
+	},
+	reset() {
+		if (this.CountUp && this.CountUp.reset) {
+			this.CountUp.reset()
+		}
+	},
+	update(newEndVal) {
+		if (this.CountUp && this.CountUp.update) {
+			this.CountUp.update(newEndVal)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-count-to {
+}
+</style>

package/packages/components/global-components/sh-date/index.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="sh-date">
+		<div class="sh-date-input" @click="inputClick">{{ dataValue }}</div>
+		<div class="sh-date-drop">
+			<vxe-input ref="inputA" v-model="value1" type="date"></vxe-input>
+			<vxe-input ref="inputB" v-model="value2" type="date"></vxe-input>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShDate',
+	emits: ['update:modelValue'],
+	data() {
+		return {
+			dataValue: '',
+			value1: '',
+			value2: ''
+		}
+	},
+	computed: {},
+	methods: {
+		inputClick() {
+			this.$refs.inputA.focus()
+			this.$refs.inputB.focus()
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-date {
+	&-input {
+		width: 300px;
+		height: 50px;
+		border: 1px solid #ccc;
+	}
+}
+</style>