vue 外部js 调用el-message
时间: 2023-11-28 07:47:22 浏览: 43
可以通过在外部JS文件中引入Vue和Element UI库,并$mount方法手动挂载一个Vue实例来调用el-message组件。
例如:
```html
<!-- 在HTML文件中引入Vue和Element UI库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<!-- 在外部JS文件中手动挂载Vue实例 -->
const vm = new Vue({
el: '#app',
mounted() {
this.$message({
message: 'Hello World',
type: 'success'
});
}
});
```
其中,`#app`是一个存在于HTML文件中的元素,用来作为Vue实例的挂载点。在`mounted`钩子中调用`this.$message`方法即可弹出一个成功提示框。
相关问题
vue 的 外部js文件 调用el-message
在 Vue 的外部 JS 文件中使用 Element UI 的 el-message 组件,需要先在 HTML 中引入 Element UI 的 JS 和 CSS 文件,然后在 JS 文件中使用以下代码:
```javascript
// 引入 Element UI 的 JS 和 CSS 文件
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/index.js';
// 在 Vue 的外部 JS 文件中使用 el-message 组件
Element.Message({
message: '这是一条消息提示',
type: 'success'
});
```
需要注意的是,在 Vue 的外部 JS 文件中使用 Element UI 组件,需要先引入 Element UI 的 JS 和 CSS 文件,并且在使用组件之前,需要先创建 Element 对象,可以使用以下代码:
```javascript
// 创建 Element 对象
var Element = require('element-ui');
Vue.use(Element);
```
vue 引入的 外部js文件 调用el-message
可以通过以下步骤引入外部js文件并调用el-message:
1. 在Vue组件中的`<script>`标签中使用`import`语句引入外部js文件,例如:
```
import myJsFile from './myJsFile.js'
```
2. 在需要调用el-message的地方,使用`this.$message`即可调用,例如:
```
this.$message({
message: '这是一条消息',
type: 'success'
})
```
注意:如果外部js文件中也需要使用`this.$message`,则需要在Vue实例中先定义`message`属性,例如:
```
new Vue({
el: '#app',
message: Message,
...
})
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)