mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-23 11:59:34 +08:00
feat(docs): import EP in demobox to support Composition API docs (#984)
This commit is contained in:
SkyAo
GitHub
parent
be7b9665bb
commit
15f792de5f
@ -164,7 +164,7 @@ export default {
|
||||
'\n<scr' + `ipt src="//unpkg.com/element-plus/lib/index.full.js"></scr` + 'ipt>'
|
||||
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`
|
||||
let cssTpl = `@import url("//unpkg.com/element-plus/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`
|
||||
let jsTpl = script ? script.replace(/export default/, 'var Main =').trim().replace(/import ({.*}) from 'vue'/g, (s, s1) => `const ${s1} = Vue`) : 'var Main = {}'
|
||||
let jsTpl = script ? script.replace(/export default/, 'var Main =').trim().replace(/import ({.*}) from 'vue'/g, (s, s1) => `const ${s1} = Vue`).replace(/import ({.*}) from 'element-plus'/g, (s, s1) => `const ${s1} = ElementPlus`) : 'var Main = {}'
|
||||
jsTpl += '\n;const app = Vue.createApp(Main);\napp.use(ElementPlus);\napp.mount("#app")'
|
||||
const data = {
|
||||
js: jsTpl,
|
||||
|
||||
@ -15,24 +15,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { h } from 'vue';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
|
||||
openVn() {
|
||||
this.$message({
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
])
|
||||
});
|
||||
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')
|
||||
])
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
@ -44,37 +45,39 @@
|
||||
:::demo 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" @click="open1">消息</el-button>
|
||||
<el-button :plain="true" @click="open1">成功</el-button>
|
||||
<el-button :plain="true" @click="open2">警告</el-button>
|
||||
<el-button :plain="true" @click="open3">消息</el-button>
|
||||
<el-button :plain="true" @click="open4">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open1() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message.error('错了哦，这是一条错误消息');
|
||||
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('错了哦，这是一条错误消息');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
@ -93,40 +96,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open1() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
import { defineComponent } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
open2() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
open1() {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
open2() {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
open3() {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
@ -142,16 +150,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
import { defineComponent } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
openCenter() {
|
||||
ElMessage({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
@ -167,16 +179,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
import { defineComponent } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
openHTML() {
|
||||
ElMessage({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
@ -187,7 +203,7 @@
|
||||
|
||||
### 全局方法
|
||||
|
||||
Element Plus 为 `app.config.globalProperties` 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
|
||||
Element Plus 为 `app.config.globalProperties` 添加了全局方法 $message。因此在 vue instance 中可以采用在 method 中调用 `this.$message` 方法唤起 `ElMessage`。
|
||||
|
||||
### 单独引用
|
||||
|
||||
@ -212,7 +228,7 @@ import { ElMessage } from 'element-plus';
|
||||
| offset | Message 距离窗口顶部的偏移量 | number | — | 20 |
|
||||
|
||||
### 方法
|
||||
调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
|
||||
调用 `ElMessage` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
|
||||
| 方法名 | 说明 |
|
||||
| ---- | ---- |
|
||||
| close | 关闭当前的 Message |
|
||||
|
||||
@ -66,6 +66,7 @@ function genInlineComponentText(template, script) {
|
||||
script = script
|
||||
.replace(/export\s+default/, 'const democomponentExport =')
|
||||
.replace(/import ({.*}) from 'vue'/g, (s, s1) => `const ${s1} = Vue`)
|
||||
.replace(/import ({.*}) from 'element-plus'/g, (s, s1) => `const ${s1} = require('element-plus')`)
|
||||
} else {
|
||||
script = 'const democomponentExport = {}'
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user