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): Drawer code for composition (#2165)

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

* feat(docs): Drawer code for ElMessageBox

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

157
website/docs/en-US/drawer.md
View File

@@ -51,6 +51,35 @@ Callout a temporary drawer, from multiple direction
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const direction = ref('rtl');
const handleClose = (done) => {
ElMessageBox
.confirm('Are you sure you want to close this?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
direction,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -81,6 +110,21 @@ When you no longer need a title, you can remove title from drawer.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
drawer: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -196,6 +240,90 @@ export default {
}
}
</script>
<!--
<setup>
import {defineComponent, reactive, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const state = reactive({
table: false,
dialog: false,
loading: false,
gridData: [
{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City',
},
],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '80px',
timer: null,
});
const handleClose = (done) => {
if (state.loading) {
return;
}
ElMessageBox
.confirm('Do you want to submit?')
.then((_) => {
state.loading = true;
state.timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
state.loading = false;
}, 400);
}, 2000);
})
.catch((_) => {});
};
const cancelForm = () => {
state.loading = false;
state.dialog = false;
clearTimeout(state.timer);
};
return {
...toRefs(state),
handleClose,
cancelForm,
};
},
});
</setup>
-->
```
:::
@@ -245,6 +373,35 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const innerDrawer = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('You still have unsaved data, proceed?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
innerDrawer,
handleClose,
};
},
});
</setup>
-->
```
:::

157
website/docs/es/drawer.md
View File

@@ -52,6 +52,35 @@ Llamada de un drawer temporal, desde varias direcciones
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const direction = ref('rtl');
const handleClose = (done) => {
ElMessageBox
.confirm('Are you sure you want to close this?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
direction,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -82,6 +111,21 @@ When you no longer need a title, you can remove title from drawer.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
drawer: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -197,6 +241,90 @@ export default {
}
}
</script>
<!--
<setup>
import {defineComponent, reactive, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const state = reactive({
table: false,
dialog: false,
loading: false,
gridData: [
{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City',
},
],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '80px',
timer: null,
});
const handleClose = (done) => {
if (state.loading) {
return;
}
ElMessageBox
.confirm('Do you want to submit?')
.then((_) => {
state.loading = true;
state.timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
state.loading = false;
}, 400);
}, 2000);
})
.catch((_) => {});
};
const cancelForm = () => {
state.loading = false;
state.dialog = false;
clearTimeout(state.timer);
};
return {
...toRefs(state),
handleClose,
cancelForm,
};
},
});
</setup>
-->
```
:::
@@ -246,6 +374,35 @@ También puede tener varias capas de `Drawer` al igual que con `Dialog`.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const innerDrawer = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('You still have unsaved data, proceed?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
innerDrawer,
handleClose,
};
},
});
</setup>
-->
```
:::

157
website/docs/fr-FR/drawer.md
View File

@@ -51,6 +51,35 @@ Callout a temporary drawer, from multiple direction
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const direction = ref('rtl');
const handleClose = (done) => {
ElMessageBox
.confirm('Are you sure you want to close this?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
direction,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -81,6 +110,21 @@ When you no longer need a title, you can remove title from drawer.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
drawer: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -196,6 +240,90 @@ export default {
}
}
</script>
<!--
<setup>
import {defineComponent, reactive, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const state = reactive({
table: false,
dialog: false,
loading: false,
gridData: [
{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City',
},
],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '80px',
timer: null,
});
const handleClose = (done) => {
if (state.loading) {
return;
}
ElMessageBox
.confirm('Do you want to submit?')
.then((_) => {
state.loading = true;
state.timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
state.loading = false;
}, 400);
}, 2000);
})
.catch((_) => {});
};
const cancelForm = () => {
state.loading = false;
state.dialog = false;
clearTimeout(state.timer);
};
return {
...toRefs(state),
handleClose,
cancelForm,
};
},
});
</setup>
-->
```
:::
@@ -245,6 +373,35 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const innerDrawer = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('You still have unsaved data, proceed?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
innerDrawer,
handleClose,
};
},
});
</setup>
-->
```
:::

157
website/docs/jp/drawer.md
View File

@@ -52,6 +52,35 @@ Since v-model is natively supported for all components, `visible.sync` has been
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const direction = ref('rtl');
const handleClose = (done) => {
ElMessageBox
.confirm('Are you sure you want to close this?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
direction,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -82,6 +111,21 @@ Since v-model is natively supported for all components, `visible.sync` has been
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
drawer: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -197,6 +241,90 @@ export default {
}
}
</script>
<!--
<setup>
import {defineComponent, reactive, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const state = reactive({
table: false,
dialog: false,
loading: false,
gridData: [
{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City',
},
{
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City',
},
],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '80px',
timer: null,
});
const handleClose = (done) => {
if (state.loading) {
return;
}
ElMessageBox
.confirm('Do you want to submit?')
.then((_) => {
state.loading = true;
state.timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
state.loading = false;
}, 400);
}, 2000);
})
.catch((_) => {});
};
const cancelForm = () => {
state.loading = false;
state.dialog = false;
clearTimeout(state.timer);
};
return {
...toRefs(state),
handleClose,
cancelForm,
};
},
});
</setup>
-->
```
:::
@@ -246,6 +374,35 @@ export default {
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const innerDrawer = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('You still have unsaved data, proceed?')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
innerDrawer,
handleClose,
};
},
});
</setup>
-->
```
:::

151
website/docs/zh-CN/drawer.md
View File

@@ -51,6 +51,34 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const direction = ref('rtl');
const handleClose = (done) => {
ElMessageBox
.confirm('确认关闭')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
direction,
handleClose,
};
},
});
</setup>
-->
```
:::
@@ -81,6 +109,21 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
drawer: ref(false),
};
},
});
</setup>
-->
```
:::
@@ -197,6 +240,88 @@ export default {
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const state = reactive({
table: false,
dialog: false,
loading: false,
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 弄',
},
],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '80px',
timer: null,
});
const handleClose = (done) => {
if (state.loading) {
return;
}
ElMessageBox
.confirm('确定要提交表单吗？')
.then((_) => {
state.loading = true;
state.timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
state.loading = false;
}, 400);
}, 2000);
})
.catch((_) => {});
};
const cancelForm = () => {
state.loading = false;
state.dialog = false;
clearTimeout(state.timer);
};
return {
...toRefs(state),
handleClose,
cancelForm,
};
},
});
</setup>
-->
```
:::
@@ -247,7 +372,33 @@ export default {
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const drawer = ref(false);
const innerDrawer = ref(false);
const handleClose = (done) => {
ElMessageBox
.confirm('还有未保存的工作哦确定关闭吗？')
.then((_) => {
done();
})
.catch((_) => {});
};
return {
drawer,
innerDrawer,
handleClose,
};
},
});
</setup>
-->
```
:::