如何将SVG polyline/chevron移至Accordion标题开头？

要实现这个需求，只需要调整模板结构并添加少量CSS样式：

1. 调整图标在模板中的位置 #

在Vue组件的template里，把<svg>元素移到标题文本{{ title }}的前面，这样图标就会默认显示在标题左侧：

修改后的核心template片段：

<template>
<div class="V-accordion">
<div class="V-accordion_trigger" @click="open = !open">
<svg class="V-accordion_trigger-icon" :class="{open:open}" width="40" height="12">
<polyline points="12,10 20,2 28,10" stroke="gold" stroke-width="3" fill="none"></polyline>
</svg>
{{ title }}
</div>
<!-- 其余结构保持不变 -->
</div>
</template>

2. 添加CSS样式优化布局 #

给标题触发栏添加flex布局，让图标和文字垂直居中，同时给图标添加右侧间距，避免和文字紧贴：

修改后的相关CSS代码：

.V-accordion_trigger {
  cursor: pointer;
  padding: 0.7rem 1.5rem;
  transition: all 0.4s;
  display: flex;
  align-items: center; /* 让图标和文字垂直居中 */
}

.V-accordion_trigger-icon {
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  margin-right: 0.5rem; /* 控制图标与文字的间距 */
}

完整修改后的代码 #

CSS部分 #

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font: 100%/1.4 Roboto, sans-serif;
  /*padding: 2em;*/
  color: white;
}

h1,
h2,
h3 {
  margin-bottom: 0.7em;
}

ol,
ul {
  list-style-position: inside;
}


/* accordion component*/

.V-accordion {
  user-select: none;
  border: 1px solid #efefef;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px;
}

.V-accordion+.V-accordion {
  border-top: ;
}

.V-accordion_trigger {
  cursor: pointer;
  padding: 0.7rem 1.5rem;
  transition: all 0.4s;
  display: flex;
  align-items: center;
}

.V-accordion_trigger:hover {
  color: gold/*#477dca*/
  ;
}

.V-accordion_trigger-icon {
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  margin-right: 0.5rem;
}

.V-accordion_trigger-icon.open {
  transform: rotate(180deg);
}

.V-accordion_body {
  padding: 1rem 1.5rem;
  background: /*#f1f1f1*/
  ;
}

.accordion-enter-active {
  animation: accordion 0.5s forwards;
}

.accordion-leave-active {
  animation: accordion 0.2s 0.2s reverse;
}

@-moz-keyframes accordion {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes accordion {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@-o-keyframes accordion {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes accordion {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

HTML/Vue部分 #

<script src="https://unpkg.com/vue@2.2.1"></script>

<div id="app">
  <accordion title="FAQ title 1">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea enim aliquid itaque esse dolorum aperiam, rerum ab possimus voluptatibus modi nobis, maiores quisquam ut sint impedit dignissimos assumenda tempora quam.</p>
  </accordion>
  <accordion title="FAQ title 2">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur</li>
      <li>Lorem ipsum dolor sit amet consectetur</li>
      <li>Lorem ipsum dolor sit amet consectetur</li>
    </ol>
  </accordion>
  <accordion title="FAQ title 3">
    <h3>Lorem ipsum dolor sit amet</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo porro, voluptatum laborum cumque molestiae quibusdam accusamus sed, quam sint ducimus libero distinctio? Dolore laborum, quos dolorem recusandae deleniti quasi.</p>
  </accordion>
</div>

<script>
  Vue.component('accordion', {
    template: `
<div class="V-accordion">
<div class="V-accordion_trigger" @click="open = !open">
<svg class="V-accordion_trigger-icon" :class="{open:open}" width="40" height="12">
<polyline points="12,10 20,2 28,10" stroke="gold" stroke-width="3" fill="none"></polyline>
</svg>
{{ title }}
</div>
<transition :name="animation">
<div class="V-accordion_body" v-show="open">
<slot></slot>
</div>
</transition>
</div>
`,
    props: {
      title: {
        type: String,
        default: 'FAQ'
      },
      animation: {
        type: String,
        default: 'accordion'
      }
    },
    data() {
      return {
        open: false
      }
    }
  });

  const vm = new Vue({
    el: "#app",
    data: {},
    computed: {},
    methods: {},
    mounted() {}
  });
</script>

内容的提问来源于stack exchange，提问作者Eva