2

今日、私は非常に奇妙で珍しい問題に遭遇し、誰かがすでにその問題に遭遇したかどうか、および修正可能かどうかを知りたいと思いました。問題は、このすぐ下のコードからわかるように、Vue コンポーネントに Element-UI ライブラリのダイアログ要素が含まれていることです。コンポーネントをロードすると、ダイアログの背後の色が通常の灰色がかったトーンから完全な黒になり、灰色がかった色に戻ることを除いて、奇妙なことは何もありません。アニメーションが白から灰色がかった色になり、消えると白に戻るはずです。理解を深めるために、2 つのスクリーンショットと共にコードをここに配置しました。

<template>
  <div>
    <el-dialog
      title="Choose a month to pre-load"
      :visible.sync="dialog"
      width="40%"
      center>
      <p>You can choose to load now the data you are going to use throughout the session. Just pick a month</p>
      <div class="block">
        <el-date-picker
          v-model="choosenMonth"
          type="month"
          placeholder="Pick a month">
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="loadMonth()">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
      return {
        dialog: true,
        choosenMonth: '',
      };
    }
  }
</script>

GIF

ダイアログでもスタイルを使用しなかったため、スタイルは省略しました。また、ご覧のとおり、テンプレート、スクリプト、スタイルの両方をコンポーネントとして同じファイルに記述しています。

誰かが最も遠いアイデアを持っている場合でも、何か提案してください. よろしくお願いします！

編集

状況をよりよく表しているので、2 つの画像の代わりに gif を追加しました。

4

2 に答える 2

1

modalAppendToBody = falseという名前の小道具を追加することで回避策を見つけました。したがって、これにより、親コンテナーに関するダイアログが追加されます。以下はスニペットです。

<el-dialog
        v-if="isInvite"
        :visible.sync="isInvite"
        :modalAppendToBody="false"
        >
        <h1>heelllooo</h1>
    </el-dialog>
于 2021-03-23T04:52:08.873 に答える