5分でVuejs + Tailwind基本モード

モデムは、ポップアップやいくつかのフォームの入力を取得する指示を示すから右から様々な目的のために使用することができます.私はあなたが目的のあらゆる種類のために使用できるモードを構築し、入力コレクションからフォームの任意の種類のモードを使用して構築されます.
私たちはこの目的のためにvuejsとtailwindcssを使用します.あなたがスタイルを作成するのを吸うならば、ちょうど行って、hereからモーダルスタイルをつかみます.
私はDOMが準備ができたらすぐにポップアップ命令を作りたいので、私はthisをつかまえました.コードをつかみましょう!

<style>
  dialog[open] {
  animation: appear .15s cubic-bezier(0, 1.8, 1, 1.8);
}

  dialog::backdrop {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(54, 54, 54, 0.5));
    backdrop-filter: blur(3px);
  }


@keyframes appear {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
} 
</style>

<dialog id="myModal" class="h-auto w-11/12 md:w-1/2 p-5  bg-white rounded-md ">

   <div class="flex flex-col w-full h-auto ">
        <!-- Header -->
        <div class="flex w-full h-auto justify-center items-center">
          <div class="flex w-10/12 h-auto py-3 justify-center items-center text-2xl font-bold">
                Modal Header
          </div>
          <div onclick="document.getElementById('myModal').close();" class="flex w-1/12 h-auto justify-center cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          </div>
          <!--Header End-->
        </div>
          <!-- Modal Content-->
           <div class="flex w-full h-auto py-10 px-2 justify-center items-center bg-gray-200 rounded text-center text-gray-500">
             This is a text inside the modal. You can add your content here.
          </div>
          <!-- End of Modal Content-->
        </div>
</dialog>

我々は、DOMにモーダルコンテンツを取得するボタンを使用する必要はありませんので、我々はボタンを使用しません.私たちはそうするためにvuejsライフサイクルメソッドを使用します!
最初に、上記のコードを通過しましょう、私たちはオープンしたらアニメーションオープンを使用しています.私たちは背景を設定しなければならず、背景と背景を使用してぼかしと背景色を見ます.
また、画面上の3 remの特定の遷移を持っているDOMにモーダルが表示されるときのように、X方向の特定の遷移を示すためにキーフレームを使用します.
今、私たちは、すべての要素がDOMでレンダリングされるとすぐに、モードを示すためにvuejsを使用します.

var app = new Vue({
    el: '#app',
    mounted() {
        this.openModal();
    },
    methods : {
        openModal: function() {
            document.getElementById('myModal').showModal()
        }
    }
})

あなたは私のgithubに上記のコードを見つけることができます.コードは基本的にマウントされたライフサイクルメソッドを使用します.
マウントされているものは?要素がDOMでレンダリングされると、基本的にコードを実行する
その他のライフサイクル法:updated, mounted, destroyed, activated.すべてのAPIのhereを見ることができます

あなたがそれを役に立つならば、記事を共有してください!😍