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

fix(autocomplete): popper usage (#429)

Browse Source 
* fix(autocomplete): dropdownWidth

* fix: el-popper usage

* test: change test file

* fix: remove storybook doc dir

* test: sleep time
This commit is contained in:
Caaalabash
2020-10-22 14:02:28 +08:00
committed by GitHub
parent 8e95db293c
commit b4c84cc00a
30 changed files with 132 additions and 1343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/message/doc/basic.vue
View File

@@ -1,42 +0,0 @@
<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>

17
packages/message/doc/centered.vue
View File

@@ -1,17 +0,0 @@
<template>
<div>
<el-button class="item" @click="onClick">Centered text</el-button>
</div>
</template>
<script lang="ts">
import Message from '../src/message'
export default {
methods: {
onClick(): void {
Message({ message: 'Centered text', center: true })
},
},
}
</script>

41
packages/message/doc/closeable.vue
View File

@@ -1,41 +0,0 @@
<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>

20
packages/message/doc/html.vue
View File

@@ -1,20 +0,0 @@
<template>
<div>
<el-button class="item" @click="onClick">Use HTML String</el-button>
</div>
</template>
<script lang="ts">
import Message from '../src/message'
export default {
methods: {
onClick(): void {
Message({
message: '<strong>This is <i>HTML</i><strong>',
dangerouslyUseHTMLString: true,
})
},
},
}
</script>

10
packages/message/doc/index.stories.ts
View File

@@ -1,10 +0,0 @@
export default {
title: 'Message',
}
export { default as BaseMessage } from './basic.vue'
export { default as TypeMessages } from './types.vue'
export { default as CloseableMessages } from './closeable.vue'
export { default as CenteredMessages } from './centered.vue'
export { default as HTMLMessages } from './html.vue'
export { default as ManualClose } from './manual_close.vue'

40
packages/message/doc/manual_close.vue
View File

@@ -1,40 +0,0 @@
<template>
<div>
<el-button class="item" @click="handleOpen">Show Message</el-button>
<el-button class="item" @click="handleClose">Close Message</el-button>
</div>
</template>
<script lang="ts">
import Message from '../src/message'
import type { IMessageHandle } from '../src/types'
import { ref } from 'vue'
export default {
setup() {
const messageBanner = ref<IMessageHandle>(null)
// methods
const handleOpen = () => {
if (messageBanner.value) return
messageBanner.value = Message({
message: "This won't close automatically",
duration: 0,
})
}
const handleClose = () => {
if (messageBanner.value) {
messageBanner.value.close()
messageBanner.value = null
}
}
return {
messageBanner,
handleOpen,
handleClose,
}
},
}
</script>

35
packages/message/doc/types.vue
View File

@@ -1,35 +0,0 @@
<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',
})
},
onClickWarning(): void {
Message({
message: 'Warning, this is a warning message',
type: 'warning',
})
},
onClickMessage(): void {
Message({ message: 'This is a message' })
},
onClickError(): void {
Message({ message: 'Error, this is an error message', type: 'error' })
},
},
}
</script>