作者：美多小涛_584 | 来源：互联网 | 2023-07-23 19:40
把主要文件下载下来vue.js&＃xff0c;element.js&＃xff0c;element.css下载下来(点击vue.js&＃xff0c;粘贴复制即可&＃xff0c;其他的一样)
我们也要把这两个字体样式拿下来&＃xff0c;地址是&＃xff1a;
element-icons.woff
element-icons.ttf
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge"><title>elementUI本地引入</title>
</head>
<body>
<div id&＃61;"app"><div class&＃61;"t_container"><el-button type&＃61;"text" &＃64;click&＃61;"dialogTableVisible &＃61; true" style&＃61;"color:#487bff">用户中心</el-button><el-dialog title&＃61;"用户中心" :visible.sync&＃61;"dialogTableVisible" style&＃61;"position: absolute"><el-tabs v-model&＃61;"activeName" &＃64;tab-click&＃61;"handleClick"><el-tab-pane label&＃61;"个人信息管理" name&＃61;"first"><el-form label-position&＃61;"right"label-width&＃61;"120px":model&＃61;"UserMessage"style&＃61;"font-size:16px"><el-row><el-col :span&＃61;"12"><el-form-item label&＃61;"用户名&＃xff1a;"><span class&＃61;"lh29">{{UserMessage.username}}</span></el-form-item></el-col><el-col :span&＃61;"12"><el-form-item label&＃61;"性别&＃xff1a;"><span class&＃61;"lh29">{{UserMessage.gender&＃61;&＃61;&＃39;1&＃39;?&＃39;男&＃39;:&＃39;女&＃39;}}</span></el-form-item></el-col></el-row><el-row><el-col :span&＃61;"12"><el-form-item label&＃61;"部门&＃xff1a;"><span class&＃61;"lh29">{{UserMessage.departmentName}}</span></el-form-item></el-col><el-col :span&＃61;"12"><el-form-item label&＃61;"岗位(角色)&＃xff1a;"><span class&＃61;"lh29">{{UserMessage.role}}</span></el-form-item></el-col></el-row><el-row><el-col :span&＃61;"12"><el-form-item label&＃61;"职称&＃xff1a;"><span class&＃61;"lh29">{{UserMessage.title}}</span></el-form-item></el-col><el-col :span&＃61;"12"><span v-else class&＃61;"lh29">{{UserMessage.address}}</span></el-form-item></el-col></el-row></el-form></el-tab-pane><el-tab-pane label&＃61;"密码管理" name&＃61;"second"><div class&＃61;"password-update"><el-form label-position&＃61;"right"label-width&＃61;"120px":model&＃61;"Password"style&＃61;"font-size:16px"><el-form-item label&＃61;"旧密码&＃xff1a;"><el-input v-model&＃61;"Password.oldPassword"show-password></el-input></el-form-item><el-form-item label&＃61;"新密码&＃xff1a;"><el-input v-model&＃61;"Password.newPassword"show-password></el-input></el-form-item><el-form-item label&＃61;"确认密码&＃xff1a;"><el-input v-model&＃61;"Password.newPasswordAgain"show-password></el-input></el-form-item><el-form-item><el-button type&＃61;"primary">确定</el-button></el-form-item></el-form></div></el-tab-pane></el-tabs></el-dialog></div>
</div>
</body><link rel&＃61;"stylesheet" href&＃61;"element/element.css">
<script src&＃61;"element/vue.js"></script>
<script src&＃61;"element/element.js"></script>
<script>new Vue({el: &＃39;#app&＃39;,data: function() {return {activeName: &＃39;second&＃39;,dialogTableVisible: false,isEdit: false,UserMessage: {username: &＃39;XXX&＃39;,gender: 1,departmentName: &＃39;XXX&＃39;,role: &＃39;XXX&＃39;,title: &＃39;XXX&＃39;,address: &＃39;XXX&＃39;},Password: {oldPassword: &＃39;&＃39;,newPassword: &＃39;&＃39;,newPasswordAgain: &＃39;&＃39;},}},methods: {handleClick(tab, event) {console.log(tab, event);},editUserInfo () {this.isEdit &＃61; true}}})
</script>
</html>
提示&＃xff1a;
<link rel&＃61;"stylesheet" href&＃61;"element/element.css">
<script src&＃61;"element/vue.js"></script>
<script src&＃61;"element/element.js"></script>
这三个文件的顺序很重要
- 效果图
备注&＃xff1a; 来源于https://blog.csdn.net/bingot/article/details/85071075?depth_1-utm_source&＃61;distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source&＃61;distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1
京公网安备 11010802041100号