#

src/components/MakerSpaceWord.vue

@@ -8,7 +8,14 @@
     <div id="table">
         <div class="han">
           <div class="label">项目名称</div><div class="value">
-            <editableDiv v-model="wordData['projectName']"/>
+            <el-input
+              type="textarea"
+              autosize
+              resize="none"
+              placeholder="请输入项目名称"
+              v-model="wordData['projectName']">
+            </el-input>
+            <!-- <editableDiv v-model="wordData['projectName']"/> -->
             <!-- {{wordData['projectName']}} -->
             <!-- <div class="InputDiv" contenteditable="true" v-text="wordData['projectName']" v-editableDiv="wordData['projectName']"></div> -->
             <!-- <el-input v-model="wordData['projectName']"></el-input> -->
@@ -69,11 +76,27 @@
         </div>
         <div class="han">
           <div class="label">项目负责人</div><div class="value">
+            <el-input
+              type="textarea"
+              autosize
+              resize="none"
+              placeholder="请输入项目负责人"
+              v-model="wordData['pro_leader']">
+            </el-input>
             <!-- {{wordData['pro_leader']}} -->
-            <div class="InputDiv" contenteditable="true" v-text="wordData['pro_leader']"></div>
+            <!-- <editableDiv v-model="wordData['pro_leader']"/> -->
+            <!-- <div class="InputDiv" contenteditable="true" v-text="wordData['pro_leader']"></div> -->
           </div>
           <div class="label">学院牵头领导</div><div class="value">
-            <div class="InputDiv" contenteditable="true" v-text="wordData['lead_leader']"></div>
+            <el-input
+              type="textarea"
+              autosize
+              resize="none"
+              placeholder="请输入学院牵头领导"
+              v-model="wordData['lead_leader']">
+            </el-input>
+            <!-- <editableDiv v-model="wordData['lead_leader']"/> -->
+            <!-- <div class="InputDiv" contenteditable="true" v-text="wordData['lead_leader']"></div> -->
             <!-- {{wordData['lead_leader']}} -->
           </div>
         </div>
@@ -102,27 +125,69 @@
             </div>
             <div class="memberHan" v-for="(item,index) in wordData['teacher']" :key="index">
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true">{{ item['name'] }}</div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['name']">
+                </el-input>
+                <!-- <editableDiv v-model="item['name']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true">{{ item['name'] }}</div> -->
                 <!-- {{item['name']}} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true">{{ item['speciality'] }}</div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['speciality']">
+                </el-input>
+                <!-- <editableDiv v-model="item['speciality']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true">{{ item['speciality'] }}</div> -->
                 <!-- {{item['speciality']}} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true" v-text="item['title']"></div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['title']">
+                </el-input>
+                <!-- <editableDiv v-model="item['title']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true" v-text="item['title']"></div> -->
                 <!-- {{item['title']}} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true" v-text="item['education']"></div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['education']">
+                </el-input>
+                <!-- <editableDiv v-model="item['education']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true" v-text="item['education']"></div> -->
                 <!-- {{ item['education'] }} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true" v-text="item['section']"></div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['section']">
+                </el-input>
+                <!-- <editableDiv v-model="item['section']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true" v-text="item['section']"></div> -->
                 <!-- {{ item['section'] }} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true" v-text="item['work']"></div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['work']">
+                </el-input>
+                <!-- <editableDiv v-model="item['work']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true" v-text="item['work']"></div> -->
                 <!-- {{ item['work'] }} -->
               </div>
             </div>
@@ -146,19 +211,47 @@
             </div>
             <div class="memberHan" v-for="(item,index) in wordData['student']" :key="index">
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true">{{item['name']}}</div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['name']">
+                </el-input>
+                <!-- <editableDiv v-model="item['name']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true">{{item['name']}}</div> -->
                 <!-- {{item['name']}} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true" v-text="item['class']"></div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['class']">
+                </el-input>
+                <!-- <editableDiv v-model="item['class']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true" v-text="item['class']"></div> -->
                 <!-- {{ item['class'] }} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true" v-text="item['age']"></div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['age']">
