基于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的标尺插件（刻度尺）相关推荐

基于vue前端聊天插件_基于Vue聊天的实现
基于vue前端聊天插件基本视频聊天 (basic-vue-chat) Easy to use VueJS chat. 易于使用的VueJS聊天. 安装 (Installation) You can ...
基于vue的分享插件
vue-socialmedia-share 是一个可以分享到facebook weibo等多个社交网站的插件使用十分简单第一步: npm install vue-socialmedia-share ...
vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点轻 ...
基于Vue的网页版录音并播放
最近项目中需要实现一个效果,需要在网页上录制音频,并上传给后台,后续还需要做语音识别处理. 下面的表格罗列了我的前端项目中所使用的框架以及插件(本项目基于Vue): 插件名称资源地址 Element ...
基于 Vue BootStrap的迷你Chrome插件
代码地址如下: http://www.demodashi.com/demo/14306.html 安装安装 Visual Studio Code 和Chrome, 自行翻墙详细安装这里略过安装包 ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
基于vue 2.x的移动端网页弹窗插件wc-messagebox（支持Alert，Confirm，Toast，Loading）
参考文档:GitHub - helicopters/wc-messagebox: 基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生 ①安装插件: ...
vue-select-tu--一款基于vue的多元图形选择插件
vue-select-tu 一款基于vue的多元图形选择插件 Table of Contents Security Install Usage Maintainers Contributing Lic ...
一款基于VUE的动态化弹出层插件
public-layer 官网 link. 这是一个基于 vue 的动态弹框插件它对标的是layer.js,和layer不同的是: 1.它零依赖不需要Jquery支持 2.它支持vue,却不限于vu ...
【原创】基于vue。简单、优雅的评论插件（包含颜文字表情、滑动验证）。
主要功能支持颜文字emoji表情(╮(￣▽￣)╭) 支持滑动验证. 评论为空不允许提交. 封装了几个常用的方法. 在线浏览 1.用户已登录 2.用户未登录使用方法 <template> ...

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

基于Vue的标尺插件（刻度尺）相关推荐

最新文章

热门文章