利用Element UI的滑块Slider实现刻度尺

一、效果图

二、一些要点说明
①首先需要了解slider的一些参数，尤其需要利用marks来实现刻度：

②实现marks的方法需要用到this.$createElement，所以也需要了解它的写法：this.$createElement()方法
③需要改变slider的一些css以实现刻度尺效果：

三、实现过程
①安装element ui：element ui的安装使用步骤
②在要使用刻度尺的地方添加：

<el-slider class="self_slider" v-model="count" :max="countMax" :min="countMin" :marks="guideMarks(countMin, countMax)" :show-tooltip="false" show-input></el-slider>

③在data中定义相关变量：

count: 0,
countMin: 0,
countMax: 70

④实现guideMarks()方法：

    guideMarks (min, max) {const marks = {}for (let i = 0; i <= 160; i++) {if ((i === min && i % 10 !== 0 && i > 9) || (i === max && i % 10 !== 0 && i > 9)) {marks[i] = {style: {color: '#000'},label: this.$createElement('div', { class: 'marks' }, [this.$createElement('div', '|'),this.$createElement('div', { class: 'marks-line' }, '|'),this.$createElement('div', { class: 'marks-line2' }, '|'),this.$createElement('div', { class: 'marks-value' }, i)])}} else if ((i === min && i % 10 !== 0 && i < 9) || (i === max && i % 10 !== 0 && i < 9)) {marks[i] = {style: {color: '#000'},label: this.$createElement('div', { class: 'marks' }, [this.$createElement('div', '|'),this.$createElement('div', { class: 'marks-line' }, '|'),this.$createElement('div', { class: 'marks-line2' }, '|'),this.$createElement('div', { class: 'marks-value0' }, i)])}} else if (i % 10 === 0) {// marks[i] = i + ''if (i === 0) {marks[i] = {style: {color: '#000'},label: this.$createElement('div', { class: 'marks' }, [this.$createElement('div', '|'),this.$createElement('div', { class: 'marks-line' }, '|'),this.$createElement('div', { class: 'marks-line2' }, '|'),this.$createElement('div', { class: 'marks-value0' }, i)])}} else {marks[i] = {style: {color: '#000'},label: this.$createElement('div', { class: 'marks' }, [this.$createElement('div', '|'),this.$createElement('div', { class: 'marks-line' }, '|'),this.$createElement('div', { class: 'marks-line2' }, '|'),this.$createElement('div', { class: 'marks-value' }, i)])}}} else if (i % 1 === 0) {marks[i] = {style: {color: '#ccc'},// label: this.$createElement('span', '|')label: this.$createElement('div', { class: 'marks' }, [this.$createElement('div', '|'),this.$createElement('div', { class: 'marks-line' }, '|')])}}}return marks}

⑤相关css：

<style scoped lang="css">
.self_slider {width: 90%;margin: 20px auto 0;height: 90px;
}
.el-slider__marks-text span {display: inline-block;height: 17px !important;overflow: hidden;
}
.marks {text-align: center;position: relative;
}
.marks-line {position: absolute;top: -12px;
}
.marks-line2 {position: absolute;top: -24px;
}
.marks-value {position: absolute;top: -40px;right: -7px;
}
.marks-value0 {position: absolute;top: -40px;right: -2px;
}
</style>
<style>
.el-slider__runway {height: 0px;
}
.el-slider__bar {height: 0px;
}
.el-slider__button-wrapper {top: 22px;
}
.el-slider__button {border: none;background-color: transparent;
}
.el-slider__button::after, .el-slider__button.dragging::after {content: "";display: block;position: absolute;width: 0;height: 0;border: 6px solid transparent;border-bottom-color: #FF9901;top: 3px;left: 12px;
}
.el-slider__button-wrapper .el-tooltip, .el-slider__button-wrapper::after {display: block;
}
.el-slider__button.hover, .el-slider__button.dragging {transform: scale(1.0);
}
.el-slider__input {margin-top: 3px;width: 50%;position: absolute;right: 25%;top: 170px;
}
.el-slider__runway.show-input {margin-right: 0;width: auto;
}
</style>

利用Element UI的滑块Slider实现刻度尺相关推荐

Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...
利用 element ui 进度条实现渐变条纹进度条
首先我们看下需要完成的效果首先可以看到是一个有白色条纹,以及一个渐变色的条纹的进度条第一部分呢我们可以先写出这个白色的条纹我们可以利用以下代码实现白色条纹 .el-progress-bar_ ...
jQuery UI应用--滑块Slider
1. Animate: 类型Boolean 默认值false a) 用处:单击滑动区域时,滑块是否使用动画效果平滑移动到单击位置. b) 代码示例: 创建实例时设 ...
vue使用element ui实现下拉列表分页的功能！！！
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
element ui字段_ui备忘单下拉字段
element ui字段重点 (Top highlight) Dropdowns get a lot of flak from the UI world – and if we are honest ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...

利用Element UI的滑块Slider实现刻度尺

利用Element UI的滑块Slider实现刻度尺相关推荐

最新文章

热门文章