扩展 element input 组件

扩展原因

element ui 的 多行文本编辑框，其中的换行和空格，在保存的时候，被去掉了，如果希望用html标签
和   替代，需要通过自定义组件来封装 组件。

结构图

子组件（ExCom.vue）

<template>

  <el-input type="textarea" v-model="myValue"></el-input>

</template>

<script>

import {Input} from 'element-ui'

export default {

  components:{

​    "el-input":Input

  },

  props:[

​    "value"

  ],

  data(){

​    return {

​      myValue:this.value

​    }

  },

  watch:{

​    value(newValue){

​      this.myValue = newValue;

​    },

​    myValue(newValue){

​      this.$emit('input',newValue);

​    }

  }

}

</script>

父组件（App.vue）

## 

<template>

  <div id="app">

  <excom :value="text" @input="text=$event"></excom>

   <!-- <excom v-model="text"></excom> -->

 </div>

</template>

<script>

import excom from '@/components/ExCom'

export default {

 name: 'App',

 components: {

  excom

 },

 data(){

  return{

   text:""

  }

 }

}

</script>

扩展 textarea 功能，实现编码和解码

//（空格和换行 转换为  和  
）
<template>

 <el-input type="textarea" v-model="myValue" autosize resize="none"></el-input>

</template>

<script>

import { Input } from "element-ui";

export default {

 components: {

  "el-input": Input

 },

 props: ["value"],

 data() {

  return {

   myValue: this.decodeTextAreaString(this.value)

  };

 },

 watch: {

  value(newValue) {

   this.myValue = this.decodeTextAreaString(newValue);

  },

  myValue(newValue) {

   this.$emit("input", this.encodeTextAreaString(newValue));

  }

 },

 methods: {

  //编码

  encodeTextAreaString: function(str) {

   return str.replace(/\r\n/g, '
').replace(/\n/g, '
').replace(/\s/g, ' '); 

  },

  //解码

  decodeTextAreaString: function(str) {

   var reg = new RegExp("
", "g");

   str = str.replace(reg, "\n");

   reg = new RegExp(" ","g");

   str = str.replace(reg," ");

   return str;

  }

 }

};

</script>

效果图

源码地址

https://gitee.com/null_476_2723/ExCom.git