120 lines
2.1 KiB
Vue
120 lines
2.1 KiB
Vue
<template>
|
||
<view class="iots-component-box box-two">
|
||
<view class="attr-item-left">
|
||
<view class="iconfont" :class="icon"></view>
|
||
<view class="attr-name">{{name}}</view>
|
||
<view class="attr-item-value">
|
||
{{sliderValue}}
|
||
</view>
|
||
</view>
|
||
<view class="attr-item-right">
|
||
<view class="attr-value item-slider">
|
||
<u-slider
|
||
v-model="sliderValue"
|
||
:min="min?min:0"
|
||
:max="max?max:100"
|
||
:step="step"
|
||
:block-width="BlockWidth"
|
||
:height="height"
|
||
:block-style="blockStyle"
|
||
@end="changeSlider"
|
||
></u-slider>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
name: 'iots-slider',
|
||
props:{
|
||
// 选择值
|
||
value: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 最小值
|
||
min:{
|
||
type:Number,
|
||
default:0
|
||
},
|
||
// 最大值
|
||
max:{
|
||
type:Number,
|
||
default:100
|
||
},
|
||
// 步长
|
||
step: {
|
||
type:Number,
|
||
default:1
|
||
},
|
||
// 滑动按钮的宽度(高等于宽)，单位rpx
|
||
BlockWidth: {
|
||
type:Number,
|
||
default:40
|
||
},
|
||
// 滑动选择条的高度，单位rpx
|
||
height: {
|
||
type:Number,
|
||
default:12
|
||
},
|
||
// 图标处理后
|
||
icon: {
|
||
type: [String],
|
||
default: 'icon-gongnengdingyi'
|
||
},
|
||
name: {
|
||
type: [String],
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
sliderValue: this.value,
|
||
blockStyle:{
|
||
border:"1px solid #e6e6e6"
|
||
}
|
||
};
|
||
},
|
||
watch: {
|
||
value(newValue) {
|
||
this.sliderValue = newValue;
|
||
}
|
||
},
|
||
methods:{
|
||
// 点击步进器
|
||
changeSlider() {
|
||
console.log("滑动结束")
|
||
this.$emit('input', this.sliderValue);
|
||
this.$emit('change', this.sliderValue);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.iots-component-box.box-two{
|
||
padding: 20rpx 20rpx;
|
||
background: #fff;
|
||
margin-top: 20rpx;
|
||
border-radius: 10rpx;
|
||
.attr-item-left{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
.iconfont{
|
||
margin-right: 20rpx;
|
||
font-size: 40rpx;
|
||
}
|
||
.attr-item-value{
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
.attr-item-right{
|
||
.attr-value{
|
||
padding: 30rpx 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |