Element UI dialog dialogエリア外をクリックするとdialogが閉じます

需要説明
今日、Element+Vueプロジェクトを行う時、1つの需要に出会った:甲はDialogが開いた状態で、このDialog以外の区域をクリックすると、このDialogが閉じることを要求する;正しい状態は、閉じるボタンをクリックするか、Dialog内の他の操作性ボタンをクリックしてこそ、Dialogの状態を閉じることができるはずです.
もんだいぶんせき
このような問題が発生するのは、elementUIがDialogコンポーネントを初期化する際に、デフォルトでこのDialogをコンポーネント以外の領域をクリックさせるとコンポーネントが閉じてしまうため、elementUIは必ずこの属性を露出して開発者に構成させるからです.ElementUIの公式ドキュメントを検索すると、Dialogの下に「close-on-click-modal」属性があり、この属性のデフォルト値は「True」で、modalをクリックしてDialogを閉じることができるかどうかを確認します.したがって、Dialogのclose-on-click-modalプロパティをfalseに設定することで、この問題を解決できます.
問題解決方法

解決策1:Dialogの下のclose-on-click-modal属性を「false」に変更します.

close-on-click-modalプロパティを使用する場合は、そのプロパティの前に「:」を付ける必要があります.

<el-button type="text" @click="dialogVisible = true">     Dialog</el-button>

<el-dialog
  title="  "
  :visible.sync="dialogVisible"
  width="30%"
  :close-on-click-modal='false'>
  <span>      </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">   </el-button>
    <el-button type="primary" @click="dialogVisible = false">   </el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    }
  };
</script>