问题提出
这个是官网(elementUI plus官网)上的样式:
在引入到自己的代码程序中,我也希望用这样的样式,但是却没有任何的反应
解决办法
我并没有找到vue3的写法,但是通过vue2的写法能够显示出来:
下面就是我找到的能够显示出来的方法()
运行结果就是(成功按钮改为了vue2的写法,警告按钮还是原来的官网上的写法,然后能够通过界面进行展示成功按钮,警告按钮无任何效果):
后记
将写法改为vue2的写法能够快速解决问题,但是vue3应该怎么来写,这个等后面研究了再来写,但是我找到了一篇别人的文章:
https://blog.csdn.net/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>