123 lines
2 KiB
Vue
123 lines
2 KiB
Vue
|
<template>
|
||
|
|
<div class="ifitouly _formItem" :class="{ focused, disabled }">
|
||
|
|
<div class="_formLabel"><slot name="label"></slot></div>
|
||
|
|
<div class="_formPanel main">
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
ref="input"
|
||
|
|
v-model="v"
|
||
|
|
:disabled="disabled"
|
||
|
|
:min="min"
|
||
|
|
:max="max"
|
||
|
|
:step="step"
|
||
|
|
@focus="focused = true"
|
||
|
|
@blur="focused = false"
|
||
|
|
@input="$emit('update:value', $event.target.value)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="_formCaption"><slot name="caption"></slot></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
min: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
max: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default: 100
|
||
|
|
},
|
||
|
|
step: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default: 1
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
v: this.value,
|
||
|
|
focused: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value(v) {
|
||
|
|
this.v = parseFloat(v);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.ifitouly {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
> .main {
|
||
|
|
padding: 24px 16px;
|
||
|
|
|
||
|
|
> input {
|
||
|
|
display: block;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
background: var(--X10);
|
||
|
|
height: 4px;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
outline: 0;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 7px;
|
||
|
|
|
||
|
|
&.disabled {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
display: block;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: none;
|
||
|
|
background: var(--accent);
|
||
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-moz-range-thumb {
|
||
|
|
-moz-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
display: block;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: none;
|
||
|
|
background: var(--accent);
|
||
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|