vue
文章平均质量分 63
乘风御浪云帆之上
行走的菜鸟
展开
-
基于Vshare插件实现vue分享功能
Vue中引入分享功能插件一度为快 实现引入插件 npm config set strict-ssl false npm install vshare -S 页面实现 <template> <div style="text-align: center"> <h3>分享demo</h3> <div> <vshare :vshareConfig="vshareConfig原创 2020-11-30 14:05:44 · 1801 阅读 · 0 评论 -
Vue-Element中结合后台的特定的数据给实现考勤表格
Vue-Element中结合后台的特定的数据给实现考勤表格思路草图设计 结果页面 实现中卡住的地方动态列增加 单元格动态增加新的表格 动态增加的列与对应的数据显示解决方案动态增加 固定列的数据重新赋值,动态列的数据push进去 单元格动态增加新的表格 单元格templete化,新增:data和是否有数据和在特定的列位置添加新的表格 动态增...原创 2019-12-10 18:16:57 · 2203 阅读 · 1 评论 -
vue中单元格中嵌套表格
vue中单元格中嵌套表格数据sceneData: [{ gateSceneModel: {}, gateUserModelList: [{"user_name":"1"},{"user_name":"2"}], gateApiAccessModel: {}, gateApiAccessSceneXmodel: {}}],控件 <el-table...原创 2019-11-21 18:04:12 · 2939 阅读 · 1 评论 -
Vue中解决js获取不到未初始化的控件对象的方法
Vue中解决js获取不到未初始化的控件对象的方法问题描述在使用Vue发编写页面时,并不是所有的页面中的控件在初始化的时候都会进行加载 这个时候,当js中调用该控件的事件时,就会无法找到该控件导致调用是事件的失败问题原因当页面初始化时,该页面默认显示的控件都会进行加载 但是有一些页面中的控件如dialog,页面初始化时,它大部分情况下是隐藏的,所以依附在它上面的控件并不是一开始就加...原创 2019-11-04 14:43:48 · 1737 阅读 · 0 评论 -
将vue加载蒙版函数化
将vue加载蒙版函数化实现效果创建londing.js函数文件londing.js中 import {Loading} from 'element-ui';let loadingInstance;export function loading_start() { loadingInstance = Loading.service({ fullscree...原创 2018-12-25 18:12:48 · 991 阅读 · 0 评论 -
Vue使用vue-simple-uploader上传文件夹
Vue使用vue-simple-uploader上传文件夹先睹为快1 点击上传“上传文件夹”按钮 2 选择文件夹 3 确定上传 4 上传进度 引入控件installnpm install vue-simple-uploader --savemain.js配置import uploader f...原创 2019-06-13 15:24:37 · 20717 阅读 · 42 评论 -
Vue国际化配置
Vue国际化配置1、引入vue-i81nnpm install vue-i18n --save2、创建不同语言的json格式文件在src文件夹下新建目录和文件,格式如下 src common lang en.js zh.js en.jsmodule.exports = { msg: { msg_we...原创 2019-07-05 15:00:39 · 1224 阅读 · 0 评论 -
在Vue中调用微信上传图片功能
在Vue中调用微信上传图片功能效果说明后台微信参数获取(略)上传流程点击图片控件位置,进行选择图片 选择相机拍照或图库上传 上传完成显示到图片控件开发流程引入weixin插件 页面初始化时获取微信认证参数【参数后台服务提供】,获取本页地址 图片点击事件进行图片上传、图片回显操作 后台从微信服务器中下载上传的图片到自己的服务器代码vue中引入weixin插...原创 2019-07-18 14:14:32 · 3761 阅读 · 4 评论 -
Vue利用百度地图初始化页面定位
Vue利用百度地图初始化页面定位结果展示获取百度ak地址:http://lbsyun.baidu.com/apiconsole/key 注册(认证)、创建应用得到ak(设置域名白名单)引入控件npm install vue-baidu-map --savemain.js中引入import Vue from 'vue';import BaiduMap from 'v...原创 2019-10-09 12:04:56 · 2977 阅读 · 0 评论 -
vue中el-tree实现单选复选框
vue中el-tree实现单选复选框遇到的问题使用vue的element框架时el-tree时,当填入复选框时,不能单选父节点解决办法结合el-tree属性的控制和js配合来实现单选父子节点 去掉父子节点的关联 监听checkbox改变事件,从而控制只选择一个节点 最后的效果效果 控件关键代码el-tree控件 <el-tree :...原创 2018-11-27 11:47:50 · 17873 阅读 · 18 评论 -
Vue自定义表单内容检查rules
Vue自定义表单内容检查rules先看个例子效果 错误时的效果 正确时的效果 组件 <el-form-item label="手机号:" prop="phone_number"> <el-input v-model="formPerson.phone_number"></el-input>&l原创 2018-12-04 12:04:59 · 5879 阅读 · 0 评论 -
Vue上传文件
Vue上传文件上传效果上传类型这里的文件暂定义为:doc、docx、rar、zip、pdf、txt【这个可以自己定义,后台进行判断即可】用到的框架及标签框架element 标签el-upload关键代码上传标签代码 <el-upload class="avatar-uploader" action="/peng/addF...原创 2018-11-07 14:58:29 · 4651 阅读 · 2 评论 -
在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能步骤新建vue文件(这里采用mint的标签库--就一个按钮~~)关键代码<template> <div class="login_div"> <mt-button id="wxsys" type="primary" v-on:click="sys_click()">扫一扫</原创 2018-03-26 11:58:00 · 33305 阅读 · 12 评论 -
解决Vue调用微信扫描不能连续扫描的问题
解决Vue调用微信扫描不能连续扫描的问题问题描述在Vue中调用微信的扫码功能,第一次请求可以正常访问,但是在该界面再次访问时,回调函数不能执行问题核心代码<template> <div> <div style="padding-left:40px;padding-right:40px;padding-top:8px;padding-bottom...原创 2018-04-03 19:15:31 · 2950 阅读 · 0 评论 -
Vue中树形结构简单实现
Vue中树形结构简单实现效果代码<template > <div> <grouplists :datas='datas'></grouplists> </div></template><script>export default { //这儿用的脚手架,若是普通文件,这儿就是new V原创 2018-04-25 18:12:10 · 6533 阅读 · 3 评论 -
SpringBoot使用WebSocket与vue进行交互
SpringBoot使用WebSocket与vue进行交互SpringBoot配置WebSocketpom文件中添加 <!--ws(start)--><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-...原创 2018-09-28 12:09:44 · 15719 阅读 · 6 评论 -
VUE中关于axios特别说明request failed with status code 404
VUE中关于axios特别说明request failed with status code 404现场还原这是在vue项目中,开始模拟数据用的是mock,进行假数据测试 在后台接口开发完毕之后,与真实数据做对接 当时在main.js是这样写的【除了长横线(-------------)的地方,其他地方暂时忽略】 import Vue from 'vue'import...原创 2018-10-09 16:48:48 · 90237 阅读 · 5 评论 -
Vue中动态设置img的src值
Vue中动态设置img的src值问题循环li组件时,动态设置img 设置img时,src属性报错src数据格式 "companyImages":[ "http://localhost:8080/cszj/image/image?image=2757dcrz7e0v5stxwqsvd4dk4ezdvvqo", "http://localhost:8080/csz...原创 2018-10-09 18:49:15 · 34541 阅读 · 2 评论 -
Vue图片上传预览
Vue图片上传预览想要的效果代码实现页面核心代码 <h3>添加新图:</h3><img src="" alt="" id="portrait" style="width: 300px;height: 200px;background-color: #eeeeee"/><input type="原创 2018-10-10 17:48:31 · 4396 阅读 · 0 评论 -
SpringBoot结合Vue实现图片上传
SpringBoot结合Vue实现图片上传效果页面图片上传 上传完成之后 Vue中图片上传核心代码在main.js中引入axios import axios from 'axios'Vue.prototype.$ajax = axios; 在图片上传的文件中写文件上传控件 <li> <h3>添加新图:&...原创 2018-10-10 18:13:58 · 11441 阅读 · 5 评论 -
Vue遇到的问题及解决
Vue遇到的问题及解决问题所属文件问题描述解决vue_demo1.html运算表达式书写的时候没有注意左右的间隙表达式规范书写,留有空隙vue_demo2.html声明vue对象时,用Vue不起作用创建Vue时,用Vue关键字出错,改用const或varvue_demo3.htmljavascript中写html标签看起来比较诡异写就ok,需要注意的是Vue.js2.0中废除replace函数(是...原创 2018-03-12 19:43:32 · 1567 阅读 · 1 评论