element-plus/packages/message/doc/closeable.vue
Bruno Santos e900aac6ea
Feat/message (#291)
* feat(message): add message component

- [WIP] Messages component
- TODOs: tests, VNode Bug

re #101

* test(message): add tests for message component

* fix(message): fix message z-index

Co-authored-by: Herrington Darkholme <2883231+HerringtonDarkholme@users.noreply.github.com>
2020-10-03 20:55:23 +08:00

42 lines
1.0 KiB
Vue

<template>
<div class="wrapper">
<el-button class="item" @click="onClickSuccess">success</el-button>
<el-button class="item" @click="onClickWarning">warning</el-button>
<el-button class="item" @click="onClickMessage">message</el-button>
<el-button class="item" @click="onClickError">error</el-button>
</div>
</template>
<script lang="ts">
import Message from '../src/message'
export default {
methods: {
onClickSuccess(): void {
Message({
message: 'Congrats, this is a success message',
type: 'success',
showClose: true,
})
},
onClickWarning(): void {
Message({
message: 'Warning, this is a warning message',
type: 'warning',
showClose: true,
})
},
onClickMessage(): void {
Message({ message: 'This is a message', showClose: true })
},
onClickError(): void {
Message({
message: 'Error, this is an error message',
type: 'error',
showClose: true,
})
},
},
}
</script>