Element 快速入门

最新推荐文章于 2024-03-23 19:05:49 发布

CarleH

最新推荐文章于 2024-03-23 19:05:49 发布

阅读量419

点赞数

分类专栏： Web 文章标签： elementui vue.js

本文链接：https://blog.csdn.net/CarleH/article/details/115283671

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Element 官方文档： https://element.eleme.cn/#/zh-CN/component/installation

Vue 官方文档： https://cn.vuejs.org/v2/guide/

第一步： 引入相关资源

<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- 引入element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

第二步： 使用 Message 消息提示组件

调用 Message 或 this.$message 会返回当前 Message 的实例。常用的参数有：message 表示消息文字内容；type 表示主题，其它参数可查阅 Message官方文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element 快速入门</title>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element-ui组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{info}}</h1>
        <el-button :plain="true" @click="open">错误</el-button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                info: " Message 消息提示 "
            },
            methods: {
                open() {
                    this.$message({
                        message: "这是一个警告信息",
                        type: "warning"
                    })
                }
            }
        })
    </script>
</body>
</html>

第三步： 效果图
在这里插入图片描述

CarleH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element 快速入门

Element 官方文档： https://element.eleme.cn/#/zh-CN/component/installationVue 官方文档： https://cn.vuejs.org/v2/guide/第一步：引入相关资源<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><!-- 引入element-ui样
复制链接

扫一扫