分享是一种快乐

其他 · 2019年11月8日 0

Element-UI 入门使用

Element-UI 入门使用

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

如何在Html文件中使用ElementUI

在网页中引入element ui css和js ，由于Element是具有Vue的，所以需引入Vue的js
<!– 引入样式 –>
```
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
```

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

<script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    visible: false
                }
            },
        });
</script>

接下来就可以使用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>

完整示例

<!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>

登录界面完成示例

<!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>

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:

标签： ELementUI 前端

您可能还喜欢...

发表回复取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。