【错误记录】【vue3.js】在vue3中的消息提示框无法正常显示，改写为vue2的写法

最新推荐文章于 2024-07-08 15:35:02 发布

原创最新推荐文章于 2024-07-08 15:35:02 发布 · 948 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

IT成长笔记专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一种在Vue3项目中使用Element UI Plus样式的方法，通过采用Vue2的写法解决了样式不生效的问题，并提供了代码示例。

问题提出

这个是官网（elementUI plus官网）上的样式：
在这里插入图片描述
在引入到自己的代码程序中，我也希望用这样的样式，但是却没有任何的反应

解决办法

我并没有找到vue3的写法，但是通过vue2的写法能够显示出来：

下面就是我找到的能够显示出来的方法（）
写在方法中
运行结果就是（成功按钮改为了vue2的写法，警告按钮还是原来的官网上的写法，然后能够通过界面进行展示成功按钮，警告按钮无任何效果）：

后记

将写法改为vue2的写法能够快速解决问题，但是vue3应该怎么来写，这个等后面研究了再来写，但是我找到了一篇别人的文章：
https://blog.youkuaiyun.com/qq_40185480/article/details/110926273
希望对于那些希望尽快知道的朋友提供帮助

附：

我的页面的html代码程序(需要几个js文件和css，在我分享的资源下载里面能够找得到，免费下载的（本来人家官网也有）)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
  <script src="axios.min.js"></script>
  <script src="vue3.js"></script>
  <!--      加载样式     在css样式中  它明确定义了fonts的路径  和该文件同文件夹下-->
  <link rel="stylesheet" href="elementUI/index.css">

  <script src="elementUI/index.full.js"></script>

    <style>
        #box{
            /*border: 1px  solid  red ;*/
            margin: 200px auto;
            width: 400px;
            height: 300px;
        }
        #app{
            /*background: url("images/鬼刀2.jpg") no-repeat;*/
            background: url("images/海边，少女.jpg") no-repeat ;
            background-size: cover;
        /*    size的cover是保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同*/
        /*    size的contain是保存图像的狂爱比例 将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含*/
        }
    </style>

</head>
<body id="app">
    <div id="box">
        <el-card class="box-card">


        <h3 >登 录</h3>
        <el-divider></el-divider>

            <el-form  status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账户" prop="">
                    <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" >
                    <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-link type="primary" style="margin-right: 20px">注册</el-link>
                    <el-link type="primary">忘记密码？</el-link>
                    <el-button  type="primary" style="float:right;margin-right: 20px" @click="login">登录</el-button>
                    <el-button :plain="true" @click="open1">成功</el-button>
                    <el-button :plain="true" @click="open3">警告</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

<script>
    // import { defineComponent } from 'vue3'
    // import { ElMessage } from 'element-plus'

  var data = {
    data(){
        return{
            loginForm:{
                username:"",
                password:"",
            },

        }

    },
    created(){

    },
    methods:{
        open1() {
            this.$message.success({
                message: '恭喜你，这是一条成功消息',
                type: 'success'
            });
        },
        open3() {
            ElMessage({
                showClose: true,
                message: '警告哦，这是一条警告消息',
                type: 'warning'
            });
        },

        login(){
            ElMessage.success({
                message: '恭喜你，这是一条成功消息',
                type: 'success'
            });

            console.log(this.loginForm);
            // alert("提交信息");
            //发送数据请求到后端去
            // axios.post("/login",this.loginForm).then(res=>{
                // alert(res.data);
                // this.$message.success({


        //     })
        }

    }

  };
  const app = Vue.createApp(data);
  // elementui 的plus版本  需要加上 下面这一句话，
  app.use(ElementPlus);
  app.mount("#app");


</script>

</body>
</html>