Showing
1 changed file
with
19 additions
and
5 deletions
@@ -15,8 +15,10 @@ | @@ -15,8 +15,10 @@ | ||
15 | 15 | ||
16 | const sliderValue = ref<number>(33); | 16 | const sliderValue = ref<number>(33); |
17 | const oldSliderValue = ref<number>(33); | 17 | const oldSliderValue = ref<number>(33); |
18 | + const noSendValue = ref<number>(0); | ||
18 | const sMin = ref<number>(0); | 19 | const sMin = ref<number>(0); |
19 | const sMax = ref<number>(100); | 20 | const sMax = ref<number>(100); |
21 | + const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null); | ||
20 | 22 | ||
21 | const { loading, sendCommand } = useSendCommand(); | 23 | const { loading, sendCommand } = useSendCommand(); |
22 | 24 | ||
@@ -43,11 +45,20 @@ | @@ -43,11 +45,20 @@ | ||
43 | sliderValue.value = e; | 45 | sliderValue.value = e; |
44 | }; | 46 | }; |
45 | 47 | ||
46 | - const handleAfterChange = async (e) => { | ||
47 | - const flag = await sendCommand(props.config.option, unref(sliderValue)); | ||
48 | - flag | ||
49 | - ? ((sliderValue.value = e), (oldSliderValue.value = sliderValue.value), (index.value = 0)) | ||
50 | - : (sliderValue.value = unref(oldSliderValue)); | 48 | + const handleAfterChange = async () => { |
49 | + unref(sliderEl)?.blur(); | ||
50 | + }; | ||
51 | + | ||
52 | + const handleBlur = async () => { | ||
53 | + if (unref(oldSliderValue) !== unref(sliderValue)) { | ||
54 | + console.log('effect'); | ||
55 | + const flag = await sendCommand(props.config.option, unref(sliderValue)); | ||
56 | + flag | ||
57 | + ? ((sliderValue.value = unref(sliderValue)), | ||
58 | + (oldSliderValue.value = sliderValue.value), | ||
59 | + (index.value = 0)) | ||
60 | + : (sliderValue.value = unref(oldSliderValue)); | ||
61 | + } | ||
51 | }; | 62 | }; |
52 | 63 | ||
53 | const { getNumberValue } = useReceiveValue(); | 64 | const { getNumberValue } = useReceiveValue(); |
@@ -55,6 +66,7 @@ | @@ -55,6 +66,7 @@ | ||
55 | const { data = {} } = message; | 66 | const { data = {} } = message; |
56 | const [latest] = data[attribute] || []; | 67 | const [latest] = data[attribute] || []; |
57 | const [_, value] = latest; | 68 | const [_, value] = latest; |
69 | + noSendValue.value = getNumberValue(value); | ||
58 | sliderValue.value = getNumberValue(value); | 70 | sliderValue.value = getNumberValue(value); |
59 | }; | 71 | }; |
60 | 72 | ||
@@ -74,6 +86,7 @@ | @@ -74,6 +86,7 @@ | ||
74 | >{{ sliderValue }}</span | 86 | >{{ sliderValue }}</span |
75 | > | 87 | > |
76 | <Slider | 88 | <Slider |
89 | + ref="sliderEl" | ||
77 | :style="{ '--slider-color': getDesign.controlBarColor }" | 90 | :style="{ '--slider-color': getDesign.controlBarColor }" |
78 | class="no-drag" | 91 | class="no-drag" |
79 | :value="sliderValue" | 92 | :value="sliderValue" |
@@ -81,6 +94,7 @@ | @@ -81,6 +94,7 @@ | ||
81 | :max="sMax" | 94 | :max="sMax" |
82 | @change="handleChange" | 95 | @change="handleChange" |
83 | @afterChange="handleAfterChange" | 96 | @afterChange="handleAfterChange" |
97 | + @blur="handleBlur" | ||
84 | /> | 98 | /> |
85 | 99 | ||
86 | <span | 100 | <span |