vue
会迟到但不会缺席
这个作者很懒,什么都没留下…
展开
-
uniapp微信小程序授权订阅消息
利用openid、token和写死的template_id和data进行发送服务通知。进行弹窗uni.requestSubscribeMessage。增加授权使用的弹出,因为必须要用户手动触发,所以增加弹窗。获取access_token。post请求的json信息。原创 2022-09-22 15:53:56 · 913 阅读 · 1 评论 -
uniapp安卓启动升级版本 强制升级 整包更新
使用uniapp开发简单的安卓应用,需要做启动版本强制更新,记录下原创 2022-03-16 21:34:09 · 1691 阅读 · 1 评论 -
vue中动态水印
效果:一,根元素div上增加<div class="rootZhy"></div>二,增加方法watermarkZhy(content) { let container = document.body; let width = '120px'; let height = '200px'; let opacity = '0.2'; let fontSize = '20px';原创 2021-05-15 22:42:02 · 435 阅读 · 0 评论 -
vue实现两组号码比对并高亮展示
<div> <el-divider content-position="left">重点关注</el-divider> <div> <span>第一组号码:</span> <span v-for="data in wwResult" :class="data.class">{{data.value}}</span> <.原创 2021-04-03 09:24:01 · 466 阅读 · 0 评论 -
vue子页面调父页面方法提示找不到this.$parent
父:index.vue<addComp v-if="showAdd" :see="see" :show.sync="showAdd" />import addComp from "./add";....components: { addComp },子:add.vuethis.$parent.getList();想调用父类中的getList方法。解决:查看父类中引用子类的地方,是不是嵌套.原创 2021-03-26 13:40:04 · 1631 阅读 · 0 评论 -
js中对数组中的值动态修改
背景在做页面时,有个需求是根据服务端的数据,动态生成输入框,输入销量数据,上传提交。因为使用的控件原因,需要将某些输入值格式化,需要便利修改数组内的数据。解决数据salesVolume: [0,1,'',8]将空字符串替换为0this.salesVolume.forEach(function (item, index, arr) { item = item ? Number(item) : 0; arr[index] = item;});...原创 2021-03-19 18:39:55 · 4203 阅读 · 0 评论 -
vue使用iframe嵌入html并传参
前言因为项目需要使用其他封装好的html页面,打算直接使用iframe嵌入,记录下传参时候的问题。vue端<iframe ref="iframeId" :src="subUrl" frameborder="0" class="iframe" scrolling="auto" @load="sendMessage" ></iframe>.iframe {原创 2021-01-10 11:29:48 · 2016 阅读 · 1 评论 -
内网环境使用本地arcgis的apijs
背景因为项目需要部署到内网环境, 所有无法通过网络下载相应js文件,需要本地化下载https://developers.arcgis.com/downloads/apis-and-sdks需要先登录才可以下载下载后会得到一个压缩文件,然后解压缩找到版本号的那个层级准备nginx或tomcat部署的时候可以先将此功能提前放到应用服务器,将4.17拷贝到应用服务器,我这里使用tomcat,将4.17文件夹整个拷贝到webapps下配置文件还需要修改其中的配置需要.原创 2021-01-04 18:12:43 · 609 阅读 · 2 评论 -
esri-loader 3.x区域地图按需选择
样式html版本<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title&原创 2021-01-04 18:10:37 · 393 阅读 · 0 评论 -
arcGIS 3.x版本实现区域点击并展示自定义数据
样例html写法<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Feat原创 2021-01-04 18:09:10 · 480 阅读 · 0 评论 -
使用esri-loader在arcGIS地图标点
安装esri-loadernpm install --save esri-loader默认使用的是4.17版本 https://developers.arcgis.com/javascript/latest/guide/esri-loader/使用3.x版本import { loadScript, loadCss, loadModules } from 'esri-loader'mounted() { loadScript({ url: 'https://js.arcgis.c原创 2021-01-04 18:08:17 · 2540 阅读 · 0 评论 -
vue使用el-table根据服务端json数据动态合并列
效果图服务端数据json模拟数据,代替业务敏感数据,如果服务端没有排序,需要先排序处理[{"name":"test","number":0,"type":0},{"name":"test2","number":0,"test":0},{"name":"test2","number":0,"test":1}]前端数据封装处理table<el-table max-height="400" size="small" :data="list" :span-method.原创 2020-10-16 14:25:21 · 1121 阅读 · 0 评论 -
js字符串与数字混合的字符串排序要求先字符后数字
原数据是这样的:var list = ['abc123', 'abc11', 'abc2']希望得到的排序结果是 abc2,abc11,abc123 就是先按照字符串排字符或文字,然后按照数字排解决方案:var list = ['abc123', 'abc11', 'abc2']var list2 = []list2 = list.sort(function(a, b) { return a.localeCompare(b, 'zh-CN', { numeric: true })原创 2020-10-15 10:38:30 · 3189 阅读 · 3 评论 -
vue使用element组件el-progress和文字一行
想要实现的效果<span style="display: flex;">进度<el-progress :percentage="100"></el-progress></span><style scoped> .el-progress{width:60%;}</style>原创 2020-06-04 11:12:40 · 11200 阅读 · 0 评论 -
vue中使用el-dialog中ref获取不到,无法绑定事件
代码如下<div class="zhy" ref="zhy"></div>....var zhyDiv= this.$refs.zhy//这样正常//---------------------------------------------<el-dialog title="zhy" :visible.sync="zhyDialog" width="100%"> <div class="zhy" ref="zhy">原创 2020-05-11 15:16:32 · 4735 阅读 · 1 评论 -
vuejs使用参数作为ref,xxx.xxx
const zhy = 'zhy' + 1;//想要得到类似 this.abc.zhy1.xxthis.abc[zhy].xx原创 2020-04-09 20:26:47 · 592 阅读 · 0 评论 -
vue打包可以配置接口ip并在docker中使用
在项目的static下新建文件config.json{"BASE_API":"http://192.168.1.47:8080"}在项目的main中读取这个文件并放到存储import axios from 'axios'axios.get('./../static/config.json').then((result) => { localStorage.setIte...原创 2020-03-13 21:16:49 · 964 阅读 · 0 评论 -
vue动态修改List集合的中的数据并
this.list.forEach(user => { const position = this.list.indexOf(user) // 修改list中的数据 user.isOnline = true this.$set(this.list, position, user) })...原创 2020-03-13 21:10:11 · 7926 阅读 · 0 评论 -
vue上传文件后回显文件内容
vue<el-upload drag action="#" :multiple=multiple ref="upload" list-type="file" :show-file-list="false" :http-request="uploadFa" :before-upload="beforeExcelUpload"> <i ...原创 2020-02-28 16:23:54 · 5669 阅读 · 0 评论 -
element-ui 复选框 type="selection" 设置disabled
<el-table-column type="selection" :selectable='checkboxT' disabled='true' width="55"> </el-table-column>methods:{ checkbox...转载 2020-02-27 18:21:57 · 4425 阅读 · 0 评论 -
vue+stringboot实现下载
java@GetMapping("download") public void downloadPhylo(@PathVariable String uuid, HttpServletRequest request, HttpServletResponse response) { try (InputStream inputStream = new FileInput...原创 2020-02-25 13:20:18 · 209 阅读 · 0 评论 -
vue中使用infinite-scroll-vuejs实现下拉滚动条分页
安装:npm install vue-infinite-scroll --save配置main.jsimport infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll)vue<template> <div> <el-popover placement="...原创 2020-02-24 18:20:34 · 810 阅读 · 0 评论 -
vue生成txt文件下载
sequenceDownload(row) { const element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row.asemJson)) element.s...原创 2020-02-14 10:58:56 · 8323 阅读 · 3 评论 -
根据完成时间计算百分比
progressBar(row) { // 当前按照每秒11m const second_data = 11 * 1024 * 1024 // 需要的秒数 const need_second = parseInt(row.fileSize / second_data) // 任务开始时间 const ...原创 2020-02-11 23:06:46 · 1492 阅读 · 0 评论 -
vue使用Vidage实现全屏动画视频展示
首先vue导入Vidage包npm install vidage --save 在需要使用的页面导入import Vidage from 'vidage'加入样式.Vidage__backdrop, .Vidage__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0}...原创 2018-09-26 14:11:53 · 3020 阅读 · 1 评论 -
java做图片点击文字验证码
效果: import com.datbc.youpinchain.admin.service.ImgCheckService;import com.datbc.youpinchain.db.util.MD5Utils;import com.datbc.youpinchain.db.util.ResponseUtil;import lombok.extern.slf4j.Slf4...原创 2018-09-19 11:05:36 · 2320 阅读 · 0 评论 -
vue点击图片查看大图使用插件 vue-photo-preview
1、npm install vue-photo-preview --save2、import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' import Vue from 'vue' Vue.use(preview)3、# html//在img标签添加pre...原创 2018-09-17 12:00:20 · 9899 阅读 · 12 评论 -
VUE-ElementUI 时间区间选择器
官方文档中使用picker-options属性来限制可选择的日期一,单个输入框<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker&g原创 2018-09-11 14:06:19 · 6151 阅读 · 0 评论 -
vue运行后没有实时编译解决
正常启动流程npm installnpm run dev这两步就可以启动了,但是之前的项目都是会自动更新的,这次却没有,后来发现需要在执行一个命令npm run build -- --watch然后在启动就可以了---------------------------------------------------------------------------如果是we...原创 2018-07-31 09:36:00 · 15039 阅读 · 1 评论 -
vue常用总结
class分支判断<span :class="[item.choose ? 'choose' : 'unselected']"vue中参数作为可以点击的对象赋值const a = 'businessLicense' this.enterpriseDto.enterpriseAnnex[a] = '123'排序minYear() { /...原创 2018-08-03 16:54:25 · 161 阅读 · 0 评论 -
vue列表类型数据展示图片
方式一:<el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" class="demo-table-expand"> <el-form-item原创 2018-07-13 15:54:15 · 8999 阅读 · 0 评论 -
vue点击跳转和其他页面获取此页面传递的参数
<div class="card-panel" @click="handleSetLineChartData('unTotal')">传递参数:methods: { handleSetLineChartData(type) { if (type === 'userTotal') { this.$router.push({ path...原创 2018-06-13 19:24:24 · 8979 阅读 · 0 评论 -
初始vue,安装,开发,打包
首先安装所需要的环境:node.js环境(npm包管理器)vue-cli 脚手架构建工具cnpm npm的淘宝镜像安装node.js从node.js官网下载并安装node。安装成功npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。OK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导...原创 2018-05-29 17:56:25 · 712 阅读 · 0 评论 -
vue的Element组件上传文件el-upload上传成功后清空
如果有多个组件可以使用:file-list,可以设置file-list="[]"其中timer是需要修改的,每次新增或修改的时候修改timer的值即可。解决了之后可以给自己放松下,玩下这个解压的微信小游戏。然后清空normal字段即可。原创 2018-09-30 10:31:05 · 49272 阅读 · 2 评论 -
vue list动态修改 upload多次上传清空
list动态赋值import Vue from "vue"this.tableData[i].xxx=aaaVue.set(this.tableData,i,this.tableData[i]) 清空upload上传const mainImg = this.$refs.upload; if (mainImg && mainImg.length) {...原创 2019-01-24 11:49:33 · 2047 阅读 · 0 评论 -
vue使用element-ui上传多张图片及回显
效果:vue封装上传接口:storage.jsimport axios from 'axios'import { Message } from 'element-ui'const service = axios.create({ baseURL: process.env.OS_API // api的base_url})service.interceptors.respon...原创 2019-08-30 14:37:19 · 22393 阅读 · 31 评论 -
vue 中el-card点击事件失效解决
@click="openArticle('123')替换为@click.native="openArticle('123')原创 2019-05-07 17:53:05 · 17638 阅读 · 1 评论 -
vue 中使用html2canvas下载普通div节点
<div class="application-form" id="applicationForm">....</div>print() { const that = this event.preventDefault() var canvas2 = document.createElement('canvas'...原创 2019-05-08 18:07:15 · 768 阅读 · 0 评论 -
vue生成二维码
安装QRCode插件 cnpm i QRCode --save <canvas width="200px" height="200px" id="canvas"></canvas> import QRCode from 'qrcode' useqrcode(data) { var canvas = doc...原创 2019-05-08 18:04:42 · 178 阅读 · 0 评论 -
vue使用echarts实现地图预警展示
vue安装依赖npm install echarts -Smain.js中引用import echarts from 'echarts'Vue.prototype.$echarts = echartsimport china from 'echarts/map/json/china.json'echarts.registerMap('china', china)新建...原创 2019-04-25 16:55:11 · 2763 阅读 · 0 评论