表格选项增加拼音

src/components/Adult/inputModules/Table.vue

@@ -18,7 +18,7 @@
         style="border-bottom: 1px #ccc solid; margin-bottom: 20px"
       >
         <div class="adult-book-input-item">
-          <span class="adult-book-lable">表头:</span>
+          <span class="adult-book-lable">表头：</span>
           <el-radio-group v-model="curQue.isHeader" @change="changeHeader"
             >     
             <el-radio :label="true">有</el-radio>
@@ -108,28 +108,41 @@
             @blur="curQue.hintTitle = curQue.hintTitle.trim()"
           ></el-input>
         </div>
-
         <div
-          class="adult-book-input-item"
           v-for="(item, htindex) in curQue.hintOtion"
           :key="'hint' + htindex"
         >
-          <span class="adult-book-lable">提示选项：</span>           
-          <el-input
-            type="textarea"
-            class="adult-book-input"
-            :autosize="{ minRows: 2 }"
-            placeholder="请输入提示内容"
-            v-model="item.con"
-            @blur="item.con = item.con.trim()"
-          ></el-input>
-          <img
-            @click="deleteHint(htindex)"
-            class="close"
-            src="../../../assets/adult/del-close.png"
-            alt=""
-          />
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">提示选项：</span>           
+            <el-input
+              type="textarea"
+              class="adult-book-input"
+              :autosize="{ minRows: 2 }"
+              placeholder="请输入提示内容"
+              v-model="item.con"
+              @blur="item.con = item.con.trim()"
+            ></el-input>
+            <img
+              @click="deleteHint(htindex)"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+          </div>
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">选项拼音：</span>           
+            <el-input
+              type="textarea"
+              class="adult-book-input"
+              :autosize="{ minRows: 2 }"
+              placeholder="请输入选项拼音"
+              v-model="item.pinyin"
+              @blur="item.pinyin = item.pinyin.trim()"
+            ></el-input>
+            <el-button @click="getPinyin(item)">生成拼音</el-button>
+          </div>
         </div>
+
         <div class="addoption" @click="addHint">添加选项</div>
       </div>
     </div>
@@ -284,6 +297,7 @@ export default {
         hintOtion: [
           {
             con: "",
+            pinyin: "",
           },
         ],
       },
@@ -293,6 +307,23 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 点击生成拼音
+    getPinyin(item) {
+      let bool = false;
+      let value = "";
+      if (item.con == "") {
+        this.$message.warning("请先输入内容,再生成拼音");
+        bool = true;
+      } else {
+        value = item.con;
+      }
+      if (bool) {
+        return;
+      }
+      let result = pinyinUtil.getPinyin(value);
+      item.pinyin = result;
+      this.$forceUpdate()
+    },
     // 删除提示选项
     deleteHint(index) {
       if (this.curQue.hintOtion.length <= 1) {