diff --git a/FAQ.md b/FAQ.md index 8e99f1984..a52f03bc7 100644 --- a/FAQ.md +++ b/FAQ.md @@ -57,6 +57,12 @@ ``` +
+所有组件的任意属性都支持 `.sync` 修饰符吗？ + +不是。对于支持 `.sync` 修饰符的属性，我们会在文档的 API 表格中注明。更多 `.sync` 的用法请查看 [Vue 文档](https://vuejs.org/v2/guide/components.html#sync-Modifier)。 +
+
你们的文档怎么偷偷更新了？ @@ -144,6 +150,12 @@ Now you can use them as you do with built-in icons. For example, in `el-input`: ```
+
+Can I use `.sync` modifier on every attribute? + +No, only a few attributes supports the `.sync` modifier, and we have explicitly marked them on the documentation's API table. For more information about `.sync`, please refer to [Vue documentation](https://vuejs.org/v2/guide/components.html#sync-Modifier). +
+
When do you update documentations of Element? diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md index 5729f0a1c..8ed07c91d 100644 --- a/examples/docs/en-US/dialog.md +++ b/examples/docs/en-US/dialog.md @@ -36,9 +36,6 @@ }; }, methods: { - openDialog() { - this.$refs.dialogBind.open(); - }, handleClose(done) { this.$confirm('Are you sure to close this dialog?') .then(_ => { @@ -58,14 +55,14 @@ Informs users while preserving the current page state. Dialog pops up a dialog box, and it's quite customizable. -:::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog. Finally, this example demonstrates how `before-close` is used. +:::demo Set the `visible` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. Finally, this example demonstrates how `before-close` is used. ```html click to open the Dialog This is a message @@ -106,7 +103,7 @@ The content of Dialog can be anything, even a table or a form. This example show open a Table nested Dialog - + @@ -117,7 +114,7 @@ The content of Dialog can be anything, even a table or a form. This example show open a Form nested Dialog - + @@ -180,6 +177,7 @@ The content of Dialog can be anything, even a table or a form. This example show | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | +| visible | visibility of Dialog, supports the .sync modifier | boolean | — | false | | title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — | | size | size of Dialog | string | tiny/small/large/full | small | | top | value for `top` of Dialog CSS, works when `size` is not `full` | string | — | 15% | @@ -200,17 +198,8 @@ The content of Dialog can be anything, even a table or a form. This example show | title | content of the Dialog title | | footer | content of the Dialog footer | -### Methods -Each `el-dialog` instance has the following methods that can be used to open/close the instance without explicitly changing the value of `v-model`: - -| Method | Description | -|------|--------| -| open | open the current instance | -| close | close the current instance | - ### Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | open | triggers when the Dialog opens | — | | close | triggers when the Dialog closes | — | - diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md index c52de482a..47e881378 100644 --- a/examples/docs/en-US/pagination.md +++ b/examples/docs/en-US/pagination.md @@ -50,7 +50,7 @@ Add more modules based on your scenario. @@ -61,7 +61,7 @@ Add more modules based on your scenario. @@ -84,7 +84,7 @@ Add more modules based on your scenario. `, `total`, `slot` | 'prev, pager, next, jumper, ->, total' | | page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] | diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md index 08fcd6043..9b2d697ad 100644 --- a/examples/docs/zh-CN/dialog.md +++ b/examples/docs/zh-CN/dialog.md @@ -36,9 +36,6 @@ }; }, methods: { - openDialog() { - this.$refs.dialogBind.open(); - }, handleClose(done) { this.$confirm('确认关闭？') .then(_ => { @@ -79,14 +76,14 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。 -:::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。本例通过显式改变`v-model`的值来打开 Dialog，此外我们还为 Dialog 实例提供了`open`和`close`方法，可以通过调用它们来打开/关闭 Dialog。最后，本例还展示了`beforeClose`的用法。 +:::demo 需要设置`visible`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了`beforeClose`的用法。 ```html 点击打开 Dialog 这是一段信息 @@ -126,7 +123,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 打开嵌套表格的 Dialog - + @@ -137,7 +134,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 打开嵌套表单的 Dialog - + @@ -199,6 +196,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | +| visible | 是否显示 Dialog，支持 .sync 修饰符 | boolean | — | false | | title | Dialog 的标题，也可通过具名 slot （见下表）传入 | string | — | — | | size | Dialog 的大小 | string | tiny/small/large/full | small | | top | Dialog CSS 中的 top 值（仅在 size 不为 full 时有效） | string | — | 15% | @@ -218,13 +216,6 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 | title | Dialog 标题区的内容 | | footer | Dialog 按钮操作区的内容 | -### 方法 -每个 `el-dialog` 实例都暴露了如下方法，用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例： -| 方法名 | 说明 | -|------|--------| -| open | 打开当前实例 | -| close | 关闭当前实例 | - ### Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | diff --git a/examples/docs/zh-CN/pagination.md b/examples/docs/zh-CN/pagination.md index b89d3fdc4..a5df7a7fa 100644 --- a/examples/docs/zh-CN/pagination.md +++ b/examples/docs/zh-CN/pagination.md @@ -50,7 +50,7 @@ @@ -61,7 +61,7 @@ @@ -99,7 +99,6 @@ console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { - this.currentPage = val; console.log(`当前页: ${val}`); } }, @@ -120,7 +119,6 @@ export default { methods: { handleSizeChange(val) { - this.currentPage = val; console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { @@ -204,7 +202,7 @@ | page-size | 每页显示条目个数 | Number | — | 10 | | total | 总条目数 | Number | — | — | | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — | -| current-page | 当前页数 | Number | — | 1 | +| current-page | 当前页数，支持 .sync 修饰符 | Number | — | 1 | | layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' | | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — | [10, 20, 30, 40, 50, 100] | diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue index 0ab2a1a5e..1086ea74a 100644 --- a/packages/dialog/src/component.vue +++ b/packages/dialog/src/component.vue @@ -84,18 +84,10 @@ }, beforeClose: Function }, - data() { - return { - visible: false - }; - }, watch: { - value(val) { - this.visible = val; - }, visible(val) { - this.$emit('input', val); + this.$emit('update:visible', val); if (val) { this.$emit('open'); this.$el.addEventListener('scroll', this.updatePopper); @@ -137,7 +129,7 @@ }, mounted() { - if (this.value) { + if (this.visible) { this.rendered = true; this.open(); } diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js index b21762ff4..19af6624c 100644 --- a/packages/message-box/src/main.js +++ b/packages/message-box/src/main.js @@ -79,7 +79,7 @@ const showNextMsg = () => { } instance.action = ''; - if (!instance.value || instance.closeTimer) { + if (!instance.visible || instance.closeTimer) { if (msgQueue.length > 0) { currentMsg = msgQueue.shift(); @@ -110,7 +110,7 @@ const showNextMsg = () => { document.body.appendChild(instance.$el); Vue.nextTick(() => { - instance.value = true; + instance.visible = true; }); } } @@ -199,7 +199,7 @@ MessageBox.prompt = (message, title, options) => { }; MessageBox.close = () => { - instance.value = false; + instance.visible = false; msgQueue = []; currentMsg = null; }; diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue index a21a5d020..47ca76354 100644 --- a/packages/message-box/src/main.vue +++ b/packages/message-box/src/main.vue @@ -1,6 +1,6 @@