百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

Element UI实现基本的布局,以及引用Echars

ztj100 2024-12-03 06:54 63 浏览 0 评论

导入Element ui插件

npm i element-ui -S

配置Element UI

在src文件夹下的main.js的配置如下

代码为:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

然后在组件中使用Element UI

具体的使用方法大家到Element UI官网中进行选择,官网地址为

https://element.eleme.cn/#/zh-CN

大家根据需要选择组件


这是我根据B站的视频仿出来的一个布局


代码如下:

<template>
  <div>
    <el-container>
      <el-header>车载物联网无线通信滑移门运行数据回传系统</el-header>
      <el-main>
        <div id="car-speed" class="car-speed"></div>
        <div class="car-position"></div>
        <div class="show-other"></div>
        <div class="car-count"></div>
        <div class="car-status"></div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>



<script>
export default {
  mounted() {
    this.setChar()
  },

  name: 'Data',
  components: {
    //组件
  },

  methods: {
    setChar() {
    let myChart = this.$echarts.init(document.getElementById('car-speed'), 'white')
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
        ],
      }
      // 绘制图表
      myChart.setOption(option);
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped >
.el-header,
.el-footer {
  height: 240px;
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  height: 600px;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.car-speed {
  margin-left: 5px;
  width: 500px;
  height: 300px;
  background-color: black;
  border-radius: 15px 15px 0 0;
}

.car-position {
  position: absolute;
  margin-top: 20px;
  margin-left: 5px;
  width: 500px;
  height: 250px;
  background-color: burlywood;
  border-radius: 15px 15px 15px 15px;
}

.car-count {
  position: absolute;
  margin-top: 20px;
  margin-left: 1000px;
  width: 500px;
  height: 250px;
  background-color: black;
  border-radius: 15px 15px 15px 15px;
}

.car-status {
  position: absolute;
  margin-top: -300px;
  margin-left: 1000px;
  width: 500px;
  height: 300px;
  background-color: #b3c0d1;
  border-radius: 15px 15px 15px 15px;
}

.show-other {
  position: absolute;
  margin-top: -300px;
  margin-left: 510px;
  width: 480px;
  height: 570px;
  background-color: #b3c0d1;
  border-radius: 15px 15px 15px 15px;
}
</style>

需要注意的就是它的CSS了,我写的这个CSS比较拉跨,建议大家自行编写。(CSS永远的痛)

下面是我使用Element UI编写的一个登录界面,看起来好丑(哈哈哈哈)。不过功能还是不错的。


具体实现代码如下:

<template>
  <div class="login-container">
    <div class="login-body">
      欢迎来到车载物联网系统
      <!-- 登录界面头部 -->
      <div class="login-header">用户登录</div>
      <!-- 登录界面表单 -->
      <!-- ref:得到表单实例对象 :model  :相当于v-bind   -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-form">
        <el-form-item prop="useruame" label="用户名">
          <el-input v-model="loginForm.useruame" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>

        <!-- 登录界面按钮 -->
        <el-form-item class="btn">
          <el-button type="primary" @click="onLogin('loginFormRef')">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 登录界面其他选项 -->
      <div class="other-option">
        <span @click="onRegister">注册账户</span>
        <span style="margin: 0 30px">|</span>
        <span>找回密码</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //登录表单的数据绑定对象,记得加上:
      loginForm: {
        input: '',
        useruame: '',
        password: '',
      },
      //登录表单的验证规则对象,规则名字要和loginForm的一样
      rules: {
        // 用户名规则
        useruame: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        // 密码规则
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
        ],
      },
    }
  },

  methods: {
    onLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const result = this.$http.post('login', this.loginForm)
          console.log(result)
          var useruame1 = localStorage.userName
          var password1 = localStorage.passWord
          console.log('获得用户名' + useruame1)
          console.log('获得密码' + password1)
          if (useruame1 === this.loginForm.useruame && password1 === this.loginForm.password) {
            this.$alert('', '登录成功', {
              showClose:true,
              showConfirmButton:true,
              callback: (action) => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`,
                })
              },
            })
            this.$router.replace('/Data')
          } else {
            this.$alert('用户名或密码错误!', '登录失败', {
              confirmButtonText: '确定',
              callback: (action) => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`,
                })
              },
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log(this.loginForm.useruame)
    },
    // 清空表单值
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
    //跳转至注册页面
    onRegister() {
      console.log('点击注册用户')
      this.$router.replace('/Register') //默认全局配置$router属性
    },
  },
}
</script>

// scoped只在当前组件生效
<style lang="scss" scoped>
.login-container {
  height: 500px;
  width: 500px;
  background-color: #fff5ee;
  background-image: url('../assets/login.png');
  position: absolute;
  top: 50%;
  left: 50%;
  // 设置div的中心点在我们想要的位置
  transform: translate(-50%, -50%);

  .login-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .login-form {
    color: #3d7ef9;
    width: 300px;
    height: 300px;
    border-radius: 15px 15px 0 0;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 20%;
    padding: 0px 10px; //输入框与登录框两侧的距离
  }
}

