一、依赖使用
安装依赖
cnpm install cs-rulermain.js中引入
import CsRuler from 'cs-ruler'
Vue.use(CsRuler)代码 使用
<template>
<section>
<!--pointerColor 指针颜色； numSize 字体大小； maxNum 最大值 minNum 最小值； NowNum当前值（默认100）；
ispoint开启小数[默认一位小数]；ruleWidth:配置一页展示格数（默认40个）-->
<!--@post-NumValue来接收滚动的值 @scroll-start="startEvent"开始滚动后发送给父级消息事件 @scroll-end="endEvent"滚动结束后发送给父级消息事件-->
<cs-ruler
:pointer-color="pointerColor"
:num-size="30"
:NowNum="detail.tmda"
:ispoint="pointFlag"
:ruleWidth="40"
@post-NumValue="rulerNum"></cs-ruler>
</section>
</template>
import ruler from 'cs-ruler'
export default {
name: 'inputTmxx',
components: {
'cs-ruler': ruler.CsingRuler
},
data () {
return {
detail: {
tmmc: '您的身高是？',
unit: 'cm',
pointFlag: 'true',
tmda： 8
},
pointerColor: '#5081FF'
}
},
methods: {
//子组件传递刻度表
rulerNum (val) {
this.detail.tmda = val
}
}
}示例：
二、组件重写使用
组件使用方法（便于区分，更换了组件名字）
<div>
<ruler-drag
:pointer-color="pointerColor"
:num-size="30"
:NowNum="detail.tmda"
ispoint
:pointLen="100" // 可自定义小数位数：10一位；100两位；...
@post-NumValue="rulerNum"></ruler-drag>
</div>const RulerDrag = () => import('@/components/rulerDrag')
export default {
name: '',
components: {
RulerDrag
},
}
组件源码
<template>
<div>
<div class="cs-rule" ref="rulepage">
<!--刻度表-->
<div class="cs-scrollrule" ref="scrollrule">
<ul class="cs-scrollrule-hook" ref="rulehook">
<!--0刻度前的空白-->
<div class="cs-rule-null">
<li v-for="(item,index) in zeroList" class="cs-scroll-item" :key="index"></li>
</div>
<!--正常刻度表-->
<template v-for="(item,index) in counter">
<li class="cs-scroll-item" :key="index">
<template v-if="index % 10 == 0">
<div class="cs-scroll-item-rule vux-1px-l cs-scale-integer"></div>
<div v-if="ispoint" class="cs-scroll-item-num">{{ (index + minNum) / pointLen }}</div>
<div v-else class="cs-scroll-item-num">{{ (index + minNum ) * oneGridValue }}</div>
</template>
<template v-else-if="index % 5 == 0">
<div class="cs-scroll-item-rule vux-1px-l cs-scale-half"></div>
</template>
<template v-else>
<div class="cs-scroll-item-rule vux-1px-l cs-scale-one"></div>
</template>
</li>
</template>
<!-- 最大刻度后面的空白 -->
<div class="cs-rule-null-after">
<li v-for="(item,index) in aletrList" class="cs-scroll-item" :key="index"></li>
</div>
</ul>
</div>
<!--刻度表的针-->
<div class="cs-scroll-item-pointer"></div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'cs-ruler',
props: {
// 初始值
NowNum: {
type: Number,
default: 100
},
// 最大刻度
maxNum: {
type: Number,
default: 1000
},
// 最小刻度
minNum: {
type: Number,
default: 0
},
// 指针颜色
pointerColor: {
type: String,
default: 'rgb(97,206,81)'
},
// 刻度尺有多细
ruleWidth: {
type: Number,
default: 40
},
// 字体大小
numSize: {
type: Number,
default: 50
},
// 是否启用小数
ispoint: {
type: Boolean,
default: false
},
// 小数位数
pointLen: {
type: Number,
default: 1
},
// 每个格子多大
oneGridValue: {
type: Number,
default: 1
}
},
data() {
return {
// 由于v-for循环的时候,按照index计数的,所以最后一个值不会显示,需要+1,则刻度尺后面的空白就要+1
// counter: this.maxNum - this.minNum + 1, // 因为可能需要动态修改maxNum和minMun,所以放在计算属性中
//0刻度前面的空白,
zeroList: this.ruleWidth / 2,
// 刻度结束后的空白
aletrList: this.ruleWidth / 2 - 1,
}
},
methods: {
// 全局初始化
init(){this.NowNum = this.NowNum * this.pointLen // 需要加上，否则小数回显会有问题
this.$nextTick(() => {
this.initScroll();
this.calculateWidth();
// this.NowNum - this.minNum 当前值-最小值才是初始化需要滚动的值
this.scrollrule.scrollBy(-(this.oneWidth * (this.NowNum - this.minNum) ), 0, 0)
});
},
// 初始化滚动
initScroll() {
this.scrollrule = new BScroll(this.$refs.scrollrule, {
// 实时监听滚动的位置并返回
probeType: 3,
scrollX: true,
})
// 监听滚动开始
this.scrollrule.on('scrollStart', () => {
this.$emit('scroll-start', true)
})
// 监听滚动
this.scrollrule.on('scroll', (pos) => {
this.scrollX = Math.abs(Math.round(pos.x))
let NumValue = Math.abs(Math.round(this.scrollX / this.oneWidth)) + this.minNum
// 判断是否开启小数
if(this.ispoint){
this.$emit('post-NumValue', NumValue / this.pointLen * this.oneGridValue )
}else{
this.$emit('post-NumValue', NumValue * this.oneGridValue )
}
})
//滚动结束监听
this.scrollrule.on('scrollEnd', () => {
//滑动后的小距离
let littleNum = this.scrollX % this.oneWidth
//计算距离下一个刻度的差值
let vul = this.oneWidth - littleNum
// 加入差值比较大,再进行吸附,大于一半的距离,就往右边吸附差值的距离,小于一半的距离,就往左边吸附滑动的距离
if (vul > 0.5 && vul < (this.oneWidth - 0.5)) {
if (littleNum > (this.oneWidth / 2)) {
this.scrollrule.scrollBy(-vul, 0, 0)
} else {
this.scrollrule.scrollBy(littleNum, 0, 0)
}
}
// 滚动结束给父级发送一个事件
// 初始化时调整了一次值,所以也会有一个true
// 第一次true是因为滚动结束,第二个true是因为位置微调了一次,所以又滚动了
this.$emit('scroll-end', true)
})
},
// 获取宽度用于计算滚动区域
calculateWidth() {
// 获取右侧菜单每一个的li
let goodsList = this.$refs.rulehook
let listWidth = goodsList.clientWidth
let listNum = this.counter + this.zeroList + this.aletrList
// 每一格的距离大小
this.oneWidth = listWidth / listNum
},
// 获取指针颜色等信息
getMainValue(){
const docStyle = this.$refs.rulepage.style;
// 指针颜色
docStyle.setProperty('--pointer-color', this.pointerColor);
// 字体大小
docStyle.setProperty('--num-size', this.numSize);
// 刻度尺宽度
docStyle.setProperty('--rule-width', this.ruleWidth);
},
// 暴露给父级,如果后期需要修改某些参数,需要重新初始化一下组件
initRule(){
this.init()
this.getMainValue()
}
},
computed: {
counter(){
return this.maxNum - this.minNum + 1
}
},
created() {
this.init()
},
mounted() {
this.getMainValue()
},
components: {
},
watch: {
}
}
</script>
<style lang="less">
.setTopLine(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid @c;
color: @c;
transform-origin: 0 0;
transform: scaleY(0.5);
}
.setBottomLine(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid @c;
color: @c;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
.setLeftLine(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid @c;
color: @c;
transform-origin: 0 0;
transform: scaleX(0.5);
}
.setRightLine(@c: #C7C7C7) {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
bottom: 0;
border-right: 1px solid @c;
color: @c;
transform-origin: 100% 0;
transform: scaleX(0.5);
}
.setLine(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 200%;
border: 1px solid @c;
color: @c;
height: 200%;
transform-origin: left top;
transform: scale(0.5);
}
.vux-1px,
.vux-1px-t,
.vux-1px-b,
.vux-1px-tb,
.vux-1px-l,
.vux-1px-r {
position: relative;
}
.vux-1px {
&:before {
.setLine();
}
}
.vux-1px-t {
&:before {
.setTopLine();
}
}
.vux-1px-b {
&:after {
.setBottomLine();
}
}
.vux-1px-tb {
&:before {
.setTopLine();
}
&:after {
.setBottomLine();
}
}
.vux-1px-l {
&:before {
.setLeftLine();
}
}
.vux-1px-r {
&:after {
.setRightLine();
}
}
</style>
<style scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cs-rule {
position: relative;
width: 100vw;
height: calc(260 / 750 * 100vw);
overflow: hidden;
--pointer-color: rgb(97,206,81);
--rule-width: 40;
--num-size: 50
}
.cs-scrollrule {
height: calc(200 / 750 * 100vw);
}
.cs-scrollrule-hook {
list-style: none;
overflow: hidden;
border-collapse: collapse;
white-space: nowrap;
display: inline-block;
}
.cs-scroll-item {
display: inline-block;
width: calc(100vw / var(--rule-width));
text-align: center;
vertical-align: top;
}
/*刻度表数字*/
.cs-scroll-item-num {
width: calc(100 / 750 * 100vw);
margin-left: calc(-50 / 750 * 100vw);
margin-top: calc(38 / 750 * 100vw);
text-align: center;
font-size: calc(var(--num-size) / 750 * 100vw);
color: #cccccc;
}
/*中间红色指针*/
.cs-scroll-item-pointer {
position: absolute;
top: 0;
left: 50%;
height: calc(70 / 750 * 100vw);
transform: translate(-50%, 0);
border-right: 0.5vw solid var(--pointer-color);
}
.cs-scroll-item-rule {
display: inline-block;
width: calc(100vw / 40);
box-sizing: border-box;
}
.vux-1px-l[data-v-db07d170]:before {
border-color: #000000 !important;
}
.vux-1px-l:before {
border-color: #000000 !important;
}
/*刻度1的*/
.cs-scale-one {
height: calc(30 / 750 * 100vw);
}
/*刻度0.5的*/
.cs-scale-half {
height: calc(44 / 750 * 100vw);
}
/*刻度10的*/
.cs-scale-integer {
height: calc(60 / 750 * 100vw);
}
/*0刻度前面的空白*/
.cs-rule-null {
margin-right: calc(-8 / 750 * 100vw);
display: inline-block;
}
.cs-rule-null-after {
margin-left: calc(-8 / 750 * 100vw);
display: inline-block;
}
</style>
smile
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
