140 lines
2.5 KiB
Vue
140 lines
2.5 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 v-if="logShow" class="iconfont icon-unordered-list" @click="clickLog"></view>
|
||
<view class="attr-item-value">
|
||
{{sliderValue}}
|
||
<text style="margin-left: 6rpx;font-size: 24rpx;">{{unit}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="attr-item-right">
|
||
<view class="attr-value item-slider">
|
||
<u-slider
|
||
v-model="sliderValue"
|
||
:disabled="disabled"
|
||
:min="min"
|
||
:max="max"
|
||
: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-redo'
|
||
},
|
||
name: {
|
||
type: [String],
|
||
default: ''
|
||
},
|
||
logShow:{
|
||
type: [Boolean],
|
||
default: true
|
||
},
|
||
disabled:{
|
||
type: [Boolean],
|
||
default: true
|
||
},
|
||
unit:{
|
||
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);
|
||
},
|
||
clickLog(){
|
||
this.$emit('clickLog');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../common.css';
|
||
.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>
|