背景

サーバーレスで自分用の家計簿的なwebサービスを勉強も兼ねて開発中。前の投稿で編集ダイアログの開発が終わった。が、問題発覚。

問題

自分のPCで開発している時には何の問題もなし（ちょっとデザイン改善したいけど）。

が、デプロイして、自分のモバイルで見た時に問題発覚。デザインだだ崩れ。

データの編集自体は出来る。が、自分が使うだけという条件を加味してもこの崩れは許容しがたい。ポイントは２つ。

ボタンが2列になってる。
日付入力の幅が変

対策開始

日々の入力、更新はモバイルになる予定(将来PCメインで使用する色々分析画面付けるかもしれないが)。
モバイルに合わせるとPC側が寂しいのでデバイスによって分けたい。
理想的にはPC用とモバイル用で別ページ作ってしまう事。
操作性までPC用とモバイル用で分ける程の画面ではない。

という事を考えていたら、レスポンシブWEBデザイン、メディアクエリという技術を知る。デバイスの種類、画面幅によってcssなどを切り替えられるらしい。

変更ポイント探り

画面サイズによって切り替えるとしても、コンポーネントで指定されている値を修正するので、その上書きポイントを探る。ChromeだとF12の開発者モード。

開発者モードのエリアの左上にあるボタンでモバイル表示モード。画面上部でサイズ指定。モバイルボタン横にある要素指定モードにしてからダイアログのDOM要素を探し、そのデザインcssを右エリアで確認。

index.css にて、 el-dialog クラスにwidth:50% が指定されているのが原因。
同様に、日付入力コンポーネントの幅指定をしているものを探す。
index.css にて、.el-date-editor.el-input, .el-date-editor.el-input__innerに、 **width: 220px;**が指定してあるのが原因。

モバイルの場合、ダイアログ幅は280px程度、その状態で、日付入力が160px程度がよさそう。切り替えは、画面サイズ640px以下としようと思います。

実装

style scopedタグ配下に書けば行けるかと思ったけど、どうも他コンポーネントを直接指定するのは出来ないっぽい。多分コンパイル対象から外れる。しかも、el-dialogは、DOM構成がtemplateと実際とで変わる様子。とはいえグローバルのcssで指定するのは避けたい。色々調べてみたら、どうやら**>>> コンビネータ**を使うとよいらしい。ネストダイアログも無いので大丈夫そう。

ダイアログTemplateの一番外のタグにclass属性追加。

<template>
  <el-dialog title="入力" :visible.sync="slipDialogVisible" class="slipinputdlg">
  <!-- 中略 -->
  </el-dialog>
</template>

そのクラスの配下、という形で指定。**<style scoped>**タグ配下で、以下指定。

@media (max-width:640px) {
  .slipinputdlg >>> .el-dialog {
    width: 280px;
  }
  .slipinputdlg >>> .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 160px;
  }
}

参考ページ
Vue Componentのstyleを上書きするには
 スコープ付き CSS

結果

直りました！ちゃんとこのダイアログ中のel-dialogクラスだけ幅指定されるようになってますね。

感想

このダイアログに限らないが、ちょっと複雑な事をしようとすると、 javascriptとか html とか css とかの webページ基本知識が必要になってくる（と思う）。
Element.uiはモバイルの画面幅は考慮されてなさそう。とはいっても、下手に考慮しようとしてもかえってカオスになるか・・