+                </el-input>
+                <!-- <editableDiv v-model="item['age']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true" v-text="item['age']"></div> -->
                 <!-- {{ item['age'] }} -->
               </div>
               <div class="memberValue">
-                <div class="InputDiv" contenteditable="true" v-text="item['work']"></div>
+                <el-input
+                  type="textarea"
+                  autosize
+                  resize="none"
+                  v-model="item['work']">
+                </el-input>
+                <!-- <editableDiv v-model="item['work']"/> -->
+                <!-- <div class="InputDiv" contenteditable="true" v-text="item['work']"></div> -->
                 <!-- {{item['work']}} -->
               </div>
             </div>
@@ -171,11 +264,27 @@
           <div class="chaptersTable">
               <div class="chaptersValue">
                 <span>项目简介(200-300字)</span><br/>
-                {{wordData['brief']}}
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  show-word-limit
+                  maxlength="300"
+                  v-model="wordData['brief']">
+                </el-input>
+                <!-- {{wordData['brief']}} -->
               </div>
               <div class="chaptersValue">
                 <span>建设内容（空间优化/场馆规划方面拟解决的关键问题及主要建设指标）</span><br/>
-                {{wordData['Construction']}}
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['Construction']">
+                </el-input>
+                <!-- {{wordData['Construction']}} -->
               </div>
           </div>
         </div>
@@ -186,7 +295,14 @@
           <div class="chaptersTable">
               <div class="chaptersValue">
                 <span>立项依据(说明本项目的目的、意义以及国内外高校现状、市场预测和发展趋势，预期达到的目标，研究的预期效果分析，成果受益面)</span><br/>
-                {{wordData['ProjectBasis']}}
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['ProjectBasis']">
+                </el-input>
+                <!-- {{wordData['ProjectBasis']}} -->
               </div>
           </div>
         </div>
@@ -197,23 +313,58 @@
           <div class="chaptersTable">
               <div class="chaptersValue">
                 <span>创客空间物理环境、制度建设及软件设施建设情况（环境优化/制度完善/设施改造）</span><br/>
-                {{wordData['development']}}
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['development']">
+                </el-input>
+                <!-- {{wordData['development']}} -->
               </div>
               <div class="chaptersValue">
                 <span>学生创客工作室建设情况（工作室数量及活动开展情况）</span><br/>
-                {{wordData['studio']}}
+                <!-- {{wordData['studio']}} -->
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['studio']">
+                </el-input>
               </div>
               <div class="chaptersValue">
                 <span>学生创客团队（人才）培养预期成果、数量</span><br/>
-                {{wordData['studentTeam']}}
+                <!-- {{wordData['studentTeam']}} -->
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['studentTeam']">
+                </el-input>
               </div>
               <div class="chaptersValue">
                 <span>学生创客活动组织实施情况</span><br/>
-                {{wordData['studentActivities']}}
+                <!-- {{wordData['studentActivities']}} -->
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['studentActivities']">
+                </el-input>
               </div>
               <div class="chaptersValue">
                 <span>学生创客团队孵化、转化创业项目情况</span><br/>
-                {{wordData['Transforming']}}
+                <!-- {{wordData['Transforming']}} -->
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['Transforming']">
+                </el-input>
               </div>
           </div>
         </div>
@@ -234,7 +385,14 @@
           <div class="chaptersTable">
               <div class="chaptersValue">
                 <span>基础条件（物理环境/设备设施/项目实施/活动开展/技术力量/社会资源）</span><br/>
-                {{wordData['condition']}}
+                <!-- {{wordData['condition']}} -->
+                <el-input
+                  type="textarea"
+                  class="noCenter"
+                  :autosize="{minRows: 6}"
+                  resize="none"
+                  v-model="wordData['condition']">
+                </el-input>
               </div>
           </div>
         </div>
@@ -447,31 +605,31 @@ import editableDiv from '@/components/editableDiv.vue'
         console.log(this.wordData)
       }
     },
-    directives:{
-      editableDiv:{
-        bind(el,binding){
-          // 将初始数据赋值给元素的innerHTML
-          // el.innerText = binding.value;
-          // 监听元素的input事件，在输入时更新数据
-          console.log(this)
-          el.addEventListener('input',(event)=>{
-            console.log(el.innerText)
-            console.log(binding.value)
-            if (el.innerText !== binding.value) {
-              binding.value = el.innerText;
-              // this.wordData['projectName'] = el.innerText
-              el.dispatchEvent(new Event('input'));
-            }
-          });
-        },
-        update(el,binding){
-          //更新数据时更新元素的innerText
-          if(binding.value!==el.innerText){
-            el.innerText = binding.value;
-          }
-        }
-      }
-    },
+    // directives:{
+    //   editableDiv:{
+    //     bind(el,binding){
+    //       // 将初始数据赋值给元素的innerHTML
+    //       // el.innerText = binding.value;
+    //       // 监听元素的input事件，在输入时更新数据
+    //       console.log(this)
+    //       el.addEventListener('input',(event)=>{
+    //         console.log(el.innerText)
+    //         console.log(binding.value)
+    //         if (el.innerText !== binding.value) {
+    //           binding.value = el.innerText;
+    //           // this.wordData['projectName'] = el.innerText
+    //           el.dispatchEvent(new Event('input'));
+    //         }
+    //       });
+    //     },
+    //     update(el,binding){
+    //       //更新数据时更新元素的innerText
+    //       if(binding.value!==el.innerText){
+    //         el.innerText = binding.value;
+    //       }
+    //     }
+    //   }
+    // },
     mounted(){
       this.getProjectDepartmentData();
     }
@@ -523,6 +681,7 @@ import editableDiv from '@/components/editableDiv.vue'
       box-sizing: border-box;
       border-bottom:solid 1px black;
       .label{
+        position: relative;
         flex:1;
         display: flex;
         justify-content: center;
@@ -801,7 +960,19 @@ import editableDiv from '@/components/editableDiv.vue'
     flex-direction:column;
   }
   :deep(.el-input__inner){
-    min-height: 50px;
+    height: 100%;
+    border-radius: 0;
+    width: 100%;
+    background: none;
+    color: black;
+    text-align: center;
+    font-size: 16px;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+  }
+  :deep(.el-textarea__inner){
+    height: 100%;
     border-radius: 0;
     width: 100%;
     background: none;
@@ -809,6 +980,13 @@ import editableDiv from '@/components/editableDiv.vue'
     text-align: center;
     font-size: 16px;
     box-sizing: border-box;
+    border: none;
+    overflow: hidden;
+  }
+  .noCenter{
+    :deep(.el-textarea__inner ){
+      text-align:left;
+    }
   }
   :deep(.el-date-editor){
     width: 100%;

src/components/editableDiv.vue

@@ -1,18 +1,41 @@
 <template>
     <div class="editable" contenteditable="true"
          v-html="innerText"
+         :contenteditable="canEdit"
+         @focus="isLocked = true"
+         @blur="isLocked = false"
          @input="changeText"></div>
 </template>
 <script>
     export default {
-        props: ['value'],
+        props: {
+            value: {
+                type: String,
+                default: ''
+            },
+            canEdit: {
+                type: Boolean,
+                default: true
+            }
+        },
         data(){
-            return {innerText:this.value}
+            return {
+                innerText: this.value,
+                isLocked: false
+            }
         },
-        methods:{
+        watch: {
+            'value'(){
+                if (!this.isLocked || !this.innerText) {
+                    this.innerText = this.value;
+                }
+            }
+        },
+        methods: {
             changeText(){
-                this.innerText = this.$el.innerHTML;
-                this.$emit('input',this.innerText);
+                if (!this.isLocked || !this.innerText) {
+                    this.$emit('input', this.$el.innerHTML);
+                }
             }
         }
     }
@@ -23,14 +46,12 @@
     width: 100%;
     height: 100%;
     word-break: break-all;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 10px;
     outline: none;
-    &:focus{
-      border:solid 1px #409eff ;
-    }
+    user-select: text;
+    white-space: pre-wrap;
+    text-align: left;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
 }
 </style>