[update 日期多选] 处理多选日期不显示删除按钮

src/components/JMultipleDatePicker.vue

@@ -8,6 +8,7 @@
     @openChange="handleOpenChange"
     @change="handleChange"
     style="width: 100%"
+    :value="firstValue"
     v-bind="$attrs"
   >
     <template slot="dateRender" slot-scope="current">
@@ -50,7 +51,8 @@ export default {
   data () {
     return {
       open: false,
-      checkedValue: []
+      checkedValue: [],
+      firstValue: null // 多选中第一个日期，用于触发显示删除按钮
     }
   },
   methods: {
@@ -103,6 +105,7 @@ export default {
     handleChange (val) {
       console.log('-handleChange-----', val)
       if (!val) {
+        this.firstValue = null
         this.checkedValue = []
         this.$emit('change', this.checkedValue.join(','))
       }
@@ -113,6 +116,10 @@ export default {
         return true
       }
     },
+    // 日期面板中input绑定事件
+    focusInput (e) {
+      e.target.value = this.checkedValue.join(',')
+    },
     // 点击日期，加日期或者减日期
     clickCalendarDate (current) {
       const currentStr = current.format('YYYY-MM-DD')
@@ -128,8 +135,13 @@ export default {
         console.log('减日期')
         this.checkedValue = this.checkedValue.filter(item => item !== currentStr)
       }
+      this.firstValue = this.checkedValue[0]
       this.$nextTick(() => {
-        document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',')
+        setTimeout(() => {
+          const inputDom = document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0]
+          inputDom.value = this.checkedValue.join(',')
+          inputDom.addEventListener('focus', this.focusInput)
+        })
       })
       this.$emit('change', this.checkedValue.join(','))
     }