首页 > 其他分享 >vue 如何处理列表中展示进度的问题

vue 如何处理列表中展示进度的问题

时间:2023-01-06 14:26:00浏览次数:43  
标签:vue const val text 列表 进度 return columnarStrip null

 

 

<template>
  <div ref="columnarStrip" class="columnarStrip">
    <div v-if="normal()" class="columnBox">
      <div :style="{ width: widthPercent }" class="content">
        {{ val }}
      </div>
    </div>
    <div v-else class="columnBox">
      <div :style="{ width: widthPercent }" class="content"></div>
      <span class="text"> {{ val }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'columnarStrip',
  props: {
    max: String,
    val: String
  },
  data() {
    return {
      maxLen: null,
      columnLen: null,
      textLen: null
    }
  },
  computed: {
    widthPercent() {
      return (this.val / this.max) * 100 + '%'
    }
  },
  mounted() {
    this.maxLen = this.$refs.columnarStrip.offsetWidth
  },
  methods: {
    normal() {
      const widthScale = Number(this.widthPercent.replace('%', '')) / 100
      this.columnLen = this.maxLen * widthScale
      this.textLen = this.getTextLen(this.val)
      return this.columnLen > this.textLen
    },
    getTextLen(text) {
      const lenMap = {
        num: 8.3,
        point: 3.4
      }
      const totalNum = text.length
      const reg = /[.]/g
      const pointNum = text.search(reg) === -1 ? 0 : 1
      const textNum = totalNum - pointNum
      return pointNum * lenMap.point + textNum * lenMap.num
    }
  }
}
</script>

<style lang="scss" scoped>
.columnarStrip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

}
.columnBox {
  @extend .columnarStrip;
  .content {
    height: 21px;
    line-height: 21px;
    text-align: center;
    background: #3168ec;
    color: white;
  }
  .text{
    margin-left: 5px;
  }
}
</style>

 

标签:vue,const,val,text,列表,进度,return,columnarStrip,null
From: https://www.cnblogs.com/wjs0509/p/17030310.html

相关文章

  • element ui可拖拽dialog-vue2
    文章目录​​1.准备js​​​​1.1`dialog-drag.js`​​​​1.2`index.js`​​​​2.`main.js`引用自定义指令​​​​3.使用​​1.准备js1.1​​dialog-drag.js​​......
  • Vue.set()和this.$set()介绍
    文章目录​​1.场景​​​​2.使用​​​​2.1`this.$set()`​​​​2.2`Vue.set()`​​1.场景当生成​​Vue​​实例之后,再次给数据赋值或者新增数据对象属性时,数据可以......
  • vue 配置代理
    如果接口请求存在跨域问题且后端暂没时间解决,可以通过vue-cli配置代理的方式解决:.env.development中设置VUE_APP_BASE_API=LocalLocal为该项目运行时的服务器地址,vue......
  • postman 列表类型传参 ,对象列表传参 格式
     {"examPaperId":"2","myQuestionIds":[1,3,4,5,6,7,18,20,21,22,23,24,25,26], //后台接收List<Integer>类型"myQuestions":[{"questionId":"1","questionPoint......
  • 在vue的v-for中,key为什么不能用index?
    写在前面在前端中,主要涉及的基本上就是DOM的相关操作和JS,我们都知道DOM操作是比较耗时的,那么在我们写前端相关代码的时候,如何减少不必要的DOM操作便成了前端优化的......
  • 写过vue自定义指令吗,原理是什么?.m
    背景看了一些自定义指令的文章,但是探究其原理的文章却不多见,所以我决定水一篇。如何自定义指令?其实关于这个问题官方文档上已经有了很好的示例的,我们先来温故一下。除......
  • 2023前端二面必会vue面试题指南
    action与mutation的区别mutation是同步更新,$watch严格模式下会报错action是异步操作,可以获取数据后调用mutation提交最终数据Vue路由hash模式和history......
  • egg.js+vue 实现crypto.js 对称加密
    对称加密对称加密算法,加解密都用同一个密钥。 node:letcrypto=require('crypto')//data:需要加解密的内容,//key:密钥//初始化向量(iv)functionaesEncryp......
  • 面了几个说自己精通 Vue 的同学,实在一言难尽……
    请说一下响应式数据的原理......
  • VUE中的键盘事件(按键别名)
    1.vue中常用的按键别名:回车=>enter删除=>delete(捕获“删除”和“退格”键)退出=>esc空格=>space换行=>tab  //不适合用keyup事件,tab会切走当前选中的......