.html文件中引入element ui 的方法

把主要文件下载下来vue.js，element.js，element.css下载下来(点击vue.js，粘贴复制即可，其他的一样)我们也要把这两个字体样式拿下来，地址是：element-icons.woffelement-icons.ttf目录结构代码中引入<!DOCTYPE html><html lang="en"><head><meta charset

海绵老呆

14632人浏览 · 2022-03-29 10:39:43

海绵老呆 · 2022-03-29 10:39:43 发布

把主要文件下载下来vue.js，element.js，element.css下载下来(点击vue.js，粘贴复制即可，其他的一样)

我们也要把这两个字体样式拿下来，地址是：
element-icons.woff
element-icons.ttf

目录结构

代码中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elementUI本地引入</title>
</head>
<body>
<div id="app">
    <div class="t_container">
        <el-button type="text" @click="dialogTableVisible = true" style="color:#487bff">用户中心</el-button>
        <el-dialog title="用户中心" :visible.sync="dialogTableVisible" style="position: absolute">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="个人信息管理" name="first">
                    <el-form label-position="right"
                             label-width="120px"
                             :model="UserMessage"
                             style="font-size:16px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="用户名：">
                                    <span class="lh29">{{UserMessage.username}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别：">
                                    <span class="lh29">{{UserMessage.gender=='1'?'男':'女'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="部门：">
                                    <span class="lh29">{{UserMessage.departmentName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="岗位(角色)：">
                                    <span class="lh29">{{UserMessage.role}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="职称：">
                                    <span class="lh29">{{UserMessage.title}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <span v-else class="lh29">{{UserMessage.address}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="密码管理" name="second">
                    <div class="password-update">
                        <el-form label-position="right"
                                 label-width="120px"
                                 :model="Password"
                                 style="font-size:16px">
                            <el-form-item label="旧密码：">
                                <el-input v-model="Password.oldPassword"
                                          show-password></el-input>
                            </el-form-item>
                            <el-form-item label="新密码：">
                                <el-input v-model="Password.newPassword"
                                          show-password></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码：">
                                <el-input v-model="Password.newPasswordAgain"
                                          show-password></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">确定</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</div>
</body>

<link rel="stylesheet" href="element/element.css">
<script src="element/vue.js"></script>
<script src="element/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                activeName: 'second',
                dialogTableVisible: false,
                isEdit: false,
                UserMessage: {
                    username: 'XXX',
                    gender: 1,
                    departmentName: 'XXX',
                    role: 'XXX',
                    title: 'XXX',
                    address: 'XXX'
                },
                Password: {
                    oldPassword: '',
                    newPassword: '',
                    newPasswordAgain: ''
                },
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            editUserInfo () {
                this.isEdit = true
            }
        }
    })
</script>
</html>

提示：

<link rel="stylesheet" href="element/element.css">
<script src="element/vue.js"></script>
<script src="element/element.js"></script>

这三个文件的顺序很重要

效果图

备注： 来源于https://blog.csdn.net/bingot/article/details/85071075?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^