文本框信息显示

components/en-textarea/en-textarea.vue

@@ -0,0 +1,108 @@
+<template>
+  <view class="box">
+    <view class="input-box">
+      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
+        {{ label }}
+      </view>
+      <view class="input-textarea">
+         <textarea
+             class="textarea-data"
+                   :placeholder="placeholder ? placeholder : ''"
+                   :disabled="!!disabled"
+                   :value="inputValue"
+                   @blur="bindTextAreaBlur"
+                   :auto-height="true"
+         />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'en-textarea',
+  props: {
+
+    label: {
+      type: String,
+      default: '标题'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    disabled: {
+      default: false
+    },
+    value: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      inputValue: '',
+      labelWidth: 0
+    }
+  },
+  components: {},
+  mounted() {
+    this.inputValue = this.value
+    this.setLabelWidth()
+  },
+  watch: {
+    'value': function () {
+      if (this.inputValue !== this.value) {
+        this.inputValue = this.value
+      }
+    },
+    'inputValue': function () {
+      this.$emit('input', this.inputValue)
+    }
+  },
+  methods: {
+    setLabelWidth() {
+      let differenceNum = 4 - this.label.length;
+      if (differenceNum === 2) {
+        this.labelWidth = '2em'
+      } else if (differenceNum === 1) {
+        this.labelWidth = '0.5em'
+      }
+    },
+    bindTextAreaBlur(e){
+      this.inputValue=e.detail.value
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../static/css/en-common.css");
+
+.box {
+  .input-box {
+    display: flex;
+    align-items: center;
+
+    .input-box-left {
+      width: 210 rpx;
+      min-width: 210rpx;
+      font-size: 32 rpx;
+      color: #333333;
+    }
+    .input-textarea{
+      height: 170rpx;
+      padding: 6rpx;
+      border-radius: 10rpx;
+      border: 2rpx solid #F0F0F0;
+      overflow: auto;
+      .textarea-data{
+        height: 170rpx;
+        width: 400rpx;
+
+      }
+    }
+  }
+}
+
+</style>

pages/index/index.vue

@@ -7,7 +7,8 @@
     <enCheckbox v-model="type"  label="爱好" :checkboxData="checkboxData"></enCheckbox>
     <enRadio v-model="sex"  label="性别" :radioData="radioData"></enRadio>
     <enSwitch v-model="status"  label="状态" ></enSwitch>
-	</view>
+    <enTextarea v-model="content" label="个人简介"></enTextarea>
+  </view>
 
 </template>
 <script>
@@ -17,8 +18,10 @@
   import enCheckbox from "components/en-checkbox/en-checkbox"
   import enRadio from "components/en-radio/en-radio"
   import enSwitch from "components/en-switch/en-switch"
+  import enTextarea from "components/en-textarea/en-textarea"
 	export default {
 		components: {
+      enTextarea,
       enSwitch,
       enRadio,
       enCheckbox,
@@ -29,6 +32,7 @@
 			return {
         phone:'13900139001',
         text:'来自火星的你',
+        content:'你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?',
         type:['1'],
         sex:'1',
         status:1,
@@ -38,6 +42,9 @@
 			}
 		},
     watch:{
+      'content':function (){
+        console.log('new--------content',this.content)
+      },
       'type':function (){
         console.log('new--------type',this.type)
       },