Vue.js로 처리를 기다리는 태클이 나오는 버튼을 만들었어요.

11499 단어 Vue.js
안녕하십니까, 저는 고양이 치즈입니다.

처리를 기다리는 동안 태클 버튼을 만들 기회가 있기 때문에 이곳에서 만든 것을 공유한다.
실제로 쓴 것은 단일 파일 구성 요소이지만 이번에는 초보자도 복제품으로 동작을 쉽게 확인할 수 있도록 npm 버전의 Vue를 사용하고 있다.

흐르다


대체로 이런 집행 순서다.
  • 사용자 버튼 누르기
  • 차량 표시
  • 비동기식 처리 시작
  • 비동기식 처리 종료
  • 태클 사라짐

    • 코드


    "C"로고의 마이크로 모뎀은 CSS의 border 등을 사용하여 만든 것이다.
    마이크로프로세서 이미지를 직접 준비하고 싶으신 분은 span.spinner 부분을img 라벨로 바꿔 주세요.
    다음은 코드(약 130줄)
    index.html 등 파일 이름으로 저장하면 바로 이동합니다.
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>クルクル待機ボタン</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        /* ボタン */
        .async-button {

            /* 見た目など */
            padding: 0.4em 0.8em;
            font-size: inherit;
            background: #36b5b0;
            color: white;
            outline: none;
            border-radius: 6px;
            cursor: pointer;

            /* 子要素のスピナーをposition:absolute;にするため */
            position: relative;

            /* 文字の位置をpaddingで動かすため */
            transition: padding 0.4s ease;
        }

        /* ボタンが待機中のとき */
        .async-button.waiting {
            padding-left: 2em;  /* スピナー分のスペースを空ける */
        }

        /* ボタンが押せない状態のとき */
        .async-button:disabled {
            background: gray;
            cursor: not-allowed;
        }

        /* スピナー（回転するC） */
        .spinner {

            /* 位置 */
            position: absolute;
            left: 0.7em;
            top: 0.6em;

            /* スピナーの形を作る */
            display: inline-block;
            width: 0.7em;
            height: 0.7em;
            border: 2px solid;
            border-bottom: 2px solid transparent;
            border-radius: 100%;

            /* アニメーションの指定 */
            animation: spin 1s infinite;
        }

        /* 回転アニメーションの中身 */
        @keyframes spin {
            from { transform: rotateZ(0deg); }
            to { transform: rotateZ(360deg); }
        }

        /* スピナーが登場&消えるときの動き */
        .fade-enter-active, .fade-leave-active {
            transition: all .4s;
        }
        .fade-enter, .fade-leave-to {
            left: 0;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id='app'>
        <async-button @click='do_something' :waiting='doing'>なにかのボタン</async-button>
    </div>

    <script>

        new Vue({
            el: '#app',

            data: {
                doing: false,   // 処理実行中か否か
            },

            methods: {

                // 何かしらの処理を行う
                do_something() {
                    this.doing = true

                    // 何秒後かに処理が終了する
                    setTimeout(() => {
                        this.doing = false
                    }, 2000 + Math.random() * 3000)
                },
            },

            components: {

                // ボタンのコンポーネント
                'async-button': {

                    template: `
                        <button class='async-button' :class='{waiting}' :disabled='waiting' @click="$emit('click')">
                            <transition name='fade'>
                                <span class='spinner' v-if='waiting'></span>
                            </transition>
                            <slot></slot>
                        </button>
                    `,

                    props: {
                        // 処理の待機中か否か
                        waiting: {
                            type: Boolean,
                            default: false,
                        }
                    },
                },
            },
        })
    </script>
</body>
</html>

    고양이 치즈


    고등학교 1학년 때부터 어플리케이션 제작에 몰두해 왔고, 지금은 어플리케이션 창작자로서 분투 중이다.
    나는 올해 4월부터 인터넷 브라이언 주식회사에서 디자이너로 일하고 있다.
    트위터 고양이 치즈
    https://twitter.com/miyauchoi
    헬로 캣치즈
    https://blog.miyauchi-akira.app/post/20190927/
    제품 조합
    https://miyauchi-akira.app
    [낙곡] 프로세스 함수와 귀속 P1036 선택
    매트릭스 채우기 문제

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage