1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| <template>
| <el-slider
| :marks="marks"
| :format-tooltip="convertValue"
| size="large"
| v-model="zoom_factor"
| vertical
| ref="sliderRef"
| :min="0"
| :max="1000"
| @input="inputChange"
| @change="sliderChange"
| />
| </template>
| <script setup>
| import _ from 'lodash'
|
| const modelValue = defineModel()
| const props = defineProps(['zoomModel'])
| const emit = defineEmits(['change', 'input'])
| const zoomModel = computed(() => props.zoomModel.toString())
| const sliderRef = ref(null)
|
| const marksObj = {
| '56': { 0: '1X', 250: '2X', 500: '7X', 750: '14X', 1000: '56X' },
| '200': { 0: '1X', 250: '2X', 500: '10X', 750: '20X', 1000: '200X' },
| '112': { 0: '1X', 250: '2X', 500: '14X', 750: '56X', 1000: '112X' },
| '28': { 0: '2X', 250: '4X', 500: '7X', 750: '14X', 1000: '28' },
| }
| const rulesObj = {
| // 56倍变焦规则
| '56': [
| [0, 250, 1, 2],
| [250, 500, 2, 7],
| [500, 750, 7, 14],
| [750, 1000, 14, 56],
| ],
| // 200倍变焦规则
| '200': [
| [0, 250, 1, 2],
| [250, 500, 2, 10],
| [500, 750, 10, 20],
| [750, 1000, 20, 200],
| ],
| // 112倍变焦规则
| '112': [
| [0, 250, 1, 2],
| [250, 500, 2, 14],
| [500, 750, 14, 56],
| [750, 1000, 56, 112],
| ],
| // 28倍红外变焦规则
| '28': [
| [0, 250, 2, 4],
| [250, 500, 4, 7],
| [500, 750, 7, 14],
| [750, 1000, 14, 28],
| ],
| }
|
| const rules = computed(() => rulesObj?.[zoomModel.value] || [])
| const marks = computed(() => marksObj?.[zoomModel.value]|| {})
|
| // val1 -> val2
| function val1ToVal2(value, rules) {
| for (const [min1, max1, min2, max2] of rules) {
| if (value >= min1 && value <= max1) {
| const ratio = (value - min1) / (max1 - min1)
| return _.round(min2 + ratio * (max2 - min2), 1)
| }
| }
| return 0
| }
|
| // val2 -> val1
| function val2ToVal1(value, rules) {
| for (const [min2, max2, min1, max1] of rules.map(([a, b, c, d]) => [c, d, a, b])) {
| if (value >= min2 && value <= max2) {
| const ratio = (value - min2) / (max2 - min2)
| return _.round(min1 + ratio * (max1 - min1), 1)
| }
| }
| return 0
| }
|
| const zoom_factor = computed({
| get: () => val2ToVal1(modelValue.value, rules.value),
| set: val => (modelValue.value = val1ToVal2(val, rules.value)),
| })
|
| // 提示值
| function convertValue(val) {
| return val1ToVal2(val, rules.value) // 保留一位小数
| }
|
| function inputChange(val) {
| if (zoomModel.value !== '28') {
| if (val < 125) {
| zoom_factor.value = 0
| } else if (val >= 125 && val < 250) {
| zoom_factor.value = 250
| }
| }
| if (zoomModel.value === '28'){
| rulesObj['28'].forEach(item => {
| if (val >= item[0] && val <= item[1]){
| const takeValue = _.round((val-item[0]) / 250)
| zoom_factor.value = item[takeValue]
| }
| })
| }
| const valProvides = val1ToVal2(val, rules.value)
| emit('input', valProvides)
| }
|
| function sliderChange(val) {
| sliderRef.value?.$el?.querySelectorAll('*')?.forEach(el => el.blur())
| const valProvides = val1ToVal2(val, rules.value)
| emit('change', valProvides)
| }
| </script>
| <style scoped lang="scss">
| </style>
|
|
