javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): Dialog code for composition (#2164)

Browse Source 
* feat(docs): Dialog code for composition

* feat(docs): dialog code for ElMessageBox

* feat(docs): fix error code for dialog

Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu
2021-06-10 23:55:46 +08:00
committed by GitHub
parent 90bc266491
commit d3c1e8eac7
5 changed files with 632 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
website/docs/en-US/dialog.md
View File

@@ -44,6 +44,33 @@ Dialog pops up a dialog box, and it's quite customizable.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const dialogVisible = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('Are you sure to close this dialog?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
dialogVisible,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -129,6 +156,59 @@ The content of Dialog can be anything, even a table or a form. This example show
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
gridData: [
{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-03',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '120px',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -167,6 +247,22 @@ If a Dialog is nested in another Dialog, `append-to-body` is required.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
outerVisible: ref(false),
innerVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -202,6 +298,21 @@ Dialog's content can be centered.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -245,6 +356,21 @@ When this is feature is enabled, the content under default slot will be destroye
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```
:::tip

126
website/docs/es/dialog.md
View File

@@ -43,6 +43,33 @@ Dialog abre una caja de diálogo, y es bastante personalizable.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const dialogVisible = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('Are you sure to close this dialog?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
dialogVisible,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -131,6 +158,59 @@ El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formu
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
gridData: [
{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-03',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '120px',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -169,6 +249,22 @@ Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
outerVisible: ref(false),
innerVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -203,6 +299,21 @@ El contenido de Diálogo se puede centrar.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -246,6 +357,21 @@ When this is feature is enabled, the content under default slot will be destroye
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```

126
website/docs/fr-FR/dialog.md
View File

@@ -43,6 +43,33 @@ Le Dialog ouvre un modal personnalisable.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const dialogVisible = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('Voulez-vous vraiment quitter ?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
dialogVisible,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -129,6 +156,59 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
gridData: [
{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-03',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '120px',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -167,6 +247,22 @@ Si un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
outerVisible: ref(false),
innerVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -202,6 +298,21 @@ Le contenu du modal peut être centré.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -245,6 +356,21 @@ When this is feature is enabled, the content under default slot will be destroye
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```

126
website/docs/jp/dialog.md
View File

@@ -41,6 +41,33 @@ dialog はdialogボックスをポップアップ表示します。
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const dialogVisible = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('Are you sure to close this dialog?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
dialogVisible,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -126,6 +153,59 @@ dialog の内容は何でも構いません、テーブルやフォームであ
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
gridData: [
{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-03',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '120px',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -162,6 +242,22 @@ dialog の内容は何でも構いません、テーブルやフォームであ
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
outerVisible: ref(false),
innerVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -196,6 +292,21 @@ dialogの内容を中央揃えにすることができます。
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -240,6 +351,21 @@ When this is feature is enabled, the content under default slot will be destroye
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```

128
website/docs/zh-CN/dialog.md
View File

@@ -42,6 +42,35 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const dialogVisible = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('确认关闭？')
.then((_) => {
done();
})
.catch((_) => {
// catch
});
};
return {
dialogVisible,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -126,6 +155,59 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
gridData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '120px',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -162,6 +244,22 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
outerVisible: ref(false),
innerVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -198,6 +296,21 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -239,6 +352,21 @@ Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
centerDialogVisible: ref(false),
};
},
});
</setup>
-->
```