五线谱代码 结构优化

src/views/rhythm/components/staff/staff.vue

@@ -13,15 +13,28 @@
             {{ index + 1 }}
          </div> -->
          <div class="notes" v-for="(notes, i) in measure" :key="i">
-            <div :class="['note', `note${note.beams.length ? 4 : note.type}${note.rest ? 'rest' : ''}`]" v-for="(note, k) in notes" :key="k">
-               <template v-for="(line, b) in note.beams">
-                  <div :class="['noteLine', `line${b}`]" :key="b" v-if="!['end', 'backward hook'].includes(line)"></div>
-                  <div :class="['noteLine', `line${b}`, 'noteBackWardLine', b > 0 ? 'left' : 'right']" :key="b" v-if="line === 'backward hook'"></div>
-               </template>
-               <component :is="beatSvgObj[note.beams.length ? 4 : `${note.rest ? 'rest' : ''}${note.type}`]" />
-               <div :class="['dot', note.rest && `dotRest${note.type}`]" v-if="note.dot"></div>
-               <img class="rhythmImg" src="../imgs/paishou.png" />
-            </div>
+            <template v-for="(note, k) in notes" :key="k">
+               <!-- 连接音符 -->
+               <div v-if="note.beams.length" class="note" :class="['note4']">
+                  <template v-for="(line, b) in note.beams">
+                     <div :class="['noteLine', `line${b}`]" :key="b" v-if="!['end', 'backward hook'].includes(line)"></div>
+                     <div
+                        :class="['noteLine', `line${b}`, 'noteBackWardLine', b > 0 ? 'left' : 'right']"
+                        :key="b"
+                        v-if="line === 'backward hook'"
+                     ></div>
+                  </template>
+                  <component :is="beatSvgObj[4]" />
+                  <div :class="['dot']" v-if="note.dot"></div>
+                  <img class="rhythmImg" src="../imgs/paishou.png" />
+               </div>
+               <!-- 单个音符 -->
+               <div v-else class="note" :class="[`note${note.type}${note.rest ? 'rest' : ''}`]">
+                  <component :is="beatSvgObj[`${note.rest ? 'rest' : ''}${note.type}`]" />
+                  <div :class="['dot', note.rest && `dotRest${note.type}`]" v-if="note.dot"></div>
+                  <img class="rhythmImg" src="../imgs/paishou.png" />
+               </div>
+            </template>
          </div>
       </template>
    </div>