481 lines
13 KiB
Vue
481 lines
13 KiB
Vue
<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>
|