|
@@ -235,9 +235,10 @@ Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下
|
|
|
:::
|
|
|
|
|
|
### 居中布局
|
|
|
-标题和底部采用居中布局
|
|
|
|
|
|
-:::demo 将 `center` 设置为 `true` 即可使标题和底部居中,同时为了防止破坏内容的布局,内容默认是不居中的
|
|
|
+标题和底部可水平居中
|
|
|
+
|
|
|
+:::demo 将 `center` 设置为 `true` 即可使标题和底部居中。
|
|
|
|
|
|
```html
|
|
|
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
|
|
@@ -266,6 +267,10 @@ Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下
|
|
|
```
|
|
|
:::
|
|
|
|
|
|
+:::tip
|
|
|
+`center` 仅影响标题和底部区域。Dialog 的内容是任意的,在一些情况下,内容并不适合居中布局。如果需要内容也水平居中,请自行为其添加 CSS。
|
|
|
+:::
|
|
|
+
|
|
|
:::tip
|
|
|
如果 `visible` 属性绑定的变量位于 Vuex 的 store 内,那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符,同时监听 Dialog 的 `open` 和 `close` 事件,在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
|
|
|
:::
|