vueでテレポートしてみたり

こんにちは、アプリケーション開発部門の岡田です。

現在自分は新規プロジェクトにてvueを用いて管理画面の開発を行っています。
vueにはv-modelやv-bind、v-forといったvue独自の機能があるのですが、それ以外にも色々な機能があります。
その中でもこの機能は助かった！と強く感じた機能があったのでそのうちのいくつかを紹介したいと思います。
 

Transition機能

これは＜Transition＞というタブで挟み込むことで、挟まれた要素を表示する際にアニメーションをかけ、「ブワッ」と表示されたり、逆に消える際に「ふわっ」と消えることができるようになる機能です。

使い方としてはアニメーションをかけたい要素をTransitionというタブで挟めばOKです。

ただTransition機能はそれにもう一つ記入する必要のあるものがあります。
それはnameです。nameに固有の名前を与えてあげれば、その要素に対してどのようなタイミングでどのような動きを実行するかをstyle欄に記入することで動作します。

<template>
 

<style＞

Teleport機能

これはTeleportというタブで挟み込んだ要素をvueプロジェクト内のHTML要素に対して表示させるというものです。
今回の管理画面ではダイアログを複数、何重にも表示する必要があり、加えてポジションを多用していることから表示がどうしてもずれてしまい、合わせたと思っても画面幅変えたらやっぱりずれている！という場面が多々ありました。
しかしこれを使用すると大元のHTML要素に対して表示を行うことができるため、複雑なポジションの関係性を気にする必要なく綺麗に表示することが可能です。
 

使用方法としては<Teleport>タブで要素を囲み、合わせてto=" "と記入してあげればOKです。
今回の場合to="body"とすることでHTML要素内のbodyめがけて表示がされたのでした。
 
ちなみにこのteleportですがtransitionと合わせて使用することで気軽に綺麗なダイアログコンポーネントを作成可能です。
公式にも紹介があるのでぜひ確認してみてください。

v-deep

これはコンポーネント内のCSSに作用するための技です。
vueは知っての通りコンポーネント指向のフレームワークですが、作業していく中でどうしても、「この場所だけ色変えたいな。。。」とか「ここだけ幅もう少し広めならなぁ。。」といった状況に遭遇します。ただそれらのコンポーネントがプロジェクト内に作られたばかりの物ならいざ知らず、そうでないものに関しては内部のCSSを変更することが難しい場合も出てくると思います。
 

そのときに使用できるのがv-deepです。変更を加えたいプロパティ名をデベロッパーツールなどで確認し、例えばこのように表記することで中のCSSに作用させることができます。

ただ、このような書き方だと._color_primaryが存在するコンポーネントや要素全てに作用する可能性があるので注意が必要です。
そのため

・styleタブにscopedを記入し一つのファイル内に止める。

・変化を加えたい要素を別のdivタブなどで囲い、そのコンポーネントだけを指定する。

といったことを忘れないよう注意してください。
二つ目のものに関してはこんな感じです。

ちなみにv-deepは現在、::deepでも>>>でも/deep/でも記入自体は可能なようですが、調べているとv-deepという書き方が一番安定してそうだったので私はこの書き方を使用しています。
 

vueは他にもslot専用のCSSの書き方であったり、まだ公式に実装は発表されていないものの実装予定の機能としてsuspencseがあったりと色々あるので、また機会があればお伝えしたいと思います。

ではまた！