Эх сурвалжийг харах

feat: 输入框取消与按钮组件绑定,可直接与联动组件绑定,联动事件为输入框输入值变化触发,添加500ms防抖事件

wu.jian2 1 жил өмнө
parent
commit
5225566d40

+ 20 - 1
data-room-ui/packages/BasicComponents/Input/index.vue

@@ -15,6 +15,7 @@
       class="input"
       :placeholder="config.customize.placeholderStyle.placeholder"
       :style="{ backgroundColor: config.customize.backgroundStyle.backgroundColor }"
+      @input="handleInput"
     >
       <i
         v-if="config.customize.icon.position === 'left' && config.customize.icon.name"
@@ -48,7 +49,9 @@ export default {
     }
   },
   data () {
-    return { }
+    return {
+      timer: null
+    }
   },
   watch: {
     'config.customize': {
@@ -61,6 +64,10 @@ export default {
   mounted () {
     this.chartInit()
   },
+  beforeDestroy () {
+    // 销毁时清除定时器
+    clearTimeout(this.timer)
+  },
   methods: {
     changeStyle (config, isUpdateTheme) {
       config = { ...this.config, ...config }
@@ -86,6 +93,18 @@ export default {
           this.changeActiveItemConfig(config)
         }
       }
+    },
+    handleInput (val) {
+      // 提供一个防抖的方法
+      this.debounce(() => {
+        this.linkage({ [this.config.code]: val })
+      })
+    },
+    debounce (fn, delay = 500) {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        fn()
+      }, delay)
     }
   }
 }

+ 6 - 5
data-room-ui/packages/BasicComponents/Input/settingConfig.js

@@ -1,12 +1,13 @@
 
-import { commonConfig } from 'data-room-ui/js/config'
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
 
 export const settingConfig = {
+  title: '输入框',
   displayOption: {
-    dataAllocation: {
-      // 是否存在数据配置
-      enable: false
-    }
+    ...displayOption,
+    dataAllocation: { enable: true },
+    dataSourceType: { enable: false },
+    params: { enable: false }
   }
 }
 const customConfig = {

+ 1 - 1
data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -674,7 +674,7 @@ export default {
         value: field.name || field.fieldName
       })) || []
 
-      if (this.config.type === 'timePicker') {
+      if (['input', 'timePicker', 'dateTimePicker'].includes(this.config.type)) {
         modifiedList.push({ label: '当前组件值', value: this.config.code })
       }
       return modifiedList