css에서는 Vue와 SVG로 구현할 수없는 무차별 디자인을 구현합니다.

8936 단어 Vue.jsSVG

디자이너의 무차 흔들림



이런 연설 거품을 구현한다고 말한 적이 있습니까?



텍스트 부분은 동적으로 바뀝니다라는 부분입니다.

이것이 어떻게 css로 실현되는지 생각해 보겠습니다.
  • 까다로운 css 쓰고 조정하는 것도 귀찮습니다. △ 는 빠듯할 수 있지만, 테두리 붙이는 것은 무리.
  • 이야기하고 디자인을 조정하는 것도 귀찮습니다.

  • css는 버리고 SVG


  • SVG로 HTML에 내장하면 간단합니까?
  • Vue.js라면 svg 를 template 에 신음할 것이다.

  • 문서 를 보면 할 수 있을 것 같다.

    해봤어



    adobeXD로 만든 풍선을 svg로 출력하여 vue를 붙였습니다.
    
    <template>
      <!-- eslint-disable max-len -->
      <div v-bind:style="{ display: 'inline-block', width: size }">
        <svg viewBox="0 0 209.001 51">
          <defs>
              <filter id="合体_1" width="209.001" height="51" x="0" y="0" filterUnits="userSpaceOnUse">
                  <feOffset dx="3" dy="3"/>
                  <feGaussianBlur result="blur" stdDeviation="1.5"/>
                  <feFlood flood-color="#5d5d5d" flood-opacity=".161"/>
                  <feComposite in2="blur" operator="in"/>
                  <feComposite in="SourceGraphic"/>
              </filter>
          </defs>
          <g id="サジェストバルーン" transform="translate(1.5 1.5)">
              <g class="cls-5" transform="translate(-1.5 -1.5)">
                  <g id="合体_1-2" class="cls-1" data-name="合体 1">
                      <path d="M-7208.498 45.5H-7371.5a17.882 17.882
                      0 0 1-12.728-5.271c-3.399-3.4-5.272-7.92-5.272-12.728s1.873-9.329 5.272-12.728c3.4-3.4
                        7.92-5.272 12.728-5.272h78.001l.15-.2 3.35-4.467 3.35 4.467.15.2h78.001c4.808 0 9.328
                        1.872 12.727 5.272 3.4 3.4 5.273 7.92 5.273 12.728s-1.873 9.328-5.273 12.728c-3.399
                        3.4-7.92 5.272-12.727 5.272z" class="cls-3" transform="rotate(180 -3594.25 23.75)"
                        />
                      <path d="M-7208.498 45c4.674 0 9.069-1.82 12.374-5.125a17.385 17.385 0 0 0
                      5.126-12.374c0-4.675-1.82-9.07-5.126-12.375a17.385 17.385 0 0 0-12.374-5.125h-78.25l-.3-.4-2.951-3.934-2.95
                      3.934-.3.4h-78.25c-4.675 0-9.07 1.82-12.375 5.125A17.386 17.386 0 0 0-7389 27.501c0 4.674 1.82 9.069 5.126
                        12.374a17.386 17.386 0 0 0 12.374 5.126h163.002m0 1H-7371.5c-10.217 0-18.5-8.283-18.5-18.5 0-10.218 8.283-18.5
                        18.5-18.5h77.751l3.75-5 3.75 5h77.751c10.217 0 18.5 8.282 18.5 18.5 0 10.217-8.283 18.5-18.5 18.5z"
                          class="cls-4"
                          transform="rotate(180 -3594.25 23.75)"
                          />
                  </g>
              </g>
              <text id="テキスト" x="50%" y="50%" text-anchor="middle" class="cls-2">
                  <slot></slot>
              </text>
          </g>
        </svg>
      </div>
    </template>
    <script lang="ts">
    import Vue, { PropType } from 'vue';
    
    export default Vue.extend({
      props: {
        size: {
          type: String as PropType<string>,
          default: '100%',
        },
      },
    });
    </script>
    <style>
    
        .cls-1{fill:#fff}
        .cls-2,.cls-4{fill:#2f73dd}
        .cls-2{font-size:12px;}
        .cls-3,.cls-4{stroke:none}
        .cls-5{filter:url(#合体_1)}
    </style>
    

    했던 일



    중요한 변화는 이것뿐입니다.
    - svg의 style 요소는 style로 이동합니다.
    - 텍스트를 넣고 싶은 곳은 slot로 변경

    과제


  • css 와 비교하면(자) , 정말로 그대로 표현할 수 있고 , 실장 코스트도 거의 걸리지 않기 때문에 압승입니다.
  • 디자인 툴 사용할 수 없는 사람에게는 괴로울지도 모릅니다만, 디자이너씨에게 부탁하면 OK일까?
  • 과제는 연설 거품 크기를 넘었을 때 마음대로 커지고 싶다 (html의 auto적인)입니다 (방법을 잘 모른다)
  • 좋은 웹페이지 즐겨찾기