Vue标尺插件如何使用
短信预约 -IT技能 免费直播动态提醒
本篇内容主要讲解“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标尺插件如何使用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
