KunWeb/fapp/ciyon_ap/components/ciy-slider/ciy-slider.vue
2025-05-16 01:00:48 +08:00

83 lines
1.4 KiB
Vue

<template>
<view style="width:100%;position: relative;display:flex;">
<slider :name="name" :value="valuetxt" :disabled="disabled" :min="min" :max="max" :step="step" :show-value="showValue" @change="textchange" style="width: 100%;margin: 0 1em;" />
</view>
</template>
<script>
export default {
behaviors: ['uni://form-field-group'],
props: {
name: {
type: String
},
value: {
type: [String, Number],
default: ''
},
initevent: {
type: Boolean,
default: false
},
min: {
type: [String, Number],
default: 0
},
max: {
type: [String, Number],
default: 100
},
step: {
type: [String, Number],
default: 1
},
showValue: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
},
data() {
return {
Gvalue: false,
valuetxt: 0,
};
},
watch: {
value(newD, oldD) {
if (this.Gvalue)
this.Gvalue = false;
else
this.valuetxt = newD;
}
},
mounted() {
this.valuetxt = c.getint(this.value);
if (this.initevent) {
this.$emit('change', {
name: this.name,
from: 'init',
value: this.valuetxt
});
}
},
methods: {
textchange(e) {
var txt = e.detail.value;
this.Gvalue = true;
this.$emit('input', txt);
this.$emit('change', {
name: this.name,
from: 'text-show',
value: txt
});
}
}
}
</script>
<style scoped>
</style>