Liste de contenu encapsulée par le composant Vue (traitement de la zone de texte de la zone de saisie multiligne)

1. Liste de contenu

Description des composants:
réaliser la mise en page et la composition de la liste de contenu.

Montrer les résultats:

Fonctions réalisées:

1. Réaliser la mise en page haut et bas du texte et des zones de saisie (une seule ligne / plusieurs lignes) dans une liste;
2. Au-dessus se trouve l'étiquette de texte, qui est affichée en texte brut. Vous pouvez utiliser le champ obligatoire pour déterminer s'il est obligatoire. Les champs obligatoires seront précédés d'une * rouge.
3. Vous trouverez ci-dessous la balise input / textarea de valeur d'entrée.

Deux cas d'utilisation

<template>
     <div>
     <el-context
          :list="contentList"        
          :result="contentItem"        
        />
      </div>
</template>
<script>
export default {
    
    
  data(){
    
    
     return {
    
    
        contentList:[
            {
    
    title:"工作内容",require:true,field:"content",placeholder:'请输入工作内容。如休假请填休假（240字以内）',
              renderType:'textarea',
              maxLength:"240"
            },
            {
    
    title:"时长",require:true,field:"time",placeholder:'请输入小时数，保留一位小数。如休假请填0',renderType:'number'},
            {
    
    title:"备注",require:false,field:"remark",placeholder:'请输入备注（240字以内）',
              renderType:'textarea',maxLength:"240",dealWithKeyboard:true},
          ],
        contentItem:{
    
    
          content:'',
          time:'',
          remark:'',
        },
     
    }
  }
}
</script>	

3. Guide d'utilisation de l'API

Les attributs	La description	Types de	Par défaut
liste	La collection de contenu statique affichée sur la page	Tableau	[]
renderType	Type de composant	Chaîne	-
longueur maximale	Limite de longueur maximale	Chaîne	-
étiquette	Afficher le texte	Chaîne	-
champ	Entrez le champ de valeur	Chaîne	-
espace réservé	rapide	Chaîne	-
exiger	Est-ce un champ obligatoire	Booléen	-
désactivée	La valeur est vraie ou désactivée, c'est la valeur inversée, sinon c'est la valeur d'entrée	Booléen	faux
dealWithKeyboard	Traiter le problème d'occlusion du clavier Android	Booléen	faux
résultat	Collection de valeurs de champ correspondante	Objet	{}

Quatrièmement, le code source

Chemin du
fichier Context.vue : share / context / Context.vue

<template>
  <div>
    <div v-for="item in list">
      <div class="cm-p-02 cm-bottom">
        <div class="cm-fs-030">
          <span class="cm-c-red" v-if="item.require">*</span>
          <span :class="[focusText==item.field?'edit-focus-text':'',!item.require?'cm-ml-02':'']">{
    
    {
    
    item.title}}</span>
        </div>
        <el-input
          v-if="item.renderType==='number'"
          @focus="changeStyle(item)"
          type="text"
          @input.native="changeNumber"
          :placeholder="item.placeholder"
          class="edit-input cm-w-full cm-fs-028 cm-c-333"
          v-model="result[item.field]"></el-input>
        <el-input
          :type="item.renderType"
          v-else
          @focus="changeStyle(item)"
          :autosize="{ minRows: 2, maxRows: 4}"
          :maxlength="item.maxLength"
          class="edit-input cm-w-full cm-fs-028 cm-c-333"
          :placeholder="item.placeholder"
          rows="2"
          v-model="result[item.field]">
        </el-input>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    
    autoTextarea,isAndroid} from '../../utils/common';
  export default {
    
    
    name: "ElContent",
    data(){
    
    
      return{
    
    
        focusText:""
      }
    },
    //获取子组件传过来的激活tab
    props:{
    
    
      list:{
    
    
        type: Array,
        default: function () {
    
    
          return [];
        }
      },
      result:{
    
    
        type:Object,
        default:{
    
    }
      },
    },
    mounted(){
    
    
        //为了适应苹果浏览器初始时展现多行状态。
      setTimeout(() => {
    
    
        autoTextarea();
      }, 100);
    },
    methods:{
    
    
      changeNumber({
    
    target}){
    
    
        //此为数字输入框，控制非数字输入
        target.value=(target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
      },
      changeStyle(item){
    
    
        //聚焦时改变label样式
        this.focusText = item.field;
        //避免安卓手机输入法弹出框挡住输入框
        if(item.dealWithKeyboard && isAndroid()){
    
    
          document.body.style.height = document.body.clientHeight + 100 +'px';
        }
      }
    }
  }
</script>

<style scoped>
  .edit-focus-text{
    
    
    color: #3296FA;
    font-size: 0.22rem;
  }
</style>

export function isAndroid(){
    
    
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  if (isAndroid) {
    
    
    return true
  }else {
    
    
    return false
  }
}
export function autoTextarea(){
    
    
  var textarea = document.getElementsByTagName("textarea");
  for(var i=0;i<textarea.length;i++){
    
    
    textarea[i].style.height = 'auto';
    textarea[i].scrollTop = 0; //防抖动
    textarea[i].style.height = textarea[i].scrollHeight + 'px';
    textarea[i].addEventListener('input',function (e) {
    
    
      console.log(e.target.scrollHeight);
      e.target.style.height = 'auto';
      e.target.scrollTop = 0;
      if(e.target.scrollHeight>=100){
    
    
        //控制最高4行
        e.target.style.height = 100 + 'px';
      }else {
    
    
        e.target.style.height = e.target.scrollHeight + 'px';
      }
      //}
    })
  }
}

chemin du
fichier index.js : share / context / index.js

import Content from './Content.vue';

/* istanbul ignore next */
Content.install = function(Vue) {
    
    
  Vue.component(Content.name, Content);
};

export default Content;

Remarque: certains styles publics y sont utilisés, et il y a plus de styles publics, ils ne seront donc pas publiés. Il est nécessaire de laisser un message.