生词模板 扩展例句

src/components/Adult/Preview.vue

@@ -1103,7 +1103,7 @@ export default {
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    console.log("2023-10-21");
+    console.log("2023-10-30");
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {

src/components/Adult/common/NewordPhraseModule.vue

@@ -127,6 +127,7 @@
                 @blur="trimEvent(i)"
                 maxlength="200"
                 show-word-limit
+                style="width:500px;"
               ></el-input>
               <img
                 @click="deletecn(i)"
@@ -150,6 +151,35 @@
             show-word-limit
           ></el-input>
         </div>
+        <div class="Book_flex_start">
+          <span class="adult-book-lable">例句：</span>
+          <div>
+            <div
+              class="adult-book-input-item"
+              v-for="(item, i) in curQueItem.liju_list"
+              :key="i"
+            >
+              <el-input
+                type="textarea"
+                class="adult-book-input"
+                :autosize="{ minRows: 2 }"
+                placeholder="请输入释义"
+                v-model="curQueItem.liju_list[i]"
+                @blur="trimEventLiju(i)"
+                maxlength="200"
+                show-word-limit
+                style="width:500px;"
+              ></el-input>
+              <img
+                @click="deleteLiju(i)"
+                class="close"
+                src="../../../assets/adult/del-close.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <div class="addoption" @click="AddLiju">添加例句</div>
         <div class="adult-book-input-item">
           <Upload
             :changeFillId="changeMp3"
@@ -196,6 +226,10 @@ export default {
       let str = this.curQueItem.definition_list[i].trim();
       this.$set(this.curQueItem.definition_list, i, str);
     },
+    trimEventLiju(i) {
+      let str = this.curQueItem.liju_list[i].trim();
+      this.$set(this.curQueItem.liju_list, i, str);
+    },
     // 删除释义
     deletecn(index) {
       if (this.curQueItem.definition_list.length <= 1) {
@@ -204,6 +238,14 @@ export default {
       }
       this.curQueItem.definition_list.splice(index, 1);
     },
+    // 删除例句
+    deleteLiju(index) {
+      if (this.curQueItem.liju_list.length <= 1) {
+        this.$message.warning("至少要保留一个");
+        return;
+      }
+      this.curQueItem.liju_list.splice(index, 1);
+    },
     // 点击生成拼音
     getPinyin(item) {
       console.log(item);
@@ -225,6 +267,10 @@ export default {
     Addcn() {
       this.curQueItem.definition_list.push("");
     },
+    // 添加例句
+    AddLiju() {
+      this.curQueItem.liju_list.push("");
+    },
     changeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];

src/components/Adult/inputModules/Neword.vue

@@ -203,6 +203,7 @@ export default {
               pinyin_site: "first", //拼音位置
               motif_color: false, //主题色
               collocation: '', // 搭配
+              liju_list: [""], // 例句
             },
           ],
         ],
@@ -472,6 +473,9 @@ export default {
             if(!items.hasOwnProperty("collocation")){
                 this.$set(items, "collocation", '')
             }
+            if(!items.hasOwnProperty("liju_list")){
+                this.$set(items, "liju_list", [""])
+            }
         })
       });
       // this.curQue = JSON.parse(JSON.stringify(data));

src/components/Adult/preview/WordPhrase.vue

@@ -260,6 +260,12 @@
               <div v-if="sItem.collocation" class="collocation">
                 <span>搭配：</span><b v-html="sItem.collocation"></b>
               </div>
+              <div v-if="sItem.liju_list&&sItem.liju_list.length>0&&sItem.liju_list[0]" class="collocation">
+                <span>例句：</span>
+                <div>
+                    <b v-html="items" v-for="(items,indexs) in sItem.liju_list" :key="indexs"></b>
+                </div>
+              </div>
             </div>
           </li>
         </ul>
@@ -767,19 +773,25 @@ export default {
       .collocation{
         width: 100%;
         display: flex;
-        padding-top: 16px;
+        padding-top: 8px;
         >span{
             color: #000;
             font-size: 16px;
             font-weight: 400;
             line-height: 24px;
+            width: 50px;
+            flex-shrink: 0;
+        }
+        >div b{
+            display: block;
         }
-        >b{
+        >b, >div b{
             flex: 1;
             color: rgba(0, 0, 0, 0.65);
             font-size: 16px;
             font-weight: 400;
             line-height: 24px;
+            font-family: 'robot', 'FZJCGFKTK';
         }
       }
     }