精华内容
下载资源
问答
  • Vue框架Element UI教程

    千次阅读 2019-09-12 16:25:01
  • Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element ...Vue框架Element UI教程-安装环境搭建(一)htt...
        

    Element UI手册:https://cloud.tencent.com/developer/doc/1270
    中文文档:http://element-cn.eleme.io/#/zh-CN
    github地址:https://github.com/ElemeFE/element


    接前三篇,
    Vue框架Element UI教程-安装环境搭建(一)https://www.jianshu.com/p/ab3c34a95128

    在用Element UI框架的时候

    <template>
      <div>
       <el-row class="tac">
       <el-col :span="4">   
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>服务大厅</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">在场服务</el-menu-item>
              <el-menu-item index="1-2">历史服务</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
           <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">权限管理</el-menu-item>
              <el-menu-item index="1-2">角色管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>人员数据</span>
            </template>
            <el-menu-item-group>        
              <el-menu-item index="1-1">人员数量</el-menu-item>
              <el-menu-item index="1-2">人员位置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>      
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-message-solid"></i>
              <span>健康报警</span>
            </template>
            <el-menu-item-group>       
              <el-menu-item index="1-1">心率报警</el-menu-item>
              <el-menu-item index="1-2">血压报警</el-menu-item>
            </el-menu-item-group>
          </el-submenu>     
        </el-menu>
      </el-col>
    </el-row>
      </div>
    </template>
    <script>
      export default {
        methods: {
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          }
        }
      }
    </script>
    

    导航菜单效果如下所示

    5640239-dead135bee0104ee.gif

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,对于博客上面有不会的问题,欢迎加入编程微刊qq群:260352626。

    展开全文
  • Vue框架Element UI教程-axios请求数据 1:进入项目,npm安装 npm install axios --save 2.在main.js下引用axios import axios from ‘axios’ 4:跨域问题,设置代理,利用proxyTable属性实现跨域请求 在config/...

    Vue框架Element UI教程-axios请求数据

    1:进入项目,npm安装

    npm install axios --save

    2.在main.js下引用axios

    import axios from ‘axios’
    在这里插入图片描述 4:跨域问题,设置代理,利用proxyTable属性实现跨域请求
    在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码

     proxyTable: {
      '/api': {
        target: 'http://www.intmote.com',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' //这个是定义要访问的路径,名字随便写 
        }
      }
    },
    

    在这里插入图片描述
    5:打开一个界面User.vue,开始写请求数据的方法

     methods: {
                getData() {
                    axios.get('/api/test.json').then(response => {
                        console.log(response.data);
                    }, response => {
                        console.log("error");
                    });
                }
            }
    
    展开全文
  • Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element ...Vue框架Element UI教程-安装环境搭建(一)htt...
        

    Element UI手册:https://cloud.tencent.com/developer/doc/1270
    中文文档:http://element-cn.eleme.io/#/zh-CN
    github地址:https://github.com/ElemeFE/element


    接前两篇,
    Vue框架Element UI教程-安装环境搭建(一)https://www.jianshu.com/p/ab3c34a95128

    今天继续写组件的运用相关例子
    点击按钮的时候,元素会呈现一个出现和隐藏的动画功能。

    <template>
      <div>
        <el-button @click="show = !show">点击按钮</el-button>
        <div style="display: flex; margin-top: 20px; height: 100px;">
          <transition name="el-fade-in-linear">
            <div v-show="show" class="transition-box">我会消失在人海之中</div>
          </transition>
        </div>
      </div>
    </template>
    <script>
        export default {
        data: () => ({
          show: true
        })
      }
    </script>
    <style>
      .transition-box {
        margin-bottom: 10px;
        width: 300px;
        height: 100px;
        border-radius: 4px;
        background-color: #42B983;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-left: 520px;
      }
    </style>
    

    效果大家可以自行尝试。

    5640239-536d8a00d20ec0d2.gif

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,对于博客上面有不会的问题,欢迎加入编程微刊qq群:260352626。

    展开全文
  • Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:...前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了。 在准备好以下文章里面的...
  • Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:...前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的...
  • 今天来写一个分页,表格分页在实际项目中经常用到,之前也写过关与bootstrap table 里面的表格分页,道理都差不多一样的,Element UI也有自己的组件可以用,话不多说,直接上代码了。 Element UI手册:...
  • 写了那么多,最终的数据都是要展示在...Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 其实步骤...
  • Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 1:进入项目,npm安装 npm install axios --...
  • Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 1:在项目里面新建一个mock文件夹,在mock文件夹...
  • Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 1:components 新建页面 2:打开app.vue.....
  • Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。 中文文档:...
  • Element UI教程汇总 1:Vue框架Element UI教程-安装环境搭建(一)https://www.jianshu.com/p/ab3c34a95128 2:Vue框架Element UI教程-时间选择器(二)https://www.jianshu.com/p/1704b5935a89 3:Vue框架...
  • Element UI 实战教程

    2021-02-26 17:58:16
    Element UI 实战教程 作者 小陈 微信 chenxu521600 B站 编程不良人 | 百知教育 资料 http://www.baizhiedu.xin 1.Element UI 引言 官网: https://element.eleme.io/#/zh-CN 1.1 官方定义 网站快速成型工具 和 ...
  • Element UI实战教程之按钮组件01 1.Element UI 引言 官网:https://element.eleme.cn/#/zh-CN 官方定义 网站快速成型工具 和 桌面端组件库 定义 element UI 就是基于vue的一个ui框架,该框架基于vue开发了很...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 540
精华内容 216
关键字:

elementui教程