102 lines
1.9 KiB
Vue
102 lines
1.9 KiB
Vue
<template>
|
|
<view style="width:100%;position: relative;display:flex;">
|
|
<slider :name="name" :value="txtvalue" :style="ciystyle" :disabled="disabled" :min="min" :max="max" :step="step" :show-value="false" @changing="textchanging" @change="textchange" style="width: 100%;margin: 0 1em;" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
ciystyle: {
|
|
type: [String, Object]
|
|
},
|
|
min: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
max: {
|
|
type: [String, Number],
|
|
default: 100
|
|
},
|
|
step: {
|
|
type: [String, Number],
|
|
default: 1
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {
|
|
},
|
|
computed: {
|
|
txtvalue() {
|
|
if (typeof(this.modelValue) == 'number')
|
|
return this.modelValue;
|
|
if (typeof(this.value) == 'number')
|
|
return this.value;
|
|
if (this.modelValue)
|
|
return this.modelValue;
|
|
if (this.value)
|
|
return this.value;
|
|
return this.min;
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.txtvalue
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
textchanging(e) {
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
this.$emit('update:modelValue', txt);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'changing',
|
|
value: txt
|
|
});
|
|
},
|
|
textchange(e) {
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
this.$emit('update:modelValue', txt);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'changed',
|
|
value: txt
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style> |