vue
zongfunday
这个作者很懒,什么都没留下…
展开
-
vscode配置vue自定义模板
1.点击右下方设置里的用户代码片段2.新建文件vue.json3.把以下代码复制进去 我下面的是vue3ts less{ // 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 ..原创 2022-05-24 12:01:52 · 872 阅读 · 0 评论 -
阻止视频video标签 点击视频区域播放暂停
myVid = document.getElementById("video1"); myVid.addEventListener("click", mouseHandler, false);function mouseHandler(event) { // 阻止视频默认点击事件 event.preventDefault()}原创 2022-05-11 18:23:32 · 1880 阅读 · 0 评论 -
自定义组件使用v-model
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件//父组件 输出:{{childValue}} <child v-model="childValue"/>//子组件<template> <div> <el-button @click = "$emit( 'input',!value )" >v-model通过value子组件获取父组件的值 在通过emit(inp.原创 2022-05-10 15:30:21 · 458 阅读 · 0 评论 -
vue一个页面多个相同组件 传递过去的数据 无法渲染
//多个相同组件数据改变dom却不更新 因为每次更新都是虚拟dom 要为每个虚拟dom 加一个key值 分辨出来是哪个dom数据更新了 准备更新dom//:key="timeRefusr" <cav-img ref="CanvasBlock" :type="types" @imgLastPoint="imgLastPoint" :alg..原创 2022-04-27 11:47:45 · 530 阅读 · 0 评论 -
数据改变 音频开启与关闭
//audio<template> <div style="position:absolute;z-index:1"> <!-- {{ wsAdding }} --> <audio src="../../../public/static/click.mp3" id="myaudio" ref="fhshj" controls="controls" loop="false" .原创 2022-03-14 09:49:29 · 453 阅读 · 0 评论 -
绑定class
:class="[activeId == info.id ? `edit_item_active_${info.bagStatus}` : 'edit_item_active']" :class="`status${info.bagStatus}`"原创 2022-03-04 11:25:13 · 51 阅读 · 0 评论 -
get导出文件
/* * get下载文件 * @param url:地址 * @param data:参数 */ async getDownFile(url, data){ return axios({ method: 'get', params: data, dataType: 'json', url: url, response...原创 2022-02-15 16:32:08 · 475 阅读 · 0 评论 -
el-time传递数据给后台
时间格式: <el-time-picker is-range v-model="form.timePoint" format = 'HH:mm' value-format = 'HH:mm:ss' range-separator="至" placeholder="选择时间范围"原创 2022-01-28 11:03:42 · 1066 阅读 · 0 评论 -
js改变数组对象属性名
let data= [ { id: "22", name: "全部", rtsp: null, status: null, videos: [ { id: "2", name: "区域一(在线1/总数4)", rtsp: null...原创 2022-01-21 10:45:06 · 2531 阅读 · 0 评论 -
按需引element组件 避雷
写的一大串那些 别搭理他们哦 很简单就三步第一步:安装babel 实际上在创建vue项目的时候已经安装第二步:安装elementnpm i element-ui -S第三步:main.js引入并使用import 'element-ui/lib/theme-chalk/index.css'import { Button } from 'element-ui'Vue.use(Button)...原创 2021-12-27 18:20:03 · 119 阅读 · 0 评论 -
el-popover 鼠标移入获取数据并显示popover
<ul v-for="(item,index) in left_nav" :key="index"> <el-popover placement="top-start" //自定义触发popover事件 trigger="manual" v-model="visible" > .原创 2021-12-16 17:25:59 · 2406 阅读 · 0 评论 -
异步传参 第一次获取数据为空
//1、通过异步获取数据 this.api.apiDetail(this.form.id).then((res) => { this.form = res.data; this.form.outParams = JSON.parse(res.data.outParams) this.form.inParams = JSON.parse(res.data.inParams) console.log(this.form,'thi.原创 2021-12-15 16:33:55 · 1348 阅读 · 0 评论 -
vue项目首页加载缓慢
1.看network资源加载时间 整整12s2.发现有个图片20m过大 进行压缩了 到了10s3.路由懒加载 到了8.3s4.移除 preload 插件和 prefetch 插件chainWebpack: config => { // 移除 preload 插件 config.plugins.delete('preload') // 移除 prefetch 插件 config.plugins.delete('prefetch') 5.本地已经很慢了.原创 2021-12-06 15:17:49 · 557 阅读 · 0 评论 -
图片或文件转base64
//file文件转base64方法 imageToBase64(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); let fileResult = ""; reader.readAsDataURL(file); //开始转 reader.onload = function () { ...原创 2021-12-01 15:06:45 · 225 阅读 · 0 评论 -
vue动态配置服务器
// 动态配置服务器// ' '就是到什么服务器 就读取什么服务器let baseUrl = process.env.NODE_ENV === 'development' ? 'http://10.15.123.207/' : ''原创 2021-11-15 11:48:17 · 681 阅读 · 0 评论 -
函数既携带标签事件又携带参数
<div v-for="(item,index) in posData" :key="index" class="datamodule" :style="{left:((Number(item.x?(item.x*1):0)*4.5 ) + 'px'),top:((100 + Number(item.y?item.y*1:0)*4.5 ) + 'px')}" > <img :src="imgState(item.status + item.deviceType)" .原创 2021-11-11 13:46:41 · 820 阅读 · 0 评论 -
侧导航组件递归
<template> <div> <template v-for="(node, index) in nodes"> <el-submenu :index="index + node.id" v-if="node.ptype=='MENU' " :key="node.id" :id="node.id" > <template slot=..原创 2021-11-10 15:48:55 · 241 阅读 · 0 评论 -
post下载文件流
postDownFile(url, data){ return axios({ method: 'post', data: data, dataType: 'json', url: url, responseType: 'arraybuffer', headers: { 'Content-Type': 'ap...原创 2021-10-29 17:04:05 · 339 阅读 · 0 评论 -
v-bind的高级用法
//用于父子组件传参 //比如:item = { "placeholder": "12", "label": [], "name": ''} <component v-bind="item" /> //子标签在接收的时候 整体直接props //比如接收上面的数据: props: { placeholder: { type: String, def...原创 2021-08-24 18:12:18 · 266 阅读 · 0 评论 -
v-model高级用法
//父组件 <!-- ???? 给子组件标签绑定v-model --> <FilterForm v-model="formData" />//子组件//接收父组件的数据props: { // ???? 子组件使用value接收父组件的传参 value: { type: Object, required: true } }...原创 2021-08-24 17:27:13 · 148 阅读 · 0 评论 -
this.confirm与async await嵌套使用
async modification(row, operate_type) { const { acticvityId } = row; console.log(JSON.stringify(row)); const parms = { operate_type, acticvityId, user_id: user.state.userInfo.user.id, }; console.lo...原创 2021-06-18 20:04:50 · 1692 阅读 · 0 评论 -
使用map以及foreach遍历数组对象出错
data.map((item) => { // let a = item.geoJson.corrs.map((value) => value.forEach(Number)) let a = item.geoJson.corrs a.map((value) => { let crros = item.geoJson.corrs for(let i=0;i<c...原创 2021-06-11 20:00:41 · 1156 阅读 · 0 评论 -
vue3引入antd 不是vue-cli3
antd版本号要用xxrc.1的,会兼容vue3不是vue-cli3如果不知道怎么安装该版本 就直接把版本复制过来 cnpm i会帮你自动安装下面是main.js里的配置问题就解决啦 我看过其它很多博客 也尝试了但是没有用 这个真的可以解决哦...原创 2021-05-27 16:48:26 · 357 阅读 · 0 评论 -
实现一个页面多个文件的批量下载
浏览器的安全机制决定着 不能短时间内打开多个新的空白窗口但是一般下载都是需要打开新的窗口,多个下载就需要快速打开多个新的窗口所以就需要另辟蹊径 // 获取总的url let urlarr = ['https://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.3/source/apache-maven-3.6.3-src.zip', 'https://nodejs.org/dist/latest-v10.x/node-v10.2原创 2020-11-10 15:15:38 · 1925 阅读 · 0 评论 -
前端通过后端传过来的‘\n‘换行失败问题
简介:使用的是iview vue table组件目标:传过来的数据如果有,就换行使用方法:js:{ title: "工作成果", align: "center", key: "file_names", render: (h, params) => { if(params.row.file_names == "") { return h('span', ''原创 2020-11-05 11:51:20 · 1967 阅读 · 0 评论 -
跨域的三种解决方式
1.谷歌浏览器设置 disble 目前这是最简单的 缺点是不能联网2.js框架的proxyble设置跨域 以及vue框架的proxyble3.nginx 万能跨域 比较推荐 无副作用 相当于自己开了个外挂服务器4.还有一种情况 当时我遇到有些懵 明明获取到数据了 却无法读取 这也是跨域的一种 使用jsonp获取数据以上毫不夸张的说 任何跨域问题都可解决 根据自己公司情况和个人情况去选择...原创 2020-06-19 11:00:48 · 263 阅读 · 0 评论 -
已经获取数据 但是遍历不了怎么办
这里的this不能指向window,指向父级函数,使用data作为数据的容器,然后载遍历 即可使用原创 2019-08-23 14:56:55 · 400 阅读 · 0 评论 -
npm环境报错解决方案
C:\Users\Administrator\Desktop\Vuetest>npm run devnpm ERR! Windows_NT 10.0.14393npm ERR! argv “C:\Program Files (x86)\nodejs\node.exe” “C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli....原创 2019-07-12 10:15:32 · 892 阅读 · 0 评论 -
vue 面包屑功能利用 vue-router meta属性简单实现
直接贴路由配置文件代码{path: ‘/Trafficaccidentddetail’,name: ‘Trafficaccidentddetail’,meta: {title: ‘交通事故详情’,breadcrumb:[{name:‘事件管理’,path:’/Trafficaccident’},{name:‘交通事故’,path:’/Trafficaccident’},...转载 2019-07-16 14:59:54 · 2729 阅读 · 0 评论 -
vue中的ref和$refs的使用
更新时间:2018年11月22日 14:38:57 作者:随她 我要评论这篇文章主要介绍了vue中的ref和$refs的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM...转载 2019-07-16 14:58:44 · 1020 阅读 · 1 评论