![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 72
追梦d
这个作者很懒,什么都没留下…
展开
-
vue下自定义wangeditor富文本框组件,并从父组件中引用,以及父子组件相互传值,图片上传,子组件重新加载的功能
因项目要求,关于vue.js中的前端加入富文本框,原本使用的是vue-quill-editor富文本框,但因客户要求,需要可以加入表格的功能,但是vue-quill-editor中缺少这些,所以最后选择了wangeditor1.vue中安装wangeditornpm install wangeditor --save2.自定义wangeditor组件新建wangEditor.vue文件,具体代码如下<template> <div> <div id=原创 2021-10-21 00:00:00 · 1843 阅读 · 1 评论 -
vue中通过el-input与el-table相结合,实现从表格中选择数据
源码: <el-input v-model="form.catalog" @click.native="onclick" placeholder="请选择目录" name="catalog"></el-input> <div id="divForm" style="display: none"> <el-table id="table12" border原创 2021-10-15 00:00:00 · 1266 阅读 · 0 评论 -
vue自定义组件之自定义时间组件
1.在src目录下新建utils文件夹,用于存放相应的js文件2.相应的js文件中的代码如下datetime.js:Date.prototype.toMidnight = function() {this.setHours(0)this.setMinutes(0)this.setSeconds(0)this.setMilliseconds(0)return this}Date.prototype.daysAgo = function(days, midnight) {days =原创 2021-10-12 00:00:00 · 1372 阅读 · 0 评论 -
vue中表格实现正在加载数据的效果
1.在el-table表格加入v-loading=“pictLoading_admin”element-loading-background = “rgba(0, 0, 0, 0.5)”element-loading-text = “数据正在加载中”element-loading-spinner = “el-icon-loading”2.设置pictLoading_admin默认为false3.当获取表格数据之前,设置pictLoading_admin为true4.最终效果为5.获取原创 2021-10-09 00:00:00 · 813 阅读 · 0 评论 -
vue学习之关于element日历calendar组件中上月,今天,下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习。显示效果图:本月:上月:下月:下方是源码<template><div><el-calendar v-model="value" id="calendar"><!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法--><templateslot="dateCell"slot-scope="原创 2021-10-08 00:00:00 · 4015 阅读 · 1 评论 -
vue下多文件上传,及表格中文件显示方式
1.使用element-ui中提供的文件上传方式文件上传<el-uploadclass="upload-demo"action="#":before-upload="before_upload_Z"//多文件上传,使用的方法:file-list="fileList_Z"//多文件集合:on-preview="handlePreview_Z"//文件上传之后,点击文件进行查看文件:on-exceed="handleExceed_Z"//上传失败提醒方式:on-remove="remov原创 2021-10-06 00:00:00 · 1237 阅读 · 0 评论 -
vue下使用vue-quill-editor富文本框与el-upload上传组件相结合
1.使用npm安装vue-quill-editornpm install vue-quill-editor -s2.挂载到项目,这里使用的是全局挂载,在main.js中加入如下代码import VueQuillEditoe from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'Vue.use(原创 2021-09-27 09:14:49 · 512 阅读 · 0 评论 -
vue初步学习之登录页的搭建
1.在package.json中引入相关组件2.在main.js中设置组件的全局变量3.加入路由4.编写登录页login.vue,下面为完整代码<template><div style="height:calc(100vh - 20px);"><div class="login" :style="'background-image:url('+ Background +');'"><el-form ref="loginForm" :mode原创 2021-09-26 09:32:32 · 137 阅读 · 0 评论 -
vue使用element-ui组件,通过el-form进行表单提交
1.新建api文件夹,该文件夹中主要存放接口路径。新建request.js,该js主要用于接口存放路径。import axios from 'axios'/** * 封装axios请求 */// create an axios instanceconst service = axios.create({ baseURL: 'http://localhost:8001/order/',//本地请求路径 timeout: 5000 // request timeout})//原创 2021-09-25 17:22:01 · 7678 阅读 · 0 评论 -
vue中使用svg图片
1.安装依赖:npm install svg-sprite-loader --save-dev2.修改webpack.base.conf.js,加入如下代码:{test: /.(png|jpe?g|gif|svg)(?.*)?$/,loader: ‘url-loader’,exclude: [resolve(‘src/icons’)], // 使用exclude排除src/icons,让url-loader只处理除此文件夹之外的svgoptions: {limit: 10000,name:原创 2021-09-24 17:05:42 · 675 阅读 · 0 评论 -
vue学习2 引入组件
1.在新建的vue项目中,打开package.json,找到dependencies,在其中输入组件2.在下方输入npm install,下载组件3.在main.js中调用这些组件,运行项目4.运行项目后会报这些错误5.解决办法打开config里面的index.js找到useEslint: true,将其改为false即可6.保存,重新运行...原创 2020-10-23 13:55:27 · 624 阅读 · 0 评论 -
IntelliJ IDEA创建第一个Vue工程
1.打开IntelliJ IDEA,点击file–>new–>project2.选择Static web,点击vue.js3.按步骤点击下一步即可4.vue项目中,main.js,App.vue,index.html如何调用1、main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件2、App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组原创 2020-10-22 13:56:21 · 1090 阅读 · 0 评论