Ver código fonte

feat: 模板中添加使用滚动文本组件

HOME\tianlin01 11 meses atrás
pai
commit
5b1b2e6f9c

+ 28 - 14
src/components/dialog/TemplateAssetChooseDialog/index.vue

@@ -58,7 +58,7 @@
             </el-scrollbar>
           </div>
           <div
-            v-if="isMedia"
+            v-if="selectedWidget.type == 'CMedia'"
             class="l-flex__auto l-flex"
           >
             <directory-tree
@@ -223,7 +223,7 @@
             </div>
           </div>
           <div
-            v-else
+            v-if="selectedWidget.type == 'CText'"
             class="l-flex__auto l-flex--col"
             style="margin-left: 16px;"
           >
@@ -242,6 +242,19 @@
               @customPaste="onCustomPaste"
             />
           </div>
+          <div
+            v-if="selectedWidget.type == 'CMarquee'"
+            class="l-flex__auto l-flex"
+            style="margin-left: 16px;"
+          >
+            <el-input
+              v-model="selectedWidget.text"
+              type="textarea"
+              placeholder="请填写内容"
+              :rows="23"
+              @keydown.enter.native="onKeyEnter($event)"
+            />
+          </div>
           <!--          放在底层,用截图封面图片-->
           <div style="position: absolute;top:10px;left: 10px;z-index: -1;">
             <div
@@ -348,7 +361,6 @@ export default {
       isStream: false,
       selectedWidget: null, //
       program: null,
-      isMedia: true,
       editor: null,
       richHtml: '',
       toolbarConfig: {
@@ -368,7 +380,8 @@ export default {
       },
       editorConfig: {
         placeholder: '请输入内容...'
-      }
+      },
+      inputValue: ''
     }
   },
   computed: {
@@ -474,6 +487,10 @@ export default {
     this.updateInputValues()
   },
   methods: {
+    onKeyEnter (e) {
+      e.stopPropagation()
+      e.preventDefault()
+    },
     checkRatio () {
       if (this.canvasStyles) {
         return
@@ -638,11 +655,11 @@ export default {
         message
       })
     },
-    // 使用右侧的文本编辑器
-    showText (widget) {
-      this.isMedia = false
-      this.richHtml = widget.text
-    },
+    // 使用右侧的文本编辑器 或  富文本编辑器
+    // 暂无功能
+    // showText (widget) {
+    //   // this.richHtml = widget.text
+    // },
     // 使用右侧图片视频选择器
     showMediaChoose (widget) {
       console.log('showMediaChoose', widget)
@@ -958,6 +975,7 @@ export default {
         case WidgetType.IMAGE:
         case WidgetType.VIDEO:
         case WidgetType.TEXT:
+        case WidgetType.MARQUEE:
           return true
         default:
           return false
@@ -987,11 +1005,7 @@ export default {
       if (!this.selectedWidget || this.selectedWidget !== widget) {
         this.selectedWidget = widget
         console.log('selectedWidget:', widget)
-        if (this.selectedWidget.type === 'CText') {
-          this.isMedia = false
-          this.showText(widget)
-        } else {
-          this.isMedia = true
+        if (this.selectedWidget.type === 'CMedia') {
           this.showMediaChoose(widget)
         }
       }