mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
e900aac6ea
* 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>
43 lines
1015 B
Vue
43 lines
1015 B
Vue
<template>
|
|
<div class="wrapper">
|
|
<el-button class="item" @click="onClick">Show Message</el-button>
|
|
<el-button class="item" @click="onClickVNode">VNode</el-button>
|
|
<el-button class="item" @click="onClickGlobal">Global Method</el-button>
|
|
<el-button class="item" @click="onClickClose">Close All</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Message from '../src/message'
|
|
import { createVNode } from 'vue'
|
|
|
|
export default {
|
|
methods: {
|
|
onClick(): void {
|
|
Message({ message: 'This is a message' })
|
|
},
|
|
onClickVNode(): void {
|
|
const h = createVNode
|
|
const vnode = h('p', null, [
|
|
h('span', null, 'Message can be a '),
|
|
h('i', { style: 'color: teal' }, 'VNode'),
|
|
])
|
|
Message({ message: vnode })
|
|
},
|
|
onClickGlobal(): void {
|
|
this.$message('Using global method')
|
|
},
|
|
onClickClose(): void {
|
|
this.$message.closeAll()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrapper {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
}
|
|
</style>
|