Vue標(biāo)尺插件使用詳解
更新時間：2022年02月27日 16:22:36 作者：覓長生
這篇文章主要為大家詳細(xì)介紹了Vue標(biāo)尺插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了Vue標(biāo)尺插件使用的具體代碼，供大家參考，具體內(nèi)容如下
可根據(jù)高和寬度自適應(yīng)，主要傳值為寬度和距離零刻度的距離，代碼和圖片如下。
<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}"> (發(fā)熱)</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: "電風(fēng)扇",
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?],
?? ??? ??? ??? ??? ?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: "電風(fēng)扇",
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?],
?? ??? ??? ??? ??? ?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: "電風(fēng)扇",
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?],
?? ??? ??? ??? ??? ?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: "電風(fēng)扇",
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?],
?? ??? ??? ??? ??? ?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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要為大家介紹了Vue之常用的內(nèi)置指令，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue 取出v-for循環(huán)中的index值實(shí)例
今天小編就為大家分享一篇vue 取出v-for循環(huán)中的index值實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Element Plus是為適配Vue3而對Element UI進(jìn)行重構(gòu)后產(chǎn)生的前端組件庫,包含豐富的基礎(chǔ)組件,下面這篇文章主要給大家介紹了關(guān)于vue3引入Element-plus的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要為大家介紹了element表格行列的動態(tài)合并示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue3 實(shí)現(xiàn)雙盒子定位Overlay的示例
這篇文章主要介紹了Vue3 實(shí)現(xiàn)雙盒子定位Overlay的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vuex管理狀態(tài)倉庫使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vite.config.ts配置之自動導(dǎo)入element-puls方式
這篇文章主要介紹了vite.config.ts配置之自動導(dǎo)入element-puls方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue Extends 擴(kuò)展選項(xiàng)用法完整實(shí)例
這篇文章主要介紹了Vue Extends 擴(kuò)展選項(xiàng)用法,結(jié)合完整實(shí)例形式分析了Vue Extends 擴(kuò)展選項(xiàng)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-09-09