大家好!我叫戴向天
QQ群:602504799
QQ:809002582
layout-div 组件详情 ==》https://blog.csdn.net/weixin_41088946/article/details/91448369
touch事件封装==》https://blog.csdn.net/weixin_41088946/article/details/90764437
<template>
<!--尺子刻度-->
<div class="posi-r dh-150 mar-a w-600 over-h" :style="{border:`3px solid ${color}`}">
<div class="posi-a w100 flex-x-center">
<dd class="down-2-3" :style="{borderTopColor:color}"></dd>
</div>
<ul class="flex mar-l-5" ref="rule">
<layout-div v-for="(i,k) in max" :pad="[0,14,0,0]" unit="px" :key="k" class="flex-g-0 posi-r flex-x-center">
<layout-div :w="1" :mar="[0,0,20]" unit="px" :class="i%10 == 0?'dh-90':i%5 == 0?'dh-60':'dh-40'"
:style="{ backgroundColor:color,}"></layout-div>
<span class="posi-a b0 fon-lg" :style="{color:color}" v-if="i%10 == 0">{{i}}</span>
</layout-div>
</ul>
</div>
</template>
<script>
export default {
props: {
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
value: {
type: Number,
default: 50
},
color: {
type: String,
default: '#FF8C4D'
}
},
data() {
return {
index: 50
}
},
methods: {
bind() {
if (this.$refs.rule) {
const dom = this.$refs.rule;
let data = {
X: 0,
distanceX: 0,
maxW: this.max * 15
}
const that = this;
this.$refs.rule.style.paddingLeft = this.$refs.rule.clientWidth / 2 - 1 + 'px';
dom.style.transform = `translateX(${-(this.value - 1) * 15}px)`
this.touch({
dom,
start({x}) {
data.X = parseFloat(dom.style.transform ? dom.style.transform.split("(")[1].split("px)")[0] : 0);
},
move({dx}) {
data.distanceX = dx + data.X
if (data.distanceX >= 0) {
data.distanceX = 0
}else if(Math.abs(data.distanceX) >= data.maxW){
data.distanceX = -data.maxW
}
that.$emit('input', ~~(data.distanceX / 15) - 1)
dom.style.transform = `translateX(${data.distanceX}px)`
},
end(data) {
}
})
} else {
window.requestAnimationFrame(this.bind)
}
}
},
created() {
window.requestAnimationFrame(this.bind)
}
}
</script>
class - style 具体内容如下
css 参考的 UI设计尺寸为 750*1334
.posi-r {
position: relative;
z-index: 1;
}
.dh-150 {
height: 150px;
}
.mar-a {
margin: 0 auto;
}
.w-600 {
width: 600px;
}
.over-h {
overflow: hidden;
}
.posi-a {
position: absolute;
z-index: 1;
}
.w100 {
width: 100%;
}
.flex-x-center {
display: flex;
justify-content: center;
}
.down-2-3 {
border: 0.2rem solid;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
/*公用flex布局样式*/
.flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.mar-l-5 {
margin-left: 5px;
}
.flex-g-0 {
min-width: 0;
flex-grow: 0;
flex-shrink: 0;
}
.dh-60 {
height: 60px;
}
.dh-40 {
height: 40px;
}
.dh-90 {
height: 90px;
}
.b0 {
bottom: 0;
}
.fon-lg {
font-size:30px;
}
.pad-tb {
padding-top: 20px;
padding-bottom: 20px;
}
.fon-wb {
font-weight: bold;
}
.fon-xl {
font-size: 32px;
}
.t-c {
text-align: center;
}
.mar-b {
margin-bottom: 30px;
}
.col-t {
color: var(--mainColor);
}
.fon-xxl {
font-size:36px;
}
使用方法
效果图