Vue | Element 页面1000多个 input 组件输入出现卡顿解决方案

思路：页面正常渲染文本，当点击文本的时候把当前点击的文本区域置为 input 组件， input失去blur焦点的时候再改变为 text 文本经测试这里做了2万个，无卡顿<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="st

ShopXO@纵之格

4087人浏览 · 2021-06-07 17:30:16

ShopXO@纵之格 · 2021-06-07 17:30:16 发布

思路：页面正常渲染文本，当点击文本的时候把当前点击的文本区域置为 input 组件， input

思路：页面正常渲染文本，当点击文本的时候把当前点击的文本区域置为 input 组件， input失去blur焦点的时候再改变为 text 文本

经测试这里做了2万个、无卡顿，已在ShopXO开源商城项目中应用效果很快

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
    .input {
      width: 100px;
    }
    .input input {
      height: 54px;
      text-align: center;
      font-size: 16px;
      border: 0;
    }
    .input-c {
      border: 1px solid #eee;
      widows: 100px;
      float: left;
      margin-top: 20px;
      margin-right: 20px;
      width: 100px;
      text-align: center;
    }
    .input-text {
      width: 100px;
      height: 54px;
      line-height: 54px;
      margin: 0;
    }
    .activeInput input {
      color: #f00;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-for="(item, i) in dataList" class="input-c">
        <p v-if="item.type == 'text'" class="input-text" @click="text_fun($event,i)" data-value="item">{{item.value}}</p>
        <el-input v-if="item.type == 'input'" type="text" @blur="input_fun(i)" v-bind:class="['input',{ 'activeInput' : focusIndex === i}]" v-model="item.value" placeholder="内容"></el-input>
    </div>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          dataList:[],
        }
      },
       mounted() {
            this.add();
        },
      methods:{
          text_fun: function(e, index)
          {            
            let p = e.target.parentElement
            this.focusIndex = index;
            this.dataList[index]['type'] = 'input';
            this.$nextTick(v=>{
              p.firstElementChild.firstElementChild.focus();
            });
          },
          input_fun: function(index)
          {
            this.dataList[index]['type'] = 'text';
          },
          add:function(){
            var i = 0;
            while(i <= 10000)
            {
              this.dataList.push({
                value: i,
                type: 'text',
              });
              i++;
            }
          }
        }
    })
  </script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^