本篇内容主要讲解“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" :> <div class="content" :> <div class="faRe" v-for="(itemF,indexF) in item.faReData" :key="indexF" :> (发热)</div> <div class="boxes" v-for="(itemDuo,indexDuo) in item.duoData" :key="indexDuo" :>{{itemDuo.content}} </div> </div> <div v-for="(itemNum, indexNum) in 24 " :key="indexNum" class="ruleBody" :> <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标尺插件如何使用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
