zhangjiming
6 months ago
3 changed files with 112 additions and 34 deletions
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<van-overlay :show="show"> |
|||
<div class="temperature-setting flex justify-center items-center h-full"> |
|||
<div class="py-4 px-[18px] rounded-2xl bg-white flex flex-col items-center"> |
|||
<h1 class="text-lg font-medium text-text">{{ typeTitleMap[type] }}</h1> |
|||
<div class="my-4"> |
|||
<div class="flex items-center mt-3 mb-3"> |
|||
<span class="mr-4">制冷温度</span> |
|||
<span>-{{ coldValue }}°C</span> |
|||
</div> |
|||
<div class="flex items-center mb-4"> |
|||
<span>0</span> |
|||
<van-slider class="min-w-[600px] mx-4" v-model="coldValue" /> |
|||
<span>-100</span> |
|||
</div> |
|||
</div> |
|||
<div v-if="type === 'above'" class="my-4"> |
|||
<div class="flex items-center mt-3 mb-3"> |
|||
<span class="mr-4">加热温度</span> |
|||
<span>{{ warmValue }}°C</span> |
|||
</div> |
|||
<div class="flex items-center mb-4"> |
|||
<span>0</span> |
|||
<van-slider class="min-w-[600px] mx-4" v-model="warmValue" /> |
|||
<span>100</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="btn-fill min-w-40 rounded py-3 text-lg " @click="onConfirmClick">确定</div> |
|||
</div> |
|||
</div> |
|||
</van-overlay> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from "vue"; |
|||
|
|||
export type CabinetType = "above" | "below" | "sample"; |
|||
|
|||
const typeTitleMap: { [k in CabinetType]: string } = { |
|||
above: "上仓温度设定", |
|||
below: "下仓温度设定", |
|||
sample: "样品箱温度设定", |
|||
}; |
|||
|
|||
const props = defineProps<{ show: boolean; type: CabinetType }>(); |
|||
const emit = defineEmits<{ |
|||
(e: "update", type: CabinetType, refrigerate: number, warm?: number): void; |
|||
}>(); |
|||
|
|||
const coldValue = ref(50); |
|||
const warmValue = ref(50); |
|||
|
|||
function onConfirmClick() { |
|||
emit("update", props.type, coldValue.value, warmValue.value); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="css" scoped> |
|||
.temperature-setting { |
|||
--van-slider-bar-height: 8px; |
|||
--van-slider-button-width: 32px; |
|||
--van-slider-button-height: 32px; |
|||
} |
|||
</style> |
|||
@ -1,34 +1,30 @@ |
|||
<script setup lang="ts"> |
|||
import { BehaviorSubject,interval,map,startWith,scan } from 'rxjs' |
|||
import { onMounted, onUnmounted, watch } from 'vue' |
|||
import { useSubject,useObservable } from '@vueuse/rxjs' |
|||
import { BehaviorSubject, interval, map, startWith, scan } from "rxjs"; |
|||
import { onMounted, onUnmounted, watch } from "vue"; |
|||
import { useSubject, useObservable } from "@vueuse/rxjs"; |
|||
|
|||
const countSubject = new BehaviorSubject(0) |
|||
const count = useSubject(countSubject) |
|||
const countSubject = new BehaviorSubject(0); |
|||
const count = useSubject(countSubject); |
|||
|
|||
const count2 = useObservable( |
|||
interval(1000).pipe( |
|||
map(() => 1), |
|||
startWith(0), |
|||
scan((total, next) => next + total), |
|||
) |
|||
) |
|||
interval(1000).pipe( |
|||
map(() => 1), |
|||
startWith(0), |
|||
scan((total, next) => next + total) |
|||
) |
|||
); |
|||
|
|||
onMounted(() => { |
|||
watch(count, value => console.info('from watcher:', value)) |
|||
watch(count, value => console.info("from watcher:", value)); |
|||
|
|||
const subscription = countSubject.subscribe(value => console.info('from subscriber: ', value)) |
|||
onUnmounted(() => { |
|||
subscription.unsubscribe() |
|||
}) |
|||
}) |
|||
const subscription = countSubject.subscribe(value => console.info("from subscriber: ", value)); |
|||
onUnmounted(() => { |
|||
subscription.unsubscribe(); |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<button class="btn-fill px-4 py-2 rounded-lg" @click="count++"> |
|||
count is: {{ count }} |
|||
</button> |
|||
<button class="btn-fill px-4 py-2 rounded-lg"> |
|||
count is: {{ count2 }} |
|||
</button> |
|||
</template> |
|||
<button class="btn-fill px-4 py-2 rounded-lg" @click="count++">count is: {{ count }}</button> |
|||
<button class="btn-fill px-4 py-2 rounded-lg">count is: {{ count2 }}</button> |
|||
</template> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue