基于Vue的标尺插件（刻度尺）

本文主要是介绍基于Vue的标尺插件（刻度尺），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

可根据高和宽度自适应，主要传值为宽度和距离零刻度的距离，代码和图片如下。

 <template>
	<div class="demoRule">
		<el-row class=" main">
			<div class="rightBorder" v-if="duiData&&duiData.length>0"></div>
			<div class="ruleF" v-for="(item,indexDui) in duiData" :key="indexDui" :style="{'height':(duiData&&duiData.length>0)?(100/duiData.length)+'%':'100%'}">
				<div class="content" :style="{'border-top':(indexDui==0?'1.5px solid #9c9c9c':'')}">
					<div class="faRe" v-for="(itemF,indexF) in item.faReData" :key="indexF" :style="{'right':itemF.right}"> (发热)</div>
					<div class="boxes" v-for="(itemDuo,indexDuo) in item.duoData" :key="indexDuo" :style="{'width':itemDuo.width,'right':itemDuo.right,'background':colorData[itemDuo.color],}">{{itemDuo.content}} </div>
				</div>
				<div v-for="(itemNum, indexNum) in 24 " :key="indexNum" class="ruleBody" :style="{'margin-right':(indexNum==0?'2%':'')}">
					<div class="num" v-if="indexDui%2==0">{{itemNum*50}}</div>
				</div>
			</div>
		</el-row>
	</div>
</template>
<script>

export default {
	data () {
		return {
			colorData: {
				1: "#aad494",
				2: "#aab6dc",
				3: "#faf5b3",
				4: "#c5acd3",
				5: "#faa5a5",
				6: "#faacc4",
			},
			duiData: [
				{
					duoData: [
						{
							width: "5%",
							right: "0%",
							color: "1",
							content: "爽肤水",
						},
						{
							width: "8%",
							right: "26%",
							color: "2",
							content: "康师傅",
						}, {
							width: "6%",
							right: "75%",
							color: "3",
							content: "电风扇",
						}
					],
					faReData: [
						{ right: "3%", },
						{ right: "36%", },
						{ right: "86%", }
					],
				},
				{
					duoData: [
						{
							width: "3%",
							right: "25%",
							color: "4",
							content: "娃哈哈",
						},
						{
							width: "7%",
							right: "56%",
							color: "5",
							content: "集装箱",
						}, {
							width: "7%",
							right: "85%",
							color: "6",
							content: "意大利炮",
						}
					],
					faReData: [
						{ right: "5%", },
						{ right: "66%", },
						{ right: "76%", }
					],
				},
				{
					duoData: [
						{
							width: "5%",
							right: "5%",
							color: "1",
							content: "爽肤水",
						},
						{
							width: "8%",
							right: "26%",
							color: "2",
							content: "康师傅",
						}, {
							width: "6%",
							right: "75%",
							color: "3",
							content: "电风扇",
						}
					],
					faReData: [
						{ right: "3%", },
						{ right: "36%", },
						{ right: "86%", }
					],
				},
				{
					duoData: [
						{
							width: "3%",
							right: "25%",
							color: "4",
							content: "娃哈哈",
						},
						{
							width: "7%",
							right: "56%",
							color: "5",
							content: "集装箱",
						}, {
							width: "7%",
							right: "85%",
							color: "6",
							content: "意大利炮",
						}
					],
					faReData: [
						{ right: "5%", },
						{ right: "66%", },
						{ right: "76%", }
					],
				},
				{
					duoData: [
						{
							width: "5%",
							right: "5%",
							color: "1",
							content: "爽肤水",
						},
						{
							width: "8%",
							right: "26%",
							color: "2",
							content: "康师傅",
						}, {
							width: "6%",
							right: "75%",
							color: "3",
							content: "电风扇",
						}
					],
					faReData: [
						{ right: "3%", },
						{ right: "36%", },
						{ right: "86%", }
					],
				},
				{
					duoData: [
						{
							width: "3%",
							right: "25%",
							color: "4",
							content: "娃哈哈",
						},
						{
							width: "7%",
							right: "56%",
							color: "5",
							content: "集装箱",
						}, {
							width: "7%",
							right: "85%",
							color: "6",
							content: "意大利炮",
						}
					],
					faReData: [
						{ right: "5%", },
						{ right: "66%", },
						{ right: "76%", }
					],
				},
				{
					duoData: [
						{
							width: "5%",
							right: "5%",
							color: "1",
							content: "爽肤水",
						},
						{
							width: "8%",
							right: "26%",
							color: "2",
							content: "康师傅",
						}, {
							width: "6%",
							right: "75%",
							color: "3",
							content: "电风扇",
						}
					],
					faReData: [
						{ right: "3%", },
						{ right: "36%", },
						{ right: "86%", }
					],
				},
				{
					duoData: [
						{
							width: "3%",
							right: "25%",
							color: "4",
							content: "娃哈哈",
						},
						{
							width: "7%",
							right: "56%",
							color: "5",
							content: "集装箱",
						}, {
							width: "7%",
							right: "85%",
							color: "6",
							content: "意大利炮",
						}
					],
					faReData: [
						{ right: "5%", },
						{ right: "66%", },
						{ right: "76%", }
					],
				},
			],

		};
	},
	watch: {},
	created () {

	},
	mounted () {
		// ruleF	
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
.demoRule {
	width: calc(100% - 30px);
	height: calc(100vh - 131px);
	background: #f3f3f3;
	padding: 15px;
}
.main {
	width: 95%;
	height: 95%;
	margin: 0px auto;
	margin-top: 1%;
	padding: 10px;
	border: 1px solid #eaeaea;
	position: relative;
	// background: white;
}
.rightBorder {
	position: absolute;
	width: 1.5px;
	height: calc(100% - 20px);
	background: #c3c3c3;
	top: 10px;
	right: calc(2% + 7px);
	z-index: 100;
}

.ruleF {
	width: 100%;
	font-size: 12px;
	color: #909399;
}
.content {
	overflow: hidden;
	position: relative;
	width: 96%;
	margin-left: 2%;
	height: calc(100% - 30px);
	border-left: 1.5px solid #777777;
	background: #ffffff;
	// border-right: 1.5px solid #777777;
}
.faRe {
	z-index: 101;
	position: absolute;
	color: red;
	top: 5px;
}
.boxes {
	z-index: 1;
	height: 100%;
	position: absolute;
	top: 0px;
	color: #0a2731;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
	font-weight: bold;
}
.ruleBody {
	width: 4%;
	height: 30px;
	background: url("../../assets/images/rule.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: right;
}
.num {
	position: relative;
	margin-left: -10px;
	z-index: 100;
	margin-top: 13px;
}
</style>

这篇关于基于Vue的标尺插件（刻度尺）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！