经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue标尺插件使用详解
来源:jb51  时间:2022/2/28 8:51:16  对本文有异议

本文为大家分享了Vue标尺插件使用的具体代码,供大家参考,具体内容如下

可根据高和宽度自适应,主要传值为宽度和距离零刻度的距离,代码和图片如下。

  1. <template>
  2. ?? ?<div class="demoRule">
  3. ?? ??? ?<el-row class=" main">
  4. ?? ??? ??? ?<div class="rightBorder" v-if="duiData&&duiData.length>0"></div>
  5. ?? ??? ??? ?<div class="ruleF" v-for="(item,indexDui) in duiData" :key="indexDui" :style="{'height':(duiData&&duiData.length>0)?(100/duiData.length)+'%':'100%'}">
  6. ?? ??? ??? ??? ?<div class="content" :style="{'border-top':(indexDui==0?'1.5px solid #9c9c9c':'')}">
  7. ?? ??? ??? ??? ??? ?<div class="faRe" v-for="(itemF,indexF) in item.faReData" :key="indexF" :style="{'right':itemF.right}"> (发热)</div>
  8. ?? ??? ??? ??? ??? ?<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>
  9. ?? ??? ??? ??? ?</div>
  10. ?? ??? ??? ??? ?<div v-for="(itemNum, indexNum) in 24 " :key="indexNum" class="ruleBody" :style="{'margin-right':(indexNum==0?'2%':'')}">
  11. ?? ??? ??? ??? ??? ?<div class="num" v-if="indexDui%2==0">{{itemNum*50}}</div>
  12. ?? ??? ??? ??? ?</div>
  13. ?? ??? ??? ?</div>
  14. ?? ??? ?</el-row>
  15. ?? ?</div>
  16. </template>
  17. <script>
  18.  
  19. export default {
  20. ?? ?data () {
  21. ?? ??? ?return {
  22. ?? ??? ??? ?colorData: {
  23. ?? ??? ??? ??? ?1: "#aad494",
  24. ?? ??? ??? ??? ?2: "#aab6dc",
  25. ?? ??? ??? ??? ?3: "#faf5b3",
  26. ?? ??? ??? ??? ?4: "#c5acd3",
  27. ?? ??? ??? ??? ?5: "#faa5a5",
  28. ?? ??? ??? ??? ?6: "#faacc4",
  29. ?? ??? ??? ?},
  30. ?? ??? ??? ?duiData: [
  31. ?? ??? ??? ??? ?{
  32. ?? ??? ??? ??? ??? ?duoData: [
  33. ?? ??? ??? ??? ??? ??? ?{
  34. ?? ??? ??? ??? ??? ??? ??? ?width: "5%",
  35. ?? ??? ??? ??? ??? ??? ??? ?right: "0%",
  36. ?? ??? ??? ??? ??? ??? ??? ?color: "1",
  37. ?? ??? ??? ??? ??? ??? ??? ?content: "爽肤水",
  38. ?? ??? ??? ??? ??? ??? ?},
  39. ?? ??? ??? ??? ??? ??? ?{
  40. ?? ??? ??? ??? ??? ??? ??? ?width: "8%",
  41. ?? ??? ??? ??? ??? ??? ??? ?right: "26%",
  42. ?? ??? ??? ??? ??? ??? ??? ?color: "2",
  43. ?? ??? ??? ??? ??? ??? ??? ?content: "康师傅",
  44. ?? ??? ??? ??? ??? ??? ?}, {
  45. ?? ??? ??? ??? ??? ??? ??? ?width: "6%",
  46. ?? ??? ??? ??? ??? ??? ??? ?right: "75%",
  47. ?? ??? ??? ??? ??? ??? ??? ?color: "3",
  48. ?? ??? ??? ??? ??? ??? ??? ?content: "电风扇",
  49. ?? ??? ??? ??? ??? ??? ?}
  50. ?? ??? ??? ??? ??? ?],
  51. ?? ??? ??? ??? ??? ?faReData: [
  52. ?? ??? ??? ??? ??? ??? ?{ right: "3%", },
  53. ?? ??? ??? ??? ??? ??? ?{ right: "36%", },
  54. ?? ??? ??? ??? ??? ??? ?{ right: "86%", }
  55. ?? ??? ??? ??? ??? ?],
  56. ?? ??? ??? ??? ?},
  57. ?? ??? ??? ??? ?{
  58. ?? ??? ??? ??? ??? ?duoData: [
  59. ?? ??? ??? ??? ??? ??? ?{
  60. ?? ??? ??? ??? ??? ??? ??? ?width: "3%",
  61. ?? ??? ??? ??? ??? ??? ??? ?right: "25%",
  62. ?? ??? ??? ??? ??? ??? ??? ?color: "4",
  63. ?? ??? ??? ??? ??? ??? ??? ?content: "娃哈哈",
  64. ?? ??? ??? ??? ??? ??? ?},
  65. ?? ??? ??? ??? ??? ??? ?{
  66. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  67. ?? ??? ??? ??? ??? ??? ??? ?right: "56%",
  68. ?? ??? ??? ??? ??? ??? ??? ?color: "5",
  69. ?? ??? ??? ??? ??? ??? ??? ?content: "集装箱",
  70. ?? ??? ??? ??? ??? ??? ?}, {
  71. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  72. ?? ??? ??? ??? ??? ??? ??? ?right: "85%",
  73. ?? ??? ??? ??? ??? ??? ??? ?color: "6",
  74. ?? ??? ??? ??? ??? ??? ??? ?content: "意大利炮",
  75. ?? ??? ??? ??? ??? ??? ?}
  76. ?? ??? ??? ??? ??? ?],
  77. ?? ??? ??? ??? ??? ?faReData: [
  78. ?? ??? ??? ??? ??? ??? ?{ right: "5%", },
  79. ?? ??? ??? ??? ??? ??? ?{ right: "66%", },
  80. ?? ??? ??? ??? ??? ??? ?{ right: "76%", }
  81. ?? ??? ??? ??? ??? ?],
  82. ?? ??? ??? ??? ?},
  83. ?? ??? ??? ??? ?{
  84. ?? ??? ??? ??? ??? ?duoData: [
  85. ?? ??? ??? ??? ??? ??? ?{
  86. ?? ??? ??? ??? ??? ??? ??? ?width: "5%",
  87. ?? ??? ??? ??? ??? ??? ??? ?right: "5%",
  88. ?? ??? ??? ??? ??? ??? ??? ?color: "1",
  89. ?? ??? ??? ??? ??? ??? ??? ?content: "爽肤水",
  90. ?? ??? ??? ??? ??? ??? ?},
  91. ?? ??? ??? ??? ??? ??? ?{
  92. ?? ??? ??? ??? ??? ??? ??? ?width: "8%",
  93. ?? ??? ??? ??? ??? ??? ??? ?right: "26%",
  94. ?? ??? ??? ??? ??? ??? ??? ?color: "2",
  95. ?? ??? ??? ??? ??? ??? ??? ?content: "康师傅",
  96. ?? ??? ??? ??? ??? ??? ?}, {
  97. ?? ??? ??? ??? ??? ??? ??? ?width: "6%",
  98. ?? ??? ??? ??? ??? ??? ??? ?right: "75%",
  99. ?? ??? ??? ??? ??? ??? ??? ?color: "3",
  100. ?? ??? ??? ??? ??? ??? ??? ?content: "电风扇",
  101. ?? ??? ??? ??? ??? ??? ?}
  102. ?? ??? ??? ??? ??? ?],
  103. ?? ??? ??? ??? ??? ?faReData: [
  104. ?? ??? ??? ??? ??? ??? ?{ right: "3%", },
  105. ?? ??? ??? ??? ??? ??? ?{ right: "36%", },
  106. ?? ??? ??? ??? ??? ??? ?{ right: "86%", }
  107. ?? ??? ??? ??? ??? ?],
  108. ?? ??? ??? ??? ?},
  109. ?? ??? ??? ??? ?{
  110. ?? ??? ??? ??? ??? ?duoData: [
  111. ?? ??? ??? ??? ??? ??? ?{
  112. ?? ??? ??? ??? ??? ??? ??? ?width: "3%",
  113. ?? ??? ??? ??? ??? ??? ??? ?right: "25%",
  114. ?? ??? ??? ??? ??? ??? ??? ?color: "4",
  115. ?? ??? ??? ??? ??? ??? ??? ?content: "娃哈哈",
  116. ?? ??? ??? ??? ??? ??? ?},
  117. ?? ??? ??? ??? ??? ??? ?{
  118. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  119. ?? ??? ??? ??? ??? ??? ??? ?right: "56%",
  120. ?? ??? ??? ??? ??? ??? ??? ?color: "5",
  121. ?? ??? ??? ??? ??? ??? ??? ?content: "集装箱",
  122. ?? ??? ??? ??? ??? ??? ?}, {
  123. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  124. ?? ??? ??? ??? ??? ??? ??? ?right: "85%",
  125. ?? ??? ??? ??? ??? ??? ??? ?color: "6",
  126. ?? ??? ??? ??? ??? ??? ??? ?content: "意大利炮",
  127. ?? ??? ??? ??? ??? ??? ?}
  128. ?? ??? ??? ??? ??? ?],
  129. ?? ??? ??? ??? ??? ?faReData: [
  130. ?? ??? ??? ??? ??? ??? ?{ right: "5%", },
  131. ?? ??? ??? ??? ??? ??? ?{ right: "66%", },
  132. ?? ??? ??? ??? ??? ??? ?{ right: "76%", }
  133. ?? ??? ??? ??? ??? ?],
  134. ?? ??? ??? ??? ?},
  135. ?? ??? ??? ??? ?{
  136. ?? ??? ??? ??? ??? ?duoData: [
  137. ?? ??? ??? ??? ??? ??? ?{
  138. ?? ??? ??? ??? ??? ??? ??? ?width: "5%",
  139. ?? ??? ??? ??? ??? ??? ??? ?right: "5%",
  140. ?? ??? ??? ??? ??? ??? ??? ?color: "1",
  141. ?? ??? ??? ??? ??? ??? ??? ?content: "爽肤水",
  142. ?? ??? ??? ??? ??? ??? ?},
  143. ?? ??? ??? ??? ??? ??? ?{
  144. ?? ??? ??? ??? ??? ??? ??? ?width: "8%",
  145. ?? ??? ??? ??? ??? ??? ??? ?right: "26%",
  146. ?? ??? ??? ??? ??? ??? ??? ?color: "2",
  147. ?? ??? ??? ??? ??? ??? ??? ?content: "康师傅",
  148. ?? ??? ??? ??? ??? ??? ?}, {
  149. ?? ??? ??? ??? ??? ??? ??? ?width: "6%",
  150. ?? ??? ??? ??? ??? ??? ??? ?right: "75%",
  151. ?? ??? ??? ??? ??? ??? ??? ?color: "3",
  152. ?? ??? ??? ??? ??? ??? ??? ?content: "电风扇",
  153. ?? ??? ??? ??? ??? ??? ?}
  154. ?? ??? ??? ??? ??? ?],
  155. ?? ??? ??? ??? ??? ?faReData: [
  156. ?? ??? ??? ??? ??? ??? ?{ right: "3%", },
  157. ?? ??? ??? ??? ??? ??? ?{ right: "36%", },
  158. ?? ??? ??? ??? ??? ??? ?{ right: "86%", }
  159. ?? ??? ??? ??? ??? ?],
  160. ?? ??? ??? ??? ?},
  161. ?? ??? ??? ??? ?{
  162. ?? ??? ??? ??? ??? ?duoData: [
  163. ?? ??? ??? ??? ??? ??? ?{
  164. ?? ??? ??? ??? ??? ??? ??? ?width: "3%",
  165. ?? ??? ??? ??? ??? ??? ??? ?right: "25%",
  166. ?? ??? ??? ??? ??? ??? ??? ?color: "4",
  167. ?? ??? ??? ??? ??? ??? ??? ?content: "娃哈哈",
  168. ?? ??? ??? ??? ??? ??? ?},
  169. ?? ??? ??? ??? ??? ??? ?{
  170. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  171. ?? ??? ??? ??? ??? ??? ??? ?right: "56%",
  172. ?? ??? ??? ??? ??? ??? ??? ?color: "5",
  173. ?? ??? ??? ??? ??? ??? ??? ?content: "集装箱",
  174. ?? ??? ??? ??? ??? ??? ?}, {
  175. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  176. ?? ??? ??? ??? ??? ??? ??? ?right: "85%",
  177. ?? ??? ??? ??? ??? ??? ??? ?color: "6",
  178. ?? ??? ??? ??? ??? ??? ??? ?content: "意大利炮",
  179. ?? ??? ??? ??? ??? ??? ?}
  180. ?? ??? ??? ??? ??? ?],
  181. ?? ??? ??? ??? ??? ?faReData: [
  182. ?? ??? ??? ??? ??? ??? ?{ right: "5%", },
  183. ?? ??? ??? ??? ??? ??? ?{ right: "66%", },
  184. ?? ??? ??? ??? ??? ??? ?{ right: "76%", }
  185. ?? ??? ??? ??? ??? ?],
  186. ?? ??? ??? ??? ?},
  187. ?? ??? ??? ??? ?{
  188. ?? ??? ??? ??? ??? ?duoData: [
  189. ?? ??? ??? ??? ??? ??? ?{
  190. ?? ??? ??? ??? ??? ??? ??? ?width: "5%",
  191. ?? ??? ??? ??? ??? ??? ??? ?right: "5%",
  192. ?? ??? ??? ??? ??? ??? ??? ?color: "1",
  193. ?? ??? ??? ??? ??? ??? ??? ?content: "爽肤水",
  194. ?? ??? ??? ??? ??? ??? ?},
  195. ?? ??? ??? ??? ??? ??? ?{
  196. ?? ??? ??? ??? ??? ??? ??? ?width: "8%",
  197. ?? ??? ??? ??? ??? ??? ??? ?right: "26%",
  198. ?? ??? ??? ??? ??? ??? ??? ?color: "2",
  199. ?? ??? ??? ??? ??? ??? ??? ?content: "康师傅",
  200. ?? ??? ??? ??? ??? ??? ?}, {
  201. ?? ??? ??? ??? ??? ??? ??? ?width: "6%",
  202. ?? ??? ??? ??? ??? ??? ??? ?right: "75%",
  203. ?? ??? ??? ??? ??? ??? ??? ?color: "3",
  204. ?? ??? ??? ??? ??? ??? ??? ?content: "电风扇",
  205. ?? ??? ??? ??? ??? ??? ?}
  206. ?? ??? ??? ??? ??? ?],
  207. ?? ??? ??? ??? ??? ?faReData: [
  208. ?? ??? ??? ??? ??? ??? ?{ right: "3%", },
  209. ?? ??? ??? ??? ??? ??? ?{ right: "36%", },
  210. ?? ??? ??? ??? ??? ??? ?{ right: "86%", }
  211. ?? ??? ??? ??? ??? ?],
  212. ?? ??? ??? ??? ?},
  213. ?? ??? ??? ??? ?{
  214. ?? ??? ??? ??? ??? ?duoData: [
  215. ?? ??? ??? ??? ??? ??? ?{
  216. ?? ??? ??? ??? ??? ??? ??? ?width: "3%",
  217. ?? ??? ??? ??? ??? ??? ??? ?right: "25%",
  218. ?? ??? ??? ??? ??? ??? ??? ?color: "4",
  219. ?? ??? ??? ??? ??? ??? ??? ?content: "娃哈哈",
  220. ?? ??? ??? ??? ??? ??? ?},
  221. ?? ??? ??? ??? ??? ??? ?{
  222. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  223. ?? ??? ??? ??? ??? ??? ??? ?right: "56%",
  224. ?? ??? ??? ??? ??? ??? ??? ?color: "5",
  225. ?? ??? ??? ??? ??? ??? ??? ?content: "集装箱",
  226. ?? ??? ??? ??? ??? ??? ?}, {
  227. ?? ??? ??? ??? ??? ??? ??? ?width: "7%",
  228. ?? ??? ??? ??? ??? ??? ??? ?right: "85%",
  229. ?? ??? ??? ??? ??? ??? ??? ?color: "6",
  230. ?? ??? ??? ??? ??? ??? ??? ?content: "意大利炮",
  231. ?? ??? ??? ??? ??? ??? ?}
  232. ?? ??? ??? ??? ??? ?],
  233. ?? ??? ??? ??? ??? ?faReData: [
  234. ?? ??? ??? ??? ??? ??? ?{ right: "5%", },
  235. ?? ??? ??? ??? ??? ??? ?{ right: "66%", },
  236. ?? ??? ??? ??? ??? ??? ?{ right: "76%", }
  237. ?? ??? ??? ??? ??? ?],
  238. ?? ??? ??? ??? ?},
  239. ?? ??? ??? ?],
  240.  
  241. ?? ??? ?};
  242. ?? ?},
  243. ?? ?watch: {},
  244. ?? ?created () {
  245.  
  246. ?? ?},
  247. ?? ?mounted () {
  248. ?? ??? ?// ruleF?? ?
  249. ?? ?},
  250. ?? ?methods: {}
  251. };
  252. </script>
  253. <style lang="scss" scoped>
  254. .demoRule {
  255. ?? ?width: calc(100% - 30px);
  256. ?? ?height: calc(100vh - 131px);
  257. ?? ?background: #f3f3f3;
  258. ?? ?padding: 15px;
  259. }
  260. .main {
  261. ?? ?width: 95%;
  262. ?? ?height: 95%;
  263. ?? ?margin: 0px auto;
  264. ?? ?margin-top: 1%;
  265. ?? ?padding: 10px;
  266. ?? ?border: 1px solid #eaeaea;
  267. ?? ?position: relative;
  268. ?? ?// background: white;
  269. }
  270. .rightBorder {
  271. ?? ?position: absolute;
  272. ?? ?width: 1.5px;
  273. ?? ?height: calc(100% - 20px);
  274. ?? ?background: #c3c3c3;
  275. ?? ?top: 10px;
  276. ?? ?right: calc(2% + 7px);
  277. ?? ?z-index: 100;
  278. }
  279.  
  280. .ruleF {
  281. ?? ?width: 100%;
  282. ?? ?font-size: 12px;
  283. ?? ?color: #909399;
  284. }
  285. .content {
  286. ?? ?overflow: hidden;
  287. ?? ?position: relative;
  288. ?? ?width: 96%;
  289. ?? ?margin-left: 2%;
  290. ?? ?height: calc(100% - 30px);
  291. ?? ?border-left: 1.5px solid #777777;
  292. ?? ?background: #ffffff;
  293. ?? ?// border-right: 1.5px solid #777777;
  294. }
  295. .faRe {
  296. ?? ?z-index: 101;
  297. ?? ?position: absolute;
  298. ?? ?color: red;
  299. ?? ?top: 5px;
  300. }
  301. .boxes {
  302. ?? ?z-index: 1;
  303. ?? ?height: 100%;
  304. ?? ?position: absolute;
  305. ?? ?top: 0px;
  306. ?? ?color: #0a2731;
  307. ?? ?justify-content: center;
  308. ?? ?align-items: center;
  309. ?? ?text-align: center;
  310. ?? ?display: flex;
  311. ?? ?font-weight: bold;
  312. }
  313. .ruleBody {
  314. ?? ?width: 4%;
  315. ?? ?height: 30px;
  316. ?? ?background: url("../../assets/images/rule.png");
  317. ?? ?background-repeat: no-repeat;
  318. ?? ?background-size: 100% 100%;
  319. ?? ?float: right;
  320. }
  321. .num {
  322. ?? ?position: relative;
  323. ?? ?margin-left: -10px;
  324. ?? ?z-index: 100;
  325. ?? ?margin-top: 13px;
  326. }
  327. </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号