test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(docs): Message code for composition (#2250)

Browse Source 
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu 2021-06-19 02:25:38 +08:00 committed by GitHub
parent 334fe977cb
commit 115292f93e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 796 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
website/docs/en-US/message.md
View File

@ -34,6 +34,37 @@ Displays at the top, and disappears after 3 seconds.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessage('this is a message.');
};
const openVn = () => {
ElMessage({
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
});
};
return {
open,
openVn,
};
},
});
</setup>
-->
```
:::
@ -76,6 +107,44 @@ Used to show the feedback of Success, Warning, Message and Error activities.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage('this is a message.');
};
const open2 = () => {
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
message: 'Warning, this is a warning message.',
type: 'warning',
});
};
const open4 = () => {
ElMessage.error('Oops, this is a error message.');
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -128,6 +197,53 @@ A close button can be added.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage({
showClose: true,
message: 'This is a message.',
});
};
const open2 = () => {
ElMessage({
showClose: true,
message: 'Congrats, this is a success message.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
showClose: true,
message: 'Warning, this is a warning message.',
type: 'warning',
});
};
const open4 = () => {
ElMessage({
showClose: true,
message: 'Oops, this is a error message.',
type: 'error',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -153,6 +269,29 @@ Use the `center` attribute to center the text.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openCenter = () => {
ElMessage({
showClose: true,
message: 'Centered text',
});
};
return {
openCenter,
};
},
});
</setup>
-->
```
:::
@ -178,6 +317,29 @@ Use the `center` attribute to center the text.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openCenter = () => {
ElMessage({
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>',
});
};
return {
openCenter,
};
},
});
</setup>
-->
```
:::

162
website/docs/es/message.md
View File

@ -34,6 +34,37 @@ Se muestra en la parte superior de la pagina y desaparece después de 3 segundos
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessage('this is a message.');
};
const openVn = () => {
ElMessage({
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
});
};
return {
open,
openVn,
};
},
});
</setup>
-->
```
:::
@ -76,6 +107,44 @@ Utilizados para mostrar retroalimentación de Success, Warning, Message y Error
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage('this is a message.');
};
const open2 = () => {
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
message: 'Warning, this is a warning message.',
type: 'warning',
});
};
const open4 = () => {
ElMessage.error('Oops, this is a error message.');
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -128,6 +197,53 @@ Un botón para cerrar que puede ser agregado.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage({
showClose: true,
message: 'This is a message.',
});
};
const open2 = () => {
ElMessage({
showClose: true,
message: 'Congrats, this is a success message.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
showClose: true,
message: 'Warning, this is a warning message.',
type: 'warning',
});
};
const open4 = () => {
ElMessage({
showClose: true,
message: 'Oops, this is a error message.',
type: 'error',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -153,6 +269,29 @@ Utiliza el atributo `center` para centrar el texto.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openCenter = () => {
ElMessage({
showClose: true,
message: 'Centered text',
});
};
return {
openCenter,
};
},
});
</setup>
-->
```
:::
@ -178,6 +317,29 @@ Utiliza el atributo `center` para centrar el texto.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openCenter = () => {
ElMessage({
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>',
});
};
return {
openCenter,
};
},
});
</setup>
-->
```
:::

168
website/docs/fr-FR/message.md
View File

@ -34,6 +34,37 @@ S'affiche en haut de la page et disparaît après trois secondes.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessage('Ceci est un message.');
};
const openVn = () => {
ElMessage({
message: h('p', null, [
h('span', null, 'Message peut être '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
});
};
return {
open,
openVn,
};
},
});
</setup>
-->
```
:::
@ -76,6 +107,46 @@ Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage('Ceci est un message.');
};
const open2 = () => {
ElMessage({
message: 'Félicitations, ceci est un message de succès.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
message: 'Attention, ceci est un avertissement.',
type: 'warning',
});
};
const open4 = () => {
ElMessage.error('Ouups, ceci est une erreur.');
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -128,6 +199,55 @@ Un bouton de fermeture peut être ajouté.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage({
showClose: true,
message: 'Ceci est un message.',
});
};
const open2 = () => {
ElMessage({
showClose: true,
message: 'Félicitations, ceci est un message de succès.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
showClose: true,
message: 'Attention, ceci est un avertissement.',
type: 'warning',
});
};
const open4 = () => {
ElMessage({
showClose: true,
message: 'Ouups, ceci est une erreur.',
type: 'error',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -154,6 +274,30 @@ Utilisez l'attribut `center` pour centrer le texte.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openCenter = () => {
ElMessage({
message: 'Texte centré',
center: true,
});
};
return {
openCenter,
};
},
});
</setup>
-->
```
:::
@ -180,6 +324,30 @@ Utilisez l'attribut `center` pour centrer le texte.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openHTML = () => {
ElMessage({
dangerouslyUseHTMLString: true,
message: '<strong>Ceci est du <i>HTML</i></strong>',
});
};
return {
openHTML,
};
},
});
</setup>
-->
```
:::

162
website/docs/jp/message.md
View File

@ -34,6 +34,37 @@
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessage('this is a message.');
};
const openVn = () => {
ElMessage({
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
});
};
return {
open,
openVn,
};
},
});
</setup>
-->
```
:::
@ -76,6 +107,44 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage('this is a message.');
};
const open2 = () => {
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
message: 'Warning, this is a warning message.',
type: 'warning',
});
};
const open4 = () => {
ElMessage.error('Oops, this is a error message.');
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -128,6 +197,53 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElMessage({
showClose: true,
message: 'This is a message.',
});
};
const open2 = () => {
ElMessage({
showClose: true,
message: 'Congrats, this is a success message.',
type: 'success',
});
};
const open3 = () => {
ElMessage({
showClose: true,
message: 'Warning, this is a warning message.',
type: 'warning',
});
};
const open4 = () => {
ElMessage({
showClose: true,
message: 'Oops, this is a error message.',
type: 'error',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -153,6 +269,29 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openCenter = () => {
ElMessage({
showClose: true,
message: 'Centered text',
});
};
return {
openCenter,
};
},
});
</setup>
-->
```
:::
@ -178,6 +317,29 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const openCenter = () => {
ElMessage({
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>',
});
};
return {
openCenter,
};
},
});
</setup>
-->
```
:::

142
website/docs/zh-CN/message.md
View File

@ -35,6 +35,31 @@
}
})
</script>
<!--
<setup>
import { defineComponent, h } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent ({
setup() {
return {
open() {
ElMessage('只是一条消息提示')
},
openVn() {
ElMessage({
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', { style: 'color: teal' }, 'VNode')
])
});
}
}
}
})
</setup>
-->
```
:::
@ -79,6 +104,38 @@
}
})
</script>
<!--
<setup>
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
setup() {
return {
open1() {
ElMessage.success({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open2() {
ElMessage.warning({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open3() {
ElMessage('这是一条消息提示');
},
open4() {
ElMessage.error('错了哦，这是一条错误消息');
}
}
}
})
</setup>
-->
```
:::
@ -136,6 +193,51 @@
}
})
</script>
<!--
<setup>
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
setup() {
return {
open1() {
ElMessage({
showClose: true,
message: '这是一条消息提示'
});
},
open2() {
ElMessage({
showClose: true,
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
ElMessage({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
ElMessage({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
}
}
})
</setup>
-->
```
:::
@ -165,6 +267,26 @@
}
})
</script>
<!--
<setup>
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
setup() {
return {
openCenter() {
ElMessage({
message: '居中的文字',
center: true
});
}
}
}
})
</setup>
-->
```
:::
@ -194,6 +316,26 @@
}
})
</script>
<!--
<setup>
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
setup() {
return {
openHTML() {
ElMessage({
dangerouslyUseHTMLString: true,
message: '<strong>这是 <i>HTML</i> 片段</strong>'
});
}
}
}
})
</setup>
-->
```
:::