ElementUI + Vue when using el-dialog, how to do in the pop-up dialog, the outside was locked, instead of clicking directly off the external leads dialog.
Problem Description
Today, in doing Element + Vue project found that: Dialog open state, click on the area outside of the Dialog cause the Dialog closed; the correct status should only click on the Close button, or other operational within Dialog button to make Dialog of the state to shut down.
problem analysis
If the logical vue, you may need to do what navigation guard, appeared to be very complicated, in fact:
elementUi doing initialization of Dialog components, the default so that the Dialog Click outside the assembly areas can cause the component to close, so elementUI will expose the property allows developers to configure.
By official document query ElementUI, and found a 'close-on-click-modal ' property in Dialog, the property is the default value 'True', the role is: Can I turn off Dialog by clicking modal.
Therefore, by providing the close-on-click-modal attribute in Dialog is 'false', the problem can be solved.
Problem solving
- A solution: the close-on-click-modal attribute in Dialog to 'false'.
- Note that: when using the close-on-click-modal property, must be added in front of the property ":."
- Solving way: through before-close property, when the Dialog is closed, allowing the user to confirm whether to shut down.
- before-close only when a user clicks an icon to close off or mask Dialog onset. slot was added for closing the Dialog button if you named in the footer, you can join the relevant logic before-close the callback button's click.
Practice Code
- A solution:
<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>
- Solving way:
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <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 }; }, methods: { handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); } } }; </script>