精华内容
下载资源
问答
  • vue 使用element-ui Loading框加载

    千次阅读 2020-06-01 16:51:38
    vue 使用element-ui Loading框加载 在vue/cli项目上使用 在想要用到的事件上定义方法 代码片. //定义方法 let loading function startLoading() { loading = Loading.service({ lock: true, text: '加载中……', ...

    vue 使用element-ui Loading框加载

    在vue/cli项目上使用 在想要用到的事件上定义方法 代码片.
    //定义方法
    let loading
    function startLoading() {
    loading = Loading.service({
    lock: true,
    text: '加载中……',
    	background: 'rgba(0, 0, 0, 0.7)'
    	})
    }
    function endLoading() {
    	loading.close()
    }
    
    在项目上调用方法 代码片.
    // Loading显示
    startLoading()
    //Loading隐藏
    endLoading()
    
    例子 代码片.
    googsid() {
    				//loding加载
    				let loading
    				function startLoading() {
    					loading = Loading.service({
    						lock: true,
    						text: '加载中……',
    						background: 'rgba(0, 0, 0, 0.7)'
    					})
    				}
    
    				function endLoading() {
    					loading.close()
    				}
    				//调用加载
    				startLoading()
    				Api_getgetgoods({
    					
    				}).then(data => {
    					console.log(data)
    					//关闭加载
    					endLoading()
    					
    				})
    		},
    
    效果展示!

    在这里插入图片描述

    展开全文
  • 如图,当我们切换左侧菜单展示效果的时候,右侧内容会对应变宽,但此时的echarts并不能执行自适应效果,这是因为切换菜单展示效果并没有触发window.onresize,所以为解决类似此问题,我们可使用element-resize-...

    如图,当我们切换左侧菜单展示效果的时候,右侧内容会对应变宽,但此时的echarts并不能执行自适应效果,这是因为切换菜单展示效果并没有触发window.onresize,所以为解决类似此问题,我们可使用element-resize-detector

    1、引入element-resize-detector,npm install element-resize-detector --save

    2、在对应位置上引入即可

    let elementResizeDetectorMaker = require("element-resize-detector");
    //监听元素变化
    let erd = elementResizeDetectorMaker();
    let that = this;
    erd.listenTo(document.getElementById("bar"), function (element) {
        that.$nextTick(function () {
            //使echarts尺寸重置
            that.myEcharts.resize();
        })
    })
    //监听元素变化

    PS:如果在改变宽度过程中存在动画效果,此时我们可以使用防抖,使在动画结束后再resize,这样做的好处是避免在动画过程中不断进行resize,造成界面卡顿,影响性能

    节流与防抖代码见:https://blog.csdn.net/Ag_wenbi/article/details/106879625
    <template>
        <div class="page">
            <div id="bar" class="echarts"></div>
        </div>
    </template>
    
    <script>
        let elementResizeDetectorMaker = require("element-resize-detector");
        import {debounce} from 'utils.js';
        export default {
            name:'page',
            mounted(){
                let erd = elementResizeDetectorMaker();
                let that = this;
                erd.listenTo(document.getElementById("bar"), debounce(this.resizeFunc))
            },
            methods:{
                resizeFunc(element){
                    console.log(element);//element元素信息
                    that.$nextTick(function () {
                        //使echarts尺寸重置
                        that.myEcharts.resize();
                    })
                }
            }
        }
    </script>
    
    <style lang="scss" scoped>
    .page{
        width:100%;
        height:100%;
        .echarts{
            width:100%;
            height:100%;
        }
    }
    </style>

     

    展开全文
  • English ||| 由...赞助 活动服务销售平台 客户消息直达工作群 ... 如果要使用旧版本,可以将分支切换到 ,它不依赖于vue-cli 该项目不支持低版本的浏览器(例如IE)。 请自行添加polyfill。 准备
  • vue 使用element Upload头像上传

    千次阅读 2018-10-24 10:07:06
    这里使用element Upload 用户头像上传 HTML部分 &amp;amp;amp;lt;el-upload class=“avatar-uploader” action=&amp;amp;quot; 123&amp;amp;quot; // 这个地址不是必须的。可随便写 :show-file-...

    这里使用element Upload 用户头像上传
    HTML部分

    <el-upload
      class="avatar-uploader"
      action=" 123"  // 这个地址不是必须的。可随便写
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    

    上传:

    beforeAvatarUpload(file) { //上传前的函数
     //上传前对图片类型和大小进行判断
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
    
            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            //校验成功上传文件
            if(isJPG && isLt2M == true){
              console.log(file);
    
              //将文件转化为formdata数据上传
              let fd = new FormData()
              fd.append('file', file)
              console.log(fd)
           
            // post上传图片
    
               let that = this
             
                new Promise(function (resolve, reject) {
                    that.axios.post('/file/imgUpload', fd, 
                          {
                          headers: {
                          'Content-Type': 'multipart/form-data'
                          }
                        }).then((response) => {
                           that.imgId = response.data.data
                            resolve(that.imgId);
                        }).catch((error) =>{
                            this.$message.error('头像上传失败,请重新上传!');
                        })
                       }).then(function (id){
                       that.axios.get('/file/view/'+id)
                        .then((response) => {
                             that.imageUrl = response.request.responseURL;
                         })
                  })         
                }
                      return isJPG && isLt2M;
         
          },
    
    展开全文
  • vue使用element写一个简单的登陆页面

    千次阅读 2018-08-13 10:03:20
    vue使用element写东西让我感觉到了特别的方便,但是一遇到问题的话,那是真还好,网上基本上都有一些小demo或详解,今天我这里给大家分享下我写的一个简单的登陆跳转的页面 html代码 账号,密码和确认密码 &...

    vue使用element写东西让我感觉到了特别的方便,但是一遇到问题的话,那是真还好,网上基本上都有一些小demo或详解,今天我这里给大家分享下我写的一个简单的登陆跳转的页面

    html代码

    账号,密码和确认密码

    <template>
    <div class="Land">
        <div class="topzi">图书管理后台登陆</div>
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
              <el-form-item prop="name" label="姓名">
                <el-input v-model="ruleForm2.name"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    </template>

    css代码

    由于用的element组件写的标签基于app下

    <style>
    html,body{
      width:100%;
      height:100%;
       background: url(../../build/beijin.jpg) no-repeat;
      background-size: 100% 100%;
      }
      #app .topzi{
        font-size: 40px;
        margin-bottom: 20px;
      }
    #app .Land{
      width: 30%;
      position:fixed;
      top:20%;
      left: 0;
      right: 0;
      margin:0 auto;
      border: 1px solid #000;
      padding: 40px;
    }
    </style>

    js事件

    data下的判断,return下的规范,methods下的事件

    <script>
      export default {
        data() {
          var checkAge = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('账号不能为空'));
            }
          };
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              if (this.ruleForm2.checkPass !== '') {
                this.$refs.ruleForm2.validateField('checkPass');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.pass) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return {
            ruleForm2: {
              pass: '',
              checkPass: '',
              name: ''
            },
            rules2: {
              pass: [
                { required: true,validator: validatePass, trigger: 'blur' }
              ],
              checkPass: [
                { required: true,validator: validatePass2, trigger: 'blur' }
              ],
              name: [{required: true, message: '不能为空', trigger: 'blur'},
              {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
                this.$router.push({path:'/HelloWorld'})
              } else {
                console.log('error submit!!');
                // return false;
                
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
      }
    </script>

    希望我写的整个能够帮助到你们

    展开全文
  • 本项目是以asp.net core mvc+vue+element-ui为基础搭建的框架,实现基础的cms功能,开发工具为visual studio2019,vue版本为2.6.12.
  • vue-element-admin,更新时间为2021-03-21,含完整依赖包(node_modules文件夹)
  • 使用elementUI的Upload 上传组件时 当删除图片时想要找到图片所在的数组对象中的index,需要在删除的钩子函数中(before-remove)传递index参数 以下是elementUI的upLoad组件的一下钩子函数 那么如何传递自己想...
  • 记录vue 使用element-ui打包正式环境 字体图标乱码问题 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面...
  • vue-element-admin 是基于 Vue2.0,配合使用 Element UI 组件库的一个前端管理后台集成解决方案
  • vue使用Element-UI部分组件适配移动端

    万次阅读 2020-08-14 23:24:33
    文章目录前言vue使用Element-UI部分组件适配移动端组件适配1---Message 消息提示适配样式代码组件适配2---MessageBox 弹框适配样式代码组件适配3---Dialog 对话框适配样式代码结语 前言     ...
  • element-ui表格移入(hover)修改背景色 在对element-ui表格样式进行修改时,发现修改过后移入时,其背景色没有改变,与表格整体背景对比,则格格不入。 刚开始以为是对每行tr移入时修改其背景,但通过开发者模式...
  • 走马灯代码结构走一遍 (imgList数组在data中声明,此为本地数据) data () { return { // 图片需要引入, 否则无法显示 ...element UI 官网地址戳这里 ...初识vue如有误,请指正,不胜感激。 完工。
  • vue使用element实现横向滚动

    千次阅读 2020-09-27 14:56:24
    element也很简单,滚动条没有默认的那么丑… <div class="img-list"> <el-scrollbar :vertical="true"> <ul> <li v-for="item in 6"> <img src="" alt=""&g
  • Vue使用element-ui菜单导航

    千次阅读 2019-07-26 16:15:30
    vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库 npm install vue-router --save npm install element-ui --save 关闭ESLint检查 新增配置文件src/vue.config.js 文件 module.exports = { ...
  • asp.net mvc+vue+element.zip

    2019-10-29 19:08:14
    在asp.net mvc中使用vue+element进行网站开发 在asp.net mvc中使用vue+element进行网站开发
  • vue使用element(菜鸟教程)

    千次阅读 热门讨论 2021-02-03 15:20:05
    在我们的vue项目中可供引入的框架是很多的,这里分享下在vue使用element-ui的框架 element-ui官网入口 实现步骤: 一、引入element-ui 方法1:安装node包 cnpm ielement-ui --save 方法2:cdn引入 <...
  • 关于vue使用element-ui/weui中修改官方的样式 ​​在这个文章前我们要明白常用的框架以下: Element-UI:Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。 ...
  • vue使用element-ui中对话框的问题

    千次阅读 2019-07-02 18:56:40
    vue的组建中使用element-UI的对话框,效果可以实现,但是出现以下的问题 1、点击调用对话框,遮罩层没有出现,官方文档里的属性都试了没有效果(我用css>>>穿透给body加上的) 2、对话框显示的时候添加lock-...
  • VUE使用Element上传视频及预览

    千次阅读 2020-01-02 15:07:16
    VUE使用Element下载视频及预览 .html <div v-if="videoForm.showVideoPath ==''"> <el-upload :action="upimgurl"//接口 v-bind:data="{...
  • vue使用 element lable的样式修改

    千次阅读 2019-12-05 22:15:33
    1.去掉style中的scoped <style scoped> </style> 2.在对应el-form-item的label属性中加入class样式 <el-form-item label="用户名" class="item"&...el-input v-model="ruleForm.username" placeho...
  • vue使用element的upload组件保存到springboot静态资源,网页可访问(超详细)安装element ui组件vue界面使用upload上传组件springboot后端保存到静态资源以及请求地址编写保存到静态资源类controller类编写注意 注意...
  • Vue 使用element-ui步骤条流程

    万次阅读 多人点赞 2018-08-20 15:46:51
    注:vue2.0 项目 该效果引用element-ui的步骤条,引用之前确保个人项目已安装Element 安装命令:npm install element-ui 然后在main.js中引入: 确保安装引用成功后,就可以开始写步骤条代码了 页面代码如下...
  • 后来无意发现了element-china-area-data这个组件,哈哈,实现效果还可以呦。 效果图: 选取地址中: 选好地址后显示: 好了,各位肯定想知道如何获取数据吧? 这就贴上代码吧: 下载element-china-area-data: npm...
  • vue-element-admin的离线依赖包; 私有的资源,大家别下载 公司网络限制所以弄个离线包自己使用
  • vueelement-ui使用

    万次阅读 多人点赞 2018-07-06 14:32:06
    这一篇主要是创建一个vue项目并结合饿了么框架element-ui。1.先创建vue项目,我准备把项目放在e盘下:E:\Work\RegisterProject;命令行进入这个目录:创建一个基于 webpack 模板的新项目(1)vue init webpack ...
  • &lt;el-menu :default-active="$route.path" router mode="horizontal"&gt; &lt;el-menu-item v-for="route in routes" :key="...$route.path==route.
  • Element UI 完整版 源码 可用 vue+Element-UI 前端框架
  • vue项目使用element-ui组件

    千次阅读 2018-09-11 10:54:18
    1.安装element-ui组件 ...2.在vue项目中引用element-ui组件 在main.js中引入全部element UI 样式 // 引入饿了么的组件 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue...
  • 上例子 data() { var validate = (rule, value, callback) => { if (value == "00:00:00") { callback(new Error("请选择时间"));...一定要在data下面写一个一个变量,rule是规则,value是填写的内容返回值,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 130,712
精华内容 52,284
关键字:

vue使用element

vue 订阅
友情链接: cwche.zip