自定义时间选择、多选下拉组件

2024-07-11 20:40:29 +08:00
parent 8cb52b4cad
commit 784be21ad3
10 changed files with 265 additions and 110 deletions
@@ -0,0 +1,64 @@
+<!--
+ * @Descripttion: 日期选择组件
+ * @Author: 龙运模
+ * @Date: 2024年07月11日
+ * @LastEditors: 龙运模
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="scDatePicker">
+		<el-date-picker v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange" :size="size" :popper-options="{ placement: 'bottom-start' }" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable></el-date-picker>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "index",
+	props:{
+		activation_date: {
+			type: Object,
+			default: () => ({ operator: "between", value: [] })
+		},
+		size:{ type: String, default: "small" },
+		startPlaceholder:{type:String, default:""},
+		endPlaceholder:{type:String, default:""}
+	},
+	watch:{
+		activation_date:{
+			handler(val){
+				if(!val || val.value.length == 0){
+					this.localDatePicker = [];
+				}
+			},
+			deep:true
+		}
+	},
+	data(){
+		return{
+			localDatePicker:[],
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		dateChange(e){
+			this.localDatePicker = e;
+			this.emitActivationDate();
+		},
+		emitActivationDate() {
+			this.$emit('update:activation_date', {
+				operator: this.activation_date.operator,
+				value: this.localDatePicker && this.localDatePicker.length > 0? this.localDatePicker.map(date => this.$TOOL.getTime(date)):[]
+			});
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.scDatePicker{
+		width: 100%;
+	}
+</style>