技术联盟

Element-UI 入门使用

Element-UI 入门使用

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI官网

如何在Html文件中使用ElementUI

  1. 在网页中引入element ui css和js ,由于Element是具有Vue的,所以需引入Vue的js

    <!– 引入样式 –>

    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    

  2. 在Script中创建Vue对象管理界面元素

    <script>
            new Vue({
                el: '#app',
                data: function () {
                    return {
                        visible: false
                    }
                },
            });
    </script>
    
  3. 接下来就可以使用Element中的元素了

    <div id="app">
            <el-button @click="visible = true">Button</el-button>
            <el-dialog :visible.sync="visible" title="Hello World">
                <p>Try Element</p>
            </el-dialog>
    </div>
    
  4. 完整示例

    <!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>Element第一个</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <el-button @click="visible = true">Button</el-button>
            <el-dialog :visible.sync="visible" title="Hello World">
                <p>Try Element</p>
            </el-dialog>
        </div>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
    
        <script>
            new Vue({
                el: '#app',
                data: function () {
                    return {
                        visible: false
                    }
                },
            });
        </script>
    </body>
    
    </html>
    
  5. 登录界面完成示例

    <!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>登录</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
        <script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    </head>
    
    <body>
        <div id="app">
            <el-row type="flex" class="row-bg" justify="center"> 
                <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                    <el-card class="box-card" style="margin-top: 50%;">
                        <el-container>
                            <el-main>
                                <el-form ref="form" label-position="right" label-width="80px">
                                    <el-form-item label="用户名">
                                        <el-input v-model="form.name" prefix-icon="el-icon-user" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input v-model="form.pwd" show-password prefix-icon="el-icon-lock" clearable></el-input>
                                    </el-form-item>
                                    <div style="text-align: center;"><el-button type="primary" round style="width: 50%;" @click="onSubmit"> 登录 </el-button></div>
                                    <el-form-item label="" style="text-align:right;"> <el-link type="primary" :underline="false"> 找回密码 </el-link></el-form-item>
                                </el-form>
                            </el-main>
                        </el-container>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: function () {
                    return {
                        form: {
                            name: '',
                            pwd: ''
                        }
                    }
                },
                mounted() {
                    // axios.get('https://api.apiopen.top/getJoke?page=1&count=2&type=video').then(function(response){
                    //     console.log(response);
                    // });
                },
                methods: {
                    onSubmit(){//提交
                        console.log(this.$data);
                    }
                },  
            });
        </script>
    </body>
    
    </html>
    
  6. Socket.io 完整Demo

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>NETTY SOCKET.IO DEMO</title>
        <base>
        <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
        <style>
            body {
                padding: 20px;
            }
            #console {
                height: 450px;
                overflow: auto;
            }
            .username-msg {
                color: orange;
            }
            .connect-msg {
                color: green;
            }
            .disconnect-msg {
                color: red;
            }
        </style>
    </head>
    
    <body>
        <div id="console" class="well"></div>
        <button id="btnSend" onclick="send()">发送数据</button>
    </body>
    <script type="text/javascript">
        var socket;
        connect();
    
        function connect() {
            var loginUserNum = '79';
            var opts = {
                query: 'loginUserNum=' + loginUserNum
            };
            socket = io.connect('http://192.168.1.30:9099', opts);
            socket.on('connect', function () {
                console.log("连接成功");
                serverOutput('<span class="connect-msg">连接成功</span>');
            });
            socket.on('push_event', function (data) {
                output('<span class="username-msg">' + data + ' </span>');
                console.log(data);
    
            });
    
            socket.on('disconnect', function () {
                serverOutput('<span class="disconnect-msg">' + '已下线! </span>');
            });
        }
        
        function output(message) {
            var element = $("<div>" + " " + message + "</div>");
            $('#console').prepend(element);
        }
    
        function serverOutput(message) {
            var element = $("<div>" + message + "</div>");
            $('#console').prepend(element);
        }
    
        function send() {
            console.log('发送数据');
            socket.emit('text','你好');
        }
    
    
    </script>
    </html>
    

Share this:

码字很辛苦,转载请注明来自技术联盟《Element-UI 入门使用》

评论