|
|
<template>
|
|
|
<view class="fulled tm-slider " :class="[step > 0 ? 'pb-36' : 'pb-24']"
|
|
|
:style="{ height: vertical ? heightpx + 'px' : 'auto', width: vertical ? '5px' : '100%'}">
|
|
|
<view class=" tm-slider-id fulled " :class="[vertical ? 'vertical' : 'flex-between']">
|
|
|
<!-- 左边label -->
|
|
|
<view v-if="showLeft" class="label_slider left flex-col text-size-xs text-grey-darken-1"
|
|
|
:class="[vertical ? '' : 'flex-center']">
|
|
|
<slot name="left" :data="{ value: value, color: color_tmeme, icon: leftIcon,max:max }">
|
|
|
<tm-icons v-if="leftIcon && !vertical" size="28" :name="leftIcon" :color="color_tmeme"></tm-icons>
|
|
|
<view class="text-size-xs text-grey-darken-1 ">{{ value }}</view>
|
|
|
</slot>
|
|
|
</view>
|
|
|
<!-- 条子内容 -->
|
|
|
<view class="slider_id "
|
|
|
:style="{ width: vertical ? 'auto' : sliderWidth + 'px', height: vertical ? sliderWidth + 'px' : '5px' }">
|
|
|
<view class="slider_id_bg round-10" :class="[bgColor,black_tmeme?'bk':'']"></view>
|
|
|
<view
|
|
|
:style="{ width: vertical ? '100%' : active_width + '%', height: vertical ? active_width + '%' : '100%' }"
|
|
|
class="slider_id_active round-10 " :class="[color_tmeme,black_tmeme?'bk':'']"></view>
|
|
|
<view :style="{ left: vertical ? 0 : barLeft + 'px', top: vertical ? barLeft + 'px' : 0 }"
|
|
|
@touchcancel="barEnd" @touchstart="barStart" @touchend="barEnd" @touchmove.stop.prevent="barMove"
|
|
|
@mouseleave="barEnd" @mousedown="barStart" @mouseup="barEnd" @mousemove.stop.prevent="barMove"
|
|
|
class="slider_bar border-white-a-2 rounded" :class="[color_tmeme,black_tmeme?'bk':'', ` shadow-${color_tmeme}-10`]">
|
|
|
<view v-if="showTopTips||showTip" class="slider_bar_showbg border-white-a-1" :class="[color_tmeme,black_tmeme?'bk':'']"></view>
|
|
|
<view v-if="showTopTips||showTip" class="slider_bar_num text-size-xs flex-center" :class="[color_tmeme,black_tmeme?'bk':'']">
|
|
|
<slot name="tips" :data="value">{{ value }}</slot>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 步长刻度尺 -->
|
|
|
<view class="kdc_wk ">
|
|
|
<view v-for="(item, index) in kdcNum" :key="index"
|
|
|
:style="{ left: vertical ? 0 : item.left, top: vertical ? item.left : 0 }" :class="[color_tmeme,black_tmeme?'bk':'']"
|
|
|
class="kdc_wk_item rounded border-white-a-1 ">
|
|
|
<view class="kdc_wk_item_label pl-0" :class="[vertical ? 'pl-24' : 'pa-24']">
|
|
|
<text class="text-size-xs text-grey-darken-1 ">{{ item.kedu }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 右边label -->
|
|
|
<view v-if="showRight" class="label_slider right flex-col text-size-xs text-grey-darken-1"
|
|
|
:class="[vertical ? 'flex-end' : 'flex-center']">
|
|
|
<slot name="right" :data="{ value: value, color: color_tmeme, icon: rightIcon,max:max }">
|
|
|
<tm-icons v-if="rightIcon && !vertical" size="28" :name="rightIcon" :color="color_tmeme"></tm-icons>
|
|
|
<view class="text-size-xs text-grey-darken-1 ">{{ max }}</view>
|
|
|
</slot>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
/**
|
|
|
* 滑块
|
|
|
* @property {Number} value = [0] 赋值，如果需要同步使用value.sync推荐使用v-model绑定。
|
|
|
* @property {Boolean} vertical = [true|false] 默认：false,是否启用竖向模式。
|
|
|
* @property {Number} height = [200] 默认：200,竖向模式时才有作用。
|
|
|
* @property {Number} width = [] 默认：0,横向时起作用，如果为0自动获取外层宽度。
|
|
|
* @property {Boolean} show-left = [true|false] 默认：false,显示左边数据。
|
|
|
* @property {Boolean} show-right = [true|false] 默认：false,显示右边数据。
|
|
|
* @property {Number} max = [] 默认：100,显示的最大刻度。
|
|
|
* @property {Number} value-diog = [] 默认：0,取值小数点后几位
|
|
|
* @property {Boolean} disabled = [true|false] 默认：false, 是否禁用。
|
|
|
* @property {Boolean} showTip = [true|false] 默认：false, 始终显示进度标签。
|
|
|
* @property {Number} step = [10|20] 默认：0, 步长,设置请尽量大于20.太小滑动容易过小出问题。
|
|
|
* @property {String} color = [primary] 默认：primary, 主题颜色名称。
|
|
|
* @property {String} bg-color = [grey-lighten-2] 默认：grey-lighten-2, 底部不活动的背景色,颜色名称。
|
|
|
* @property {String} left-icon = [] 默认：icon-minus, 左边图标
|
|
|
* @property {String} right-icon = [] 默认：icon-plus, 右边图标
|
|
|
* @property {String} name = [] 默认：''，提交表单时的的字段名称标识
|
|
|
* @property {Function} change 同v-model和value相等的参数，变动时触发。
|
|
|
* @example <tm-slider v-model="checked" ></tm-slider>
|
|
|
*
|
|
|
*/
|
|
|
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
|
|
export default {
|
|
|
name:'tm-slider',
|
|
|
components:{tmIcons},
|
|
|
model:{
|
|
|
prop:'value',
|
|
|
event:'input'
|
|
|
},
|
|
|
props: {
|
|
|
//提交表单时的的字段名称
|
|
|
name:{
|
|
|
type:String,
|
|
|
default:''
|
|
|
},
|
|
|
vertical: Boolean, //是否启用竖向模式。需要和height配合使用。
|
|
|
// 单位upx.
|
|
|
height: {
|
|
|
type: Number,
|
|
|
default: 200
|
|
|
},
|
|
|
width: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
showLeft: Boolean, //显示左边
|
|
|
showRight: Boolean, //显示右边
|
|
|
// 最大刻度。
|
|
|
max: {
|
|
|
type: Number,
|
|
|
default: 100
|
|
|
},
|
|
|
// 默认的数据。不能大于max.,使用.sync修饰。双向绑定数据。
|
|
|
value: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
// 取值小数点后几位。默认为0
|
|
|
valueDiog: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
// 是否禁用。
|
|
|
disabled: Boolean,
|
|
|
//步长。默认为0,设置请尽量大于0.太小滑动容易过小出问题。
|
|
|
step: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
// 主题颜色名称。
|
|
|
color: {
|
|
|
type: String,
|
|
|
default: 'primary'
|
|
|
},
|
|
|
// 底部不活动的背景色,颜色名称。。
|
|
|
bgColor: {
|
|
|
type: String,
|
|
|
default: 'grey-lighten-2'
|
|
|
},
|
|
|
// 左边图标名称。
|
|
|
leftIcon: {
|
|
|
type: String | Boolean,
|
|
|
default: 'icon-minus'
|
|
|
},
|
|
|
// 右边图标名称。
|
|
|
rightIcon: {
|
|
|
type: String | Boolean,
|
|
|
default: 'icon-plus'
|
|
|
},
|
|
|
// 始终显示进度提示窗
|
|
|
showTip: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
// 跟随主题色的改变而改变。
|
|
|
fllowTheme:{
|
|
|
type:Boolean|String,
|
|
|
default:true
|
|
|
},
|
|
|
black: {
|
|
|
type: Boolean,
|
|
|
default: null
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
value: function(val) {
|
|
|
let rdl = this.sliderWidth * (Math.abs(val) / Math.abs(this.max));
|
|
|
this.barLeft = rdl >= this.sliderWidth || rdl < 0 ? this.sliderWidth : rdl;
|
|
|
|
|
|
},
|
|
|
barLeft: function() {
|
|
|
let value = (this.barLeft / this.sliderWidth) * this.max;
|
|
|
|
|
|
if (!isNaN(value)) {
|
|
|
if (this.valueDiog > 0) {
|
|
|
let s = value.toString();
|
|
|
|
|
|
let st = s.split('.');
|
|
|
|
|
|
let ruslt = 0;
|
|
|
if (st.length > 1) {
|
|
|
ruslt = parseFloat(st[0] + '.' + st[1].substring(0, this.valueDiog));
|
|
|
} else {
|
|
|
ruslt = parseFloat(s);
|
|
|
}
|
|
|
this.$emit('update:value', ruslt);
|
|
|
this.$emit('input', ruslt);
|
|
|
this.$emit('change', ruslt);
|
|
|
} else {
|
|
|
this.$emit('update:value', parseInt(value));
|
|
|
this.$emit('input', parseInt(value));
|
|
|
this.$emit('change', parseInt(value));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
black_tmeme: function() {
|
|
|
if (this.black !== null) return this.black;
|
|
|
return this.$tm.vx.state().tmVuetify.black;
|
|
|
},
|
|
|
// 计算刻度尺的数量
|
|
|
kdcNum: function() {
|
|
|
if (Math.abs(this.step) <= 0) return [];
|
|
|
let jlv = Math.abs(this.step) / Math.abs(this.max);
|
|
|
let left_width = jlv * (this.sliderWidth - 0);
|
|
|
let kd_num = parseInt(this.sliderWidth / left_width);
|
|
|
let ar = [];
|
|
|
for (let i = 0; i <= kd_num; i++) {
|
|
|
ar.push({
|
|
|
index: i, //顺序
|
|
|
left: i * left_width + 'px', //距离左边距离
|
|
|
kedu: this.step * i //当前刻度数量。
|
|
|
});
|
|
|
}
|
|
|
return ar;
|
|
|
},
|
|
|
//比例
|
|
|
active_width: function() {
|
|
|
return (this.barLeft / this.sliderWidth) * 100;
|
|
|
},
|
|
|
heightpx: function() {
|
|
|
return uni.upx2px(this.height);
|
|
|
},
|
|
|
color_tmeme:function(){
|
|
|
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
|
|
return this.$tm.vx.state().tmVuetify.color;
|
|
|
}
|
|
|
return this.color;
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
sliderWidth: 0,
|
|
|
x: 0,
|
|
|
startMove: false,
|
|
|
barLeft: 0,
|
|
|
isError: false,
|
|
|
showTopTips: false
|
|
|
};
|
|
|
},
|
|
|
async mounted() {
|
|
|
this.$nextTick(async function() {
|
|
|
await this.getwidth();
|
|
|
if (Math.abs(this.value) > Math.abs(this.max)) {
|
|
|
this.isError = true;
|
|
|
return;
|
|
|
}
|
|
|
let rdl = this.sliderWidth * (Math.abs(this.value) / Math.abs(this.max));
|
|
|
this.barLeft = rdl >= this.sliderWidth || rdl < 0 ? this.sliderWidth : rdl;
|
|
|
});
|
|
|
},
|
|
|
async updated() {
|
|
|
this.$nextTick(async function() {
|
|
|
await this.getwidth();
|
|
|
if (Math.abs(this.value) > Math.abs(this.max)) {
|
|
|
this.isError = true;
|
|
|
return;
|
|
|
}
|
|
|
let rdl = this.sliderWidth * (Math.abs(this.value) / Math.abs(this.max));
|
|
|
this.barLeft = rdl >= this.sliderWidth || rdl < 0 ? this.sliderWidth : rdl;
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
barStart(e) {
|
|
|
|
|
|
if (this.disabled || this.isError) return;
|
|
|
if(e.type.indexOf('mouse')>-1&&e.changedTouches.length==0){
|
|
|
this.x = (this.vertical ? e.pageY : e.pageX) - this.barLeft;
|
|
|
this.startMove = true;
|
|
|
this.showTopTips = true;
|
|
|
}else{
|
|
|
if (e.changedTouches.length > 0) {
|
|
|
this.x = (this.vertical ? e.changedTouches[0].pageY : e.changedTouches[0].pageX) - this.barLeft;
|
|
|
this.startMove = true;
|
|
|
this.showTopTips = true;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.$nextTick(function(){
|
|
|
this.$emit('start',this.value)
|
|
|
})
|
|
|
},
|
|
|
barEnd(e) {
|
|
|
|
|
|
if (this.disabled || this.isError) return;
|
|
|
this.startMove = false;
|
|
|
this.showTopTips = false;
|
|
|
this.$nextTick(function(){
|
|
|
this.$emit('end',this.value)
|
|
|
})
|
|
|
},
|
|
|
barMove(e) {
|
|
|
if (this.disabled || this.isError) return;
|
|
|
if (!this.startMove) return;
|
|
|
let left = 0;
|
|
|
if(e.type.indexOf('mouse')>-1&&e.changedTouches.length==0){
|
|
|
left = (this.vertical ? e.pageY : e.pageX) - this.x;
|
|
|
}else{
|
|
|
left = (this.vertical ? e.changedTouches[0].pageY : e.changedTouches[0].pageX) - this.x;
|
|
|
}
|
|
|
if (left <= 0) {
|
|
|
this.barLeft = 0;
|
|
|
return;
|
|
|
}
|
|
|
if (left >= this.sliderWidth) {
|
|
|
this.barLeft = this.sliderWidth;
|
|
|
return;
|
|
|
}
|
|
|
let nowStep = parseInt(Math.abs(left - this.barLeft));
|
|
|
let bdi = parseInt((this.step / this.max) * this.sliderWidth);
|
|
|
|
|
|
if (nowStep >= bdi) {
|
|
|
// 每一小段的值。
|
|
|
|
|
|
if(this.step!==0){
|
|
|
let kedud = this.sliderWidth / (this.max / this.step);
|
|
|
this.barLeft = Math.round(left / kedud) * kedud;
|
|
|
}else{
|
|
|
this.barLeft = left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
async getwidth() {
|
|
|
let res = await this.$Querey('.tm-slider-id', this,0).catch(e=>{});
|
|
|
res[0].width = res[0].width||uni.upx2px(this.width);
|
|
|
res[0].height = res[0].height||uni.upx2px(this.height);
|
|
|
if (this.showLeft === false && this.showRight === false) {
|
|
|
this.sliderWidth = this.vertical ? res[0].height : res[0].width;
|
|
|
return;
|
|
|
}
|
|
|
if (this.showLeft !== false && this.showRight !== false) {
|
|
|
|
|
|
this.sliderWidth = (this.vertical ? res[0].height : res[0].width) - uni.upx2px(this.vertical ? 50 :
|
|
|
100) * 2;
|
|
|
return;
|
|
|
}
|
|
|
if (this.showLeft === true || this.showRight === true) {
|
|
|
this.sliderWidth = (this.vertical ? res[0].height : res[0].width) - uni.upx2px(this.vertical ? 50 :
|
|
|
100);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.label_slider {
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
&.left,
|
|
|
&.right {
|
|
|
width: 100upx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tm-slider-id {
|
|
|
width: 100%;
|
|
|
|
|
|
.slider_id {
|
|
|
position: relative;
|
|
|
height: 4px;
|
|
|
|
|
|
.slider_id_bg {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.slider_id_active {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 5;
|
|
|
}
|
|
|
|
|
|
.slider_bar {
|
|
|
position: absolute;
|
|
|
width: 40upx;
|
|
|
height: 40upx;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
margin-top: -22upx;
|
|
|
z-index: 10;
|
|
|
|
|
|
.slider_bar_showbg {
|
|
|
position: absolute;
|
|
|
width: 50upx;
|
|
|
height: 50upx;
|
|
|
border-radius: 30upx;
|
|
|
border-bottom-left-radius: 5upx;
|
|
|
transform: rotate(-45deg);
|
|
|
bottom: 60upx;
|
|
|
left: -9upx;
|
|
|
animation: roteScaleTop_BG 0.3s ease-in-out;
|
|
|
}
|
|
|
|
|
|
.slider_bar_num {
|
|
|
position: absolute;
|
|
|
width: 50upx;
|
|
|
height: 50upx;
|
|
|
border-radius: 50upx;
|
|
|
left: -8upx;
|
|
|
bottom: 60upx;
|
|
|
line-height: 50upx;
|
|
|
text-align: center;
|
|
|
background: transparent !important;
|
|
|
animation: roteScaleTop 0.3s ease-in-out;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.kdc_wk {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
z-index: 6;
|
|
|
left: 0;
|
|
|
top: -2upx;
|
|
|
|
|
|
.kdc_wk_item {
|
|
|
width: 10upx;
|
|
|
height: 10upx;
|
|
|
position: absolute;
|
|
|
z-index: 7;
|
|
|
text-align: center;
|
|
|
|
|
|
.kdc_wk_item_label {
|
|
|
margin-left: -100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.vertical {
|
|
|
height: 100%;
|
|
|
|
|
|
.label_slider {
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
&.left,
|
|
|
&.right {
|
|
|
width: auto;
|
|
|
height: 50upx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.slider_bar {
|
|
|
margin-left: -18upx;
|
|
|
}
|
|
|
|
|
|
.kdc_wk {
|
|
|
top: 0upx;
|
|
|
|
|
|
.kdc_wk_item {
|
|
|
.kdc_wk_item_label {
|
|
|
margin-left: 100%;
|
|
|
margin-top: -15upx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes roteScaleTop_BG{
|
|
|
0%{
|
|
|
transform: scale(0.9) translateY(20rpx) rotate(-45deg);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
100%{
|
|
|
transform: scale(1) translateY(0rpx) rotate(-45deg);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
@keyframes roteScaleTop{
|
|
|
0%{
|
|
|
transform: scale(0.9) translateY(20rpx);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
100%{
|
|
|
transform: scale(1) translateY(0rpx);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
</style>
|