![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
等风也在等着你
一管长啸待人吹
展开
-
vue引入svg图标(svg-sprite-loader)
安装 svg-sprite-loadernpm i svg-sprite-loadercomponents下面创建svg文件然后下面再来一个index.vueindex.vue<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg></template>&原创 2022-01-13 22:05:34 · 770 阅读 · 0 评论 -
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
百度了很多次 大多数都要让运行命令 npm install babel-plugin-transform-vue-jsx --save-dev可是对我来说还是不行 所以就有了一下方法原本的文件名 .babelrc{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] .原创 2021-12-06 16:49:28 · 10798 阅读 · 0 评论 -
通过 vue-cli 创建 uni-app 项目
查看uni-app官方文档需要注意bash选择不了模板,只能选择默认模板。可以打开cmd窗口进行安装可选择模板不太喜欢hello uni-app 项目模板的结构 所以我又安装了默认模板配置一下api接口安装 npm install uview-uimain.jsimport Vue from 'vue'import App from './App'import uView from "uview-ui";Vue.use(uView);Vue.config.producti原创 2021-04-28 09:52:53 · 2879 阅读 · 0 评论 -
vue axios封装loading
之前的写法 一个页面中需要控制的loading太多了 这样写比较麻烦 let params = this.From; this.loading.table = true; dsExtUser(params).then(result => { this.tableData = result.datas; this.loading.table = false; })改良后的写法1:main.js添加Vue.protot原创 2021-04-01 16:12:01 · 240 阅读 · 4 评论 -
参数接收不赋值就报错问题
请求后台接口返回的参数我们不一定每次都要用到,这时候不用就报错 怎么解决呢?package.json添加以下配置使用的时候在参数前面加上 _ 就可以了(可自定义)"rules": { "no-unreachable": "off", "no-unused-vars": [ "error", { "argsIgnorePattern": "^_" } ] }不报错了 挺好用的 哈哈原创 2021-03-31 17:31:05 · 200 阅读 · 0 评论 -
vscode 中设置vue代码片段
Ctrl + p然后…{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and description. // The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables原创 2020-08-15 11:11:23 · 414 阅读 · 0 评论 -
Vue 深拷贝
//写在公用方法里面//深拷贝function deepClone(source) { let sourceCopy = source instanceof Array ? [] : {}; for (let item in source) { sourceCopy[item] = typeof source[item] === 'object' && source[item] ? deepClone(source[item]) : source[item]; }原创 2020-07-28 16:05:44 · 371 阅读 · 0 评论 -
Vue公用组件
节流函数 //节流函数 throttle(fn, delay = 300) { let timer = null; return function (...args) { const context = this; if (timer) { return; } fn.apply(context, args); timer = setTimeout(function () { clearTime原创 2021-01-28 16:46:15 · 251 阅读 · 0 评论 -
Vue.Draggable实现拖动功能
先看效果图HTML<el-dialog title="邀请用户" :visible.sync="userDialogVisible" width="550px"> <div class="col-2"> <div class="form-group"> <div class="btn-group-vertical buttons" role="group" aria-label="Basic example"&g原创 2020-06-04 15:04:13 · 590 阅读 · 0 评论 -
element上传文件到oss上
一直都在报错跨域问题 可后端在oss上面配置过了 不需要跨域 我实在找不到原因了 还请各位帮忙看一下使用el-upload上传文件按钮<el-upload :action="ossUploadUrl" :headers="ossHeadertype" :limit="1" :data="dataOss" accept=".rar, .zip" :file-list="fileListdesignInfo" :on-remove="handleRemovedesignInfo" :on-succes原创 2020-05-27 10:57:14 · 728 阅读 · 4 评论 -
ie浏览器打开vue项目报错
解决ie浏览器报错//先安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法npm install --save babel-polyfill//再引入//放在main.js最上面import"babel-polyfill" //解决ie兼容...原创 2019-12-13 17:17:38 · 178 阅读 · 0 评论 -
正则表达式不允许输入汉字
第一种<el-form-item label="类目名称" :label-width="formLabelWidth" prop="name" :rules="{ required: true, message: '类目名称不能为空', trigger: 'blur'}"> <el-input v-model="form.name" a...原创 2019-12-12 15:39:45 · 11207 阅读 · 0 评论 -
vue return一个img标签
今天试了一下return一个img标签结果src里面的路径一直不显示 拉到html都没问题 找了好久终于发现找到原因写法不对这样写的话在HTML里面是正确的 但是在js里面是不对的 会直接报错<img src='./../../assets/img/OrganizationalStructure/frameworkOne.png' class="treeRefresh" />&l...原创 2019-11-01 16:01:53 · 3511 阅读 · 0 评论 -
element Tree 树形控件
默认所有一级先展示出来 通过点击当前的节点来获取子级然后遍历出来(父级和子级是两个接口)这里父级的获取方法我就不写了 直接把子级的方法写出来return { data:[],//父级数组 defaultProps: { label: 'name', i...原创 2019-10-29 16:49:28 · 295 阅读 · 0 评论 -
修改element弹出框title样式
使用element给 弹出框标题 其中一段文字添加标签怎么做???之所以这样做是为了实现UI设计的原型 前面处理结果四个字的样式和后面动态生成数据的样式不同所以要这样子做使用template 标签添加 slot属性 就可以啦<el-dialog :visible.sync="dialogVisible" width="30%" :before...原创 2019-10-18 15:13:28 · 9876 阅读 · 0 评论 -
获取element多选/单选的Name和ID
multiple 多选的属性 collapse-tags 多选的样式~<el-select v-model="serveValue" placeholder="请选择" size='mini' multiple collapse-tags @change="selectContract"> <el-option v-for="...原创 2019-08-12 11:08:35 · 2534 阅读 · 0 评论 -
element绑定点击事件无效怎么解决
element绑定点击事件无效怎么解决?解决方法。解决方法。@click 这样写是无效的~vue封装@click这些方法时阻止了原生的DOM事件,而native就是释放DOM原生事件@click.native 这样写才可以~...原创 2019-06-28 16:41:55 · 3243 阅读 · 3 评论 -
vue防抖函数
有时候用户在项目中一直点击查询按钮会出现服务器崩溃的情况,怎么解决呢 可以使用防抖函数先安装lodash到项目文件npm i loadsh -s然后使用let _loadsh = require('loadsh');//搜索List2: _loadsh.debounce(function(){ this.List();},500),...原创 2019-09-24 16:20:57 · 172 阅读 · 0 评论 -
选择数据判断状态是否可操作
// 获取选中的数据 var dataList = this.getSelected2(); // 储存选中数据的签署状态 let signStatus = []; //循环选中的数据签署状态遍历出来 for(let i = 0; i< dataList.length; i...原创 2019-09-03 16:06:10 · 145 阅读 · 0 评论 -
滑块验证
<template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmWords}}</div> <div ref="moveDiv" ...原创 2019-07-20 10:18:28 · 155 阅读 · 0 评论 -
element导入实现方法
点击导入按钮出现导入弹出框 选择好文件之后点击确定上传服务器同时窗口关闭<el-button size="mini" @click="toLead = true">导入</el-button> <el-dialog title="导入" :visible.sync="toLead" width...原创 2019-07-17 15:58:48 · 3062 阅读 · 0 评论 -
Vue项目刷新问题
Vue搭建项目进入首页刷新时总是跳转到登陆页解决方法在首页刷新时页面会跳转到登录页问题这样解决听不懂?在首页刷新时页面会跳转到登录页问题在首页刷新时qiu的一下页面跑到了登录页 这怎么行呢 这样我咋调试页面啊 那咋解决呢这样解决首先找到项目中的入口组件,然后写个布尔来控制,再然后判断一下 这样我在首页刷新就不会跑到登陆页了!!!<script> export defaul...原创 2019-07-04 19:31:16 · 320 阅读 · 0 评论 -
使用vue+element创建三级导航
废话不多说 直接上代码HTML<template> <div> <el-menu class="el-menu-demo" mode="vertical" @select="handleSelect" @click='enter()' @mouseout...原创 2019-08-12 11:22:21 · 1213 阅读 · 1 评论 -
Table表格滚动条不占位实现
Table表格滚动条不占位实现我的问题。怎么解决?我的问题。因为加了滚动条所以出现在了现在的情况怎么解决?我是直接找到他然后给他加了一个背景色颜色,这样整个表格头部看着就统一了~ 如果有更好的解决方法可以私信或者评论~.表格 tr th:last-child{ background:#F3F5FF; }...原创 2019-06-28 16:26:18 · 2060 阅读 · 5 评论 -
vue-cli3.0打包项目
vue-cli3.0打包项目第一步打包项目第二部开始搞一些路径什么的乱七八糟的东西vue-cli3.0版本没有build和config文件所以要我们自己创建一个然后把这段加进去就ok第一步打包项目npm run build完成后项目中会出现 dist 文件就是我们打包好的文件第二部开始搞一些路径什么的乱七八糟的东西配置路由模式(可选值: “hash” | “history” | “...原创 2019-07-03 19:18:36 · 4448 阅读 · 2 评论 -
vue-cli 3 和 vue-cli 2的区别!!!
vue-cli 3 和 vue-cli 2的区别!!!2.0启动npm run dev3.0启动npm run servebuild文件config文件都没了,脚手架3.0安装项目时会自动下载node-model。原创 2019-07-03 12:16:39 · 960 阅读 · 0 评论 -
导航切换
<!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-U...原创 2021-01-28 16:49:13 · 71 阅读 · 0 评论 -
列表图片渲染以及判断状态的展示
列表图片渲染以及判断状态的展示首先公司名称获取列表数据 我这边公司名称的HTML就不写了1列表中图片展示gridData.row获取一行数据然后图片渲染2判断如果我存起来的公司名称和列表中的公司名称相同的情况下列表后面展示使用中不相同就展示使用关于获取一行数据 <el-table :data="gridData" :show-header="false"> ...原创 2019-07-23 15:35:17 · 464 阅读 · 0 评论 -
Elemet-ui表格+分页
Elemet-ui表格+分页1前端控制分页2后台分页1前端控制分页:data=“tableData.slice((currentPage-1)pageSize,currentPagepageSize)” 现在是没对接数据之前由前端来控制分页:total=“tableData.length” 表格长度自己计算/*** ceshi.vue** ceshi** @author 自己名...原创 2019-07-20 17:41:33 · 352 阅读 · 0 评论 -
VUE脚手架3.0配置打包环境
我把我的axios配置在api.js里面 这个没有明确的规定看自己的习惯let VUE_APP_basic = process.env.VUE_APP_basiclet VUE_APP_export = process.env.VUE_APP_export项目根目录添加三个文件.env.build 生产环境//生产VUE_APP_basic ="http://生产.com"VUE_...原创 2019-08-12 16:14:39 · 728 阅读 · 0 评论 -
js遍历数据中间以逗号隔开
将遍历出来的 id 赋值给 _id 每个 id 以逗号隔开signStatus是里面存的是选中后的状态,下面是判断哪些状态的数据可以选那些不可以选let signStatus = []let _id = ''for(let i = 0; i< dataList.length; i++){ signStatus.push(dataList2[i].signStatus); ...原创 2019-08-12 11:37:26 · 5374 阅读 · 0 评论 -
日期转成时间戳
//日期转成时间戳 yyyy-MM-dd形式 var data1 = new Date(this.effectDate).getTime(); //获取当前日期的时间戳 this.timetamp = Number(new Date());原创 2019-12-12 11:16:15 · 399 阅读 · 0 评论 -
Vue 实现下载功能 前端改文件类型该如何做
getTemplateUrl 请求回来的数据有name(result.data.name)和url(result.data.url) 通过url去下载文件获取到url和name之后就直接axios去请求 请求回来的地址提示一般的下载都是一个超链接然后点击直接下载好而且还有后缀 而我这个是前端改变文件类型和后缀//下载 getTemplateUrl1() { getTempl...原创 2019-08-12 11:15:38 · 2481 阅读 · 3 评论 -
vue表格复制
列表1选中后的数据复制给表格2标记文本引用文本<!--表格1--> <div v-if='flag == 1'> <el-table :data="tableData110" ...原创 2019-08-12 10:45:11 · 1697 阅读 · 0 评论 -
遍历数据给后台
直接看代码根据后台要的格式发送这个是我公司后台要的格式因为乙方公司名称和乙方公司ID比较多直接发送一个数组或者字符串后端太懒不接收这样的参数 没办法只能按照他的要求来发送给他 当前用户ID 当前公司名称因为每个只有一条 所以只能给们循环然后遍历出来//发起签署 createContractsAndPublish(){ let _this...原创 2019-08-12 11:20:06 · 166 阅读 · 0 评论 -
后台返回给前端的数据通过id显示对应的name
这样做 <ul v-for="(item,index) of pcContInfoVOList" :key="index"> <li> <h1> <span>{{item.serviceTypeText}}&...原创 2019-07-28 18:40:31 · 6733 阅读 · 0 评论 -
前端token保存方法
安装npm i js-cookie //安装第二步在main.js引入import cookie from 'js-cookie';Vue.prototype.$cookie = cookie; 第三步赋值调用var $cookie = this.$cookie;//赋值this.$cookie.set('token',$result.data.token)//调用head...原创 2019-07-23 15:44:15 · 11740 阅读 · 0 评论 -
引入vue组件控制台报错 [Vue warn]: Do not use built-in or reserved HTML elements as component id: view 解决方法
引入vue组件控制台报错 [Vue warn]: Do not use built-in or reserved HTML elements as component id: view 解决方法为啥会报错?如何解决?好心提醒为啥会报错?如何解决?组件名不可以和H5标签名相同,可以给组件名view前面加个字母标识或者改成您能理解的命名~好心提醒建议大家在创建组件的时候,比如遇到 header...原创 2019-06-21 15:47:45 · 2367 阅读 · 0 评论