.btn {
  display: flex; //弹性布局
  justify-content: center; //置中
}

.other-option {
  display: flex; //弹性布局
  justify-content: center; //置中
  background-color: #fff;
  width: 320px;
  margin-left: 20%;
  margin-bottom: 30x;
}
</style>

如何导入并使用Echars插件

安装与配置基本与Element UI的一样,Echars的官网地址为

https://echarts.apache.org/zh/index.html

安装插件

npm install echarts --save

配置插件(src文件下的main.js)

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用插件

1 定义界面框的大小


2 编写具体的图形参数

3 效果如下

相关推荐

Java网络编程(JAVA网络编程技术)

网络编程三要素1.IP地址:表示设备在网络中的地址,是网络中设备的唯一标识2.端口号:应用程序在设备中唯一的标识3.协议:连接和数据在网络中传输的规则。InetAddress类Java中也有一个...

字节Java全能手册火了!多线程/网络/性能调优/框架啥都有

前言在这个技术不断更新的年代,跟不上时代变化的速度就会被刷掉,特别是咱们程序员这一群体,技术不断更新的同时也要同时进步,不然长江后浪推前浪,前浪......一个程序员从一个什么都不懂的小白在学到有一定...

一分钟了解java网络编程(java基础网络编程)

一、OSI七层网络模型应用层:Http协议、电子邮件传输、文件服务器等;表示层:数据转换,解决不同系统的兼容问题(跨语言);会话层:建立与应用程序的会话连接;传输层:提供了端口号和传输协议(TPC/U...

Java编程-高并发情况下接口性能优化实践-提升吞吐量TPS

记得前段时间工作中接到一个任务是优化一个下单接口的性能提高接口的吞吐量TPS,前期通过arthas工具跟踪接口的具体方法调用链路及耗时,发现了影响此接口的性能瓶颈主要是加锁的方式,后来变更了锁的方式...

socket 断线重连和心跳机制如何实现?

一、socket概念1.套接字(socket)是网络通信的基石,是支持TCP/IP协议的网络通信的基本操作单元。它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,...

迅速了解-Java网络编程(java基础网络编程)

Java网络编程在JavaSE阶段,我们学习了I/O流,既然I/O流如此强大,那么能否跨越不同的主机进行I/O操作呢?这就要提到Java的网络编程了。...

Java网络编程详解(java 网络编程)

网络编程基础知识最!最!最!重要网络编程基础概念网络编程不等于网站编程,网络编程即使用套接字(socket)来达到各进程间的通信,现在一般称为TCP/IP编程;网络编程分为服务端和客户端。服务端就相当...

「开源推荐」高性能网络通信框架 HP-Socket v5.7.2

简介HP-Socket是一套通用的高性能TCP/UDP/HTTP通信框架,包含服务端组件、客户端组件和Agent组件,广泛适用于各种不同应用场景的TCP/UDP/HTTP通信系统,提供C/...

Java网络编程从入门到精通:打造属于你的网络世界

Java网络编程从入门到精通:打造属于你的网络世界在当今这个信息爆炸的时代,网络编程已经成为程序员必不可少的一项技能。而Java作为一种功能强大且广泛使用的编程语言,在网络编程领域也有着举足轻重的地位...

5分钟读懂C#中TcpClient、TcpListener和Socket三个类的角色

一、核心功能与定位1.Socket类:底层通信的基石-位于System.Net.Sockets命名空间,提供对网络协议栈的直接操作,支持TCP、UDP等多种协议。-手动管理连接细节:需...

(三)谈谈 IO 模型(Socket 编程篇)

快过年啦,估计很多朋友已在摸鱼的路上。而我为了兄弟们年后的追逐,却在苦苦寻觅、规划,导致文章更新晚了些,各位猿粉谅解。上期分享,我们结合新春送祝福的场景,通过一坨坨的代码让BIO、NIO编程过程呈...

大数据编程入门:Java网络编程(大数据 编程)

如果想要编写出一个可以运行在多个设备上的程序,应该怎么做呢?答案是网络编程,今天小编将为大家带来大数据编程入门:Java网络编程。一、网络编程概念网络编程是指编写在通过网络连接的多个设备(计算机)上运...

基于JAVA的社交聊天室(java聊天设计与实现)

基于Java的社交聊天室一、前言随着互联网技术的迅速发展,实时通信和在线社交已成为人们日常生活的重要组成部分。基于Java的社交聊天室系统,凭借其跨平台、高性能和安全性等特点,为用户提供了一个集中、开...

java-socket长连接demo体验(java socket长连接)

作者:DavidDing来源:https://zhuanlan.zhihu.com/p/56135195一、前言最近公司在预研设备app端与服务端的交互方案,主要方案有:服务端和app端通过阿里i...

JAVA数据库编程(java数据库编程指南)

预计更新###第一节:什么是JAVA-JAVA的背景和历史-JAVA的特点和应用领域-如何安装和配置JAVA开发环境###第二节:JAVA基础语法-JAVA的基本数据类型和变量-运算符和...

取消回复欢迎 发表评论: