v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
JavaScript

vue.jsで開閉式のメニューを作る

はじめに 久々のVue.jsですが、今回は開閉式のメニューをコンポーネントで作っていきたいと思います。下記の感じのクリックすると開いたり、閉じたりする感じのコンポーネントですね。 アコーディオンって呼ばれ方をする場合もあります。 実装パート HTML部分 以下のようなソースコードになります。数字を振ってあるので、順番に解説していきます。 ①@clickイベント @clickはv-onの省略形です。v-onで見えている部分をクリックするとtoggleというイベントが発火するようにしています。toggleの処理はscriptの部分で書きます。 ②transitionを指定 transitionでイベント時の動き方を指定しています。transitionでは動きに対して、そのフェイズ毎に状態を指定することができます。 今回は以下の4パターンで指定しています。具体的な状態はscriptにて記載しています。 ③v-showにて表示・非表示切り替え v-showで”show”状態なら括った要素を表示できるようにしています。showがtrueかfalseかは@clickイベントのtoggleにて切り替えられるようにしています。 script部分 ①showの初期値 showの初期値はfalseで指定指定して、閉じています。 ②toggleイベント toggleイベントの処理に、showの切り替えを入れています。これにより、クリックする度に表示・非表示が切り替わります。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (22)
JavaScript

JavaScriptでライブラリを使わずにトーストを実装する

はじめに デザインコーディングの延長で、JavaScriptでトーストの実装を行う機会がありました。toast.jsなどのライブラリを使った方法もあったのですが、どれも柔軟性に欠け、思い通りに要素をいじれなかったので、ピュアなJavaScriptを使い実装しました。 完成物 ボタンを押すと緑色のトーストが出てきます。「登録完了」とかで使われるやつです。 ソースコード github:https://github.com/gunners6518/blog/tree/master/toast 解説 html部分 headタグの中身はいらないので、bodyタグの中だけ。 そんなに難しいコードではないですね。id=”toast”で括っている部分がトーストとして表示させたい要素。初期状態では非表示にしています。buttonには直接styleを打ち込んでいますが、これは真似しなくて良いです!笑 JavaScript部分 まず1,2行目に出てくる”document.querySelector(“セレクタ名”);”。これはセレクタ名に一致する要素を1つ取得してきてくれます。 似ているものに”document.querySelectorAll(“セレクタ名”);”はセレクタ名に一致する要素を全て取ってくれます。 今回は#toastを持つ要素をtoast。.buttonを持つ要素をbuttonとJavaScript内で定義しています。 次の”button.addEventListener(“click”, () => {処理})”では、先ほど定義したbuttonがクリックされた時に{処理}を行うというスクリプトです。 …

Read More
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping