Vue标尺插件使用详解
更新时间：2022年02月27日 16:22:36 作者：觅长生
这篇文章主要为大家详细介绍了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.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合,下面这篇文章主要给大家介绍了关于使用idea创建vue项目的相关资料,需要的朋友可以参考下2022-08-08
本篇文章主要介绍了Vue如何实现组件的源码解析，组件继承分为两大类，全局组件和局部组件，有兴趣的可以了解一下2017-06-06
这篇文章主要介绍了vue+element表格实现多层数据的嵌套方式，具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vue实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
在使用 Vue.js 开发后台管理系统时，经常会遇到需要使用路由标签页的场景，这篇文章主要介绍了vue3+Typescript实现路由标签页和面包屑,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue实现添加数据到二维数组并显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue.2.0.5过渡效果使用技巧，实例分析了Vue.2.0.5过渡效果的技巧，非常具有实用价值，需要的朋友可以参考下。2017-03-03
下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue $mount 和 el的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了详解vue.js全局组件和局部组件，实例分析了全局组件和局部的技巧，有兴趣的可以了解一下。2017-04-04
最新评论