1

src/components/common/recursion.vue

+<template>
+  <div>
+    <div v-for="item in children" :key="item.id" >
+        <tophead v-if="item.type == 'head'" :detail="item"></tophead>
+        <recursion :children="item.children"></recursion>
+    </div>
+  </div>
+</template>
+
+<script>
+import tophead from '@/components/scaffold/tophead.vue';
+export default {
+    name: "recursion",
+    props: {
+        children: Array,
+    },
+    components:{tophead},
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/components/scaffold/tophead.vue

+<template>
+  <div>
+      <el-input type="text" placeholder="请输入内容"></el-input>
+      <div class="edit-title">
+          <div contenteditable="true" class="edit-title-inner" :id="detail.id" :style="detail.style">
+                {{detail.displayTitle}}
+                <div class="edit-title-tools displaynone" contenteditable="false">
+                    <span @click="tap('bold')">B</span>
+                    <span @click="tap('italic')">I</span>
+                    <span @click="tap('underline')">U</span>
+                    <span @click="tap('colorpicker')">C</span>
+                </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props:{
+        detail: {
+            type:Object,
+            default: function() {
+                return {
+                    style: {
+                        color:'#000',
+                        'font-weight':'normal',
+                        'text-decoration': 'none',
+                        'font-style': 'normal',
+                    }
+                }
+            }
+        }
+    },
+    methods: {
+        tap(type) {
+            console.log('tap',type)
+            switch(type) {
+                case "bold":
+                    this.toggleStyle('font-weight','bold','normal');
+                    break;
+                case "italic":
+                    this.toggleStyle('font-style','italic','normal');
+                    break;
+                case "underline":
+                    this.toggleStyle('text-decoration','underline','none');
+                    break;
+                case "colorpicker":
+                    // this.toggleStyle('colorpicker','underline','none');
+                    break;
+            }
+            console.log(this.detail)
+        },
+        toggleStyle(styleName,selVal,defVal) {
+            this.detail.style[styleName] = this.detail.style[styleName] != selVal ? selVal : defVal;
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+    .edit-title {
+        position: relative;
+        margin-top: 5px;
+    }
+    .edit-title-inner {
+        position: relative;
+        box-sizing: border-box;
+        height: 100%;
+        padding: 10px;
+        height: auto;
+        &:active,&:focus-visible{
+             outline: rosybrown auto 1px;
+        }
+        &:active > .edit-title-tools,
+        &:focus-visible > .edit-title-tools{
+            display: block;
+        }
+    }
+    .edit-title-tools {
+        position: absolute;
+        bottom: -100%;
+        color:#000;
+        font-weight: normal;
+        font-style: normal;
+        text-decoration: none;
+        cursor: pointer;
+        >span {
+            padding: 5px;
+            background-color: #eee;
+        }
+    }
+</style>
\ No newline at end of file

src/views/Course/create.vue

@@ -46,7 +46,7 @@
                 </el-col>
                 <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
                     <div class="course-edit-inner padding_15 height_100p">
-
+                        <recursion :children="trees"></recursion>
                     </div>
                 </el-col>
             </el-row>
@@ -58,8 +58,12 @@
 </template>
 
 <script>
+import recursion from '@/components/common/recursion.vue';
 let id = 1000;
 export default {
+    components:{
+        recursion
+    },
     data() {
         return {
             activeName: 'first',
@@ -68,6 +72,14 @@ export default {
                 id: 1,
                 label: '首页',
                 isFolder:'folder',
+                type:'head',
+                displayTitle:'内容标题2',
+                style:{ 
+                    'color':'#000',
+                    'font-weight':'normal',
+                    'text-decoration': 'none',
+                    'font-style': 'normal'
+                },
                 children: [{
                     id: 4,
                     label: '页面标题',
@@ -82,7 +94,7 @@ export default {
                         isFolder:'file'
                     }]
                 },{
-                    id: 4,
+                    id: 5,
                     label: '内容页1',
                     isFolder:'file'
                 }]