html模块:

<el-slider class="self_slider" v-model="value" range :max="31" :min="1" :format-tooltip="formatTooltip" :marks="guideMarks"></el-slider>

computed:

computed: {
			guideMarks() {
			  let marks = {};
			  for (let i = 0; i <= 160; i++) {
				if (i % 10 == 0) {
				  marks[i] = i + "";
				} else if (i % 2 == 0) {
				  marks[i] = {
					style: {
					  color: "#ccc",
					},
					label: this.$createElement("span", "|"),
				  };
				}
			  }
			  return marks;
			},
		},

css:

.el-slider__marks-text {
	top: 20px;
	span {
		display: inline-block;
		height: 8px !important;
		overflow: hidden;
	}
}
.el-slider__runway {
	height: 30px;
	.el-slider__bar {
		height: 30px;
	}
    .el-slider__button-wrapper {
	    top: -2px;
	}
}
.el-slider__stop {
	display: none;
} 

效果图:

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45 9 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 9 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