web-dev-qa-db-ja.com

「動的な幅」、つまりwidth = "unset"を使用しているときに、vダイアログに遷移を適用するにはどうすればよいですか？

基本的に、私はv-dialog内に含まれるフォームコンポーネントを作成しています。フォームコンポーネントには、選択した入力に基づいてレンダリングされるさまざまな子コンポーネントがあります。そのため、ダイアログの幅がその内容に一致するように拡大されるように、vダイアログの幅を「未設定」に設定する必要があります。

幅の値を切り替えると、トランジションが機能します（例：450pxまたは300px）。問題は、ダイアログに含まれるフォームの幅が事前にわからないため、動的な幅を使用する必要があることです。

これまでのところ、動的な幅を使用した場合にトランジションを実現する方法を見つけることができません。 refを使用してフォームコンポーネントの幅を取得しようとしましたが、幅を設定解除して、遷移を防止しました。ちなみに、私が話しているトランジションは幅のトランジションです。固定幅を使用すると、ナイストランジションが表示されますが、動的な幅は表示されません。

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-dialog v-model="dialog" width="unset">
        <template v-slot:activator="{ on }">
          <v-btn color="red lighten-2" dark v-on="on">
            Click Me
          </v-btn>
        </template>
        <v-card>
          <v-select v-model="selectedForm" :items="items">
          </v-select>
          <div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
          <div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="dialog = false">
              I accept
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</div> 

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      selectedForm: "form-a",
      items: ["form-a", "form-b"],
      dialog: false
    };
  }
});

固定幅を使用するためのcodepen： https://codepen.io/duongthienlee/pen/MWaBLXm
動的幅を使用するためのcodepen： https://codepen.io/duongthienlee/pen/GRpBzmL

Codepenで作成した例では、すでに幅を定義していますが、実際のケースでは、form-aおよびform-b​​コンポーネントの幅が事前にわからないことに注意してください。 form-aとform-b​​の幅は、v-dialogである親divによって継承されるため、v-dialogの幅を設定解除したのはこのためです。 「動的な幅」の意味の例：form-aには選択入力があります。ユーザーがアイテムを選択すると、サーバーに入力ラベルを取得する要求が出されます。したがって、form-aはサーバーからの応答本文に基づいて複数の入力フィールドをレンダリングします。応答の本文には、ラベルとデフォルト値の情報が含まれます。つまり、form-aの幅が動的になります。

htmlcssvue.jsvuetify.jstransition
4
Thien Ly

私があなたを正しく理解していれば、cssを使用してこれを行うことができます。フォームのすべての修正幅を次のように置き換えることができます

  width: fit-content;

たとえばあなたのコードペンでは：

.form-a {
  width: fit-content;
  height: 350px;
  background: blue;
}
.form-b {
  width: fit-content;
  height: 500px;
  background: red;
}
0
Jake Lam

V-dialogは、クラスv-dialogでdivにレンダリングされます： v-dialog width set to 300 or 450

v-dialog width set to unset

幅が既知の値の場合にのみアニメーションが機能するようです。そのため、単に「設定解除」することはできません。解決策は、子要素の幅を取得し、それに応じて変数を使用してvダイアログの幅を設定することです。

子要素の幅を取得する方法については VueJS get Width of Div を参照してください。

うまくいくかどうか教えてください、これはとても面白いと思います。

0
Stefani