vue
关注
分享
扫一扫
小太阳...
这个作者很懒，什么都没留下…
展开
-
elementUi表格合并行数据并展示序号
实现合并行思路：需要一个数据来记录需要合并的行数据（数字几就代表合并几行，比如 [1, 2, 0, 1]就是第一行第四行不变，第二三行合并成一行），还要有一个变量来记录数组下标。原创 2022-11-04 11:26:35 · 2712 阅读 · 0 评论 -
Vue 中的 Render 全面详解 (渲染函数 & JSX)
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。简单的说，在 Vue 中我们使用模板 HTML 语法组建页面的，使用 Render 函数我们可以用 Js 语言来构建 DOM。因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转译成 VNode 的函数，而用 Render 函数构建 DOM，Vue 就免去了转译的过程。转载 2022-11-03 15:23:56 · 25143 阅读 · 3 评论 -
Vue-photo-preview（图片放大缩放，大图展示）
4.如果是很多张图片切换的话需要preview为相同值。基于photoswipe的vue图片预览插件。转载 2022-08-19 10:32:05 · 1218 阅读 · 0 评论 -
Vue中使用SVG-ICON
3、src/assets/icons/svg目录下，放置用到的svg图片文件，如图中user.svg。注：上述一步有些项目是用vue.config.js文件配置的，具体看具体配置。7、执行下列命令安装 svg-sprite-loader 插件。在Vue中使用svg-icon，可以按如下配置即可。8、代码中如何引用 svg 图标。...转载 2022-08-09 11:33:00 · 864 阅读 · 1 评论 -
img图片加载错误时显示默认图片
JavaScript用的onerror事件，vue用的@error。JavaScript写法。原创 2022-08-08 11:34:53 · 1824 阅读 · 0 评论 -
elemntUI限制时间选择器不能跨月并且不大于未来时间
elemntUI限制时间选择器不能跨月并且不大于未来时间原创 2022-08-08 10:28:01 · 786 阅读 · 1 评论 -
js和vue的图片加载完成事件
我的场景：需要图片在加载完成之后，获取图片的高度，给别的组件传值语法：onload 事件在图片加载完成后立即执行可以使用img的onload事件，等图片加载完成之后再执行其他操作js<body> <img src="xxx" onload="getImg()" > <script> function getImg() { console.log('需要执行的操作'); } </script></bo原创 2022-01-14 15:57:52 · 6522 阅读 · 0 评论 -
js判断设备是移动端还是PC端
根据用户代理来判断是pc端还是移动端 IsPC() { let userAgentInfo = navigator.userAgent; let Agents = [ 'Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod' ]; let flagPc = true; for (let i = 0; i < Age原创 2021-09-30 10:03:23 · 1250 阅读 · 0 评论 -
VUE自定义组件click事件不生效
<gw-legend class="u-legend" @click="changeLengend" /> changeLengend() { console.log('点击事件'); },发现控制台并不输入console的内容。原因是因为没有加上 native,官网对于 native 的解释为:你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符<base-input v-o..原创 2021-09-26 11:44:45 · 1095 阅读 · 0 评论 -
elementUL手动上传txt文件
需求如下：点击定制航线，从本地选择文件点击打开后直接调取接口主要代码如下： <el-upload v-if="item.uploadFlag" // 是否显示上传组件 ref="xlsUpload" :style="{ display: 'inline-block' }" :auto-upload="false" // 不自动上传 :on-change="fileOnChange" // 文件状态改变时的钩子 :before原创 2021-09-18 11:12:48 · 776 阅读 · 0 评论 -
把vue组件添加到body下
写了个xxx组件为了减少父级html的影响，需要把组件的$el放在body下在mounted放法中写：this.$nextTick(() => { const body = document.querySelector("body"); if (body.append) { body.append(this.$el); } else { body.appendChild(this.$el); } });转载 2021-09-17 17:25:34 · 3073 阅读 · 2 评论 -
elementUI中input组件的autofocus属性不生效
如图所以：点击航线名字需要切换输入框，输入框需要自动聚焦，这样即使啥也不修改也能执行失焦事件。elementUI文档上有一个autofocus属性，把autofocus设置成true发现并没有自动获取焦点。失效的原因：autofocus是vue中input的原生属性,element也支持这种方法,但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。解决办法：自定义指令在全局定义一个自动获取焦点的自定义指令，在所有组件中都可以使用v-focus来自动获取焦点。代.原创 2021-09-17 16:08:50 · 3806 阅读 · 0 评论 -
vue+elementUI实现滚动加载请求接口
需求如图所示：由于图片较大，一次全把数据请求回来难免会太慢，就需要滚动加载请求数据。实现：element组件：InfiniteScroll 无限滚动主要代码如下：<template> <div class="route-wrapper"> <ul v-infinite-scroll="infiniteScroll" // 在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执原创 2021-09-09 18:19:03 · 2270 阅读 · 1 评论 -
VUE中$refs和$el的使用
ref: 给元素或者子组件注册引用信息ref有三种用法：1.ref加在普通元素上，获取用this.$ref.xxx可以获取到dom元素。<div ref="system">测试</div>// 获取mounted() { console.log(this.$refs.system);}2.ref加在子组件上，用this.$ref.xxx可以获取到组件实例，可以使用子组件的所有方法。使用：// this.$ref.xxx.方法名()// 父组件<con原创 2021-08-12 17:25:35 · 6919 阅读 · 2 评论 -
element日期选择器限制上下浮动一个月内的日期并且小于今天
如下图所示：限制日期选择器只能上下浮动一个月并且要小于今天代码如下： <el-date-picker v-model="searchForm.creatTime" :picker-options="pickerOptions" class="setDatePicker" type="daterange" range-separator="至" start-placeholder="开始时间"原创 2021-07-30 10:32:06 · 396 阅读 · 0 评论 -
vue+scss实现一键换肤
大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux配合存储属性或接口来保存用户选择的主题。一、首先需要给项目下载配置Scss1.安装依赖npm install node-sass sass-loader --save-dev2.找到build中webpack.base.conf.js,在rules中添加scss规则{test: /\.scss$/,loaders: [转载 2021-07-09 17:32:22 · 1293 阅读 · 0 评论 -
vue带参数跳转打开新页面、新窗口
1.vue带参数跳转打开新页面this.$router.push跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面场景如下：点击首页的某一条任务的详情按钮，在当前页面打开任务详情页面，关闭详情弹框后返回首页代码如下 <span @click="watchDetail(scope.row)">详情</span> // 本页面跳转到详情 watchDetail(item) { this.$router.push(原创 2021-06-29 11:50:06 · 10867 阅读 · 0 评论 -
elementUI表单校验中关于一条form-item如何控制两个必填项
场景：如图：坐标中的经度和纬度都要控制必填思路：prop只绑定第一个输入框的值，rules中也只写第一个必选的验证，但是要写了一个validator验证这两个值必填，代码如下： <el-form ... :rules="editFormRules"> <el-form-item class="jt form-btn" label="坐标：" prop="lon">原创 2021-05-26 14:52:20 · 4777 阅读 · 4 评论 -
解决Vue项目中img的:src动态加载图片不成功
需求如下：需要动态加载图片，在写代码的时候发现，img标签直接动态绑定图片的相对路径的时候，图片不能显示，如下图效果控制台查看元素的时候，发现也已经渲染，但是页面就是不显示代码如下： <div class="legend-content"> <div v-for="(item, index) in legendData" :key="index" class="legend-item"原创 2021-04-08 15:54:09 · 6036 阅读 · 0 评论 -
关于vue 的 this.$refs 打印为undefined解决办法
我们都知道，利用ref父组件可以调用子组件的方法。示例如下： <weather-remind v-if="... " ref="weatherRemind" ... />import weatherRemind from '@/components/weather-remind/weatherRemind';components: { weatherRemind },mounted() { this.getSubscribeTotal();},meth原创 2021-03-23 16:40:23 · 1299 阅读 · 0 评论 -
vue.nextTick()方法的使用详解（简单明了）
什么是Vue.nextTick()？？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，<template> <div class="hello"&转载 2021-03-16 14:41:13 · 433 阅读 · 0 评论 -
vue中数据改变，视图不更新的原因以及解决方法（强制更新视图）
我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：1.数组数据改变时，使用某些方法操作数组，数据变了，但是视图并没改变。（页面没有监测到数据改变）解决办法：使用下面这些方法操作数组，其数据会被vue监测push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。替换数组：例如filter()、concat()和slice(),这些不会改变原始数组，但是会返回一个新数组。可以用新数组替代原数组。你可能认为这将原创 2021-03-16 11:20:13 · 14725 阅读 · 0 评论 -
elementUI点击多选框数据改变，视图不改变问题
先说一下我的场景：就是在表格里面选择某种产品，然后把这些产品加入订阅单，点击订阅单，就出现下面的图片，默认所有的产品全选，我就给所有数据加了一个chenked为true的属性遇到的问题：由于数据是从表格传过来的，然后点击发布渠道，发现控制台数据变了，但是视图并没有更新，如下图：我点击测试模型，控制台打印为false，但是视图就是不改变原因：由于我传过来的数据是数组，如下图，数组中数据发生变化，vue是侦听不到的，但是重写的这几个数组的方法（比如splice()、pop、push等）修改的数组是可原创 2021-03-12 10:59:54 · 4349 阅读 · 3 评论 -
vue实现点击复制功能
项目中需要复制链接，如下图：第一步：安装依赖npm install --save v-clipboard第二步: 在mian.js(全局)引入并注册组件import Clipboard from 'v-clipboard'Vue.use(Clipboard)第三步：具体使用<a @click="copyUrl(record.fileUrl)">复制链接</a> // 点击复制的方法 copyUrl(url) { // 创建一个 Inp原创 2021-01-21 17:27:57 · 1623 阅读 · 0 评论 -
vue的父子组件通信
父子组件通信：1.父组件向子组件传递数据，子组件可以使用 props 接收父组件的数据2.子组件可以使用this.$emit触发父组件的自定义事件父组件通过props向子组件传递数据第一步：需要在父组件的data里面定义好所需要的数据data() { return { tabsData:[ ... ] }},然后在父组件中子组件的标签里面进行数据绑定（如果传递的...原创 2020-04-15 13:19:31 · 237 阅读 · 0 评论 -
Vue的slot插槽
插槽概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显不显示，以及怎样显示，由父组件决定；但是插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。简单的说，插槽就是可以让开发者自定义地往子组件中放置代码片段而开发出来的东西。就好像专门在某几个地方弄了几个槽（子组件中），我们开发时，就可以在对应的槽中放置对应的代码了。分类...原创 2020-04-13 16:54:37 · 264 阅读 · 0 评论 -
vue中父组件调用子组件的方法
我们都知道在vue中ref可以获取到某个DOM，但他也可以用来获取子组件的实例，调用子组件的方法。子组件代码如下：<template> <div/></template><script>export default { methods: { childMethod() { console.log('我是子组件的方法'); } }};</script>父组件代码如下：在父组件中给引入的子组原创 2020-06-24 15:38:52 · 794 阅读 · 0 评论 -
this.$set的正确使用
this.$set(obj, key, value)我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div转载 2020-05-29 11:16:06 · 945 阅读 · 1 评论 -
vue-draggable-resizable 可拖拽缩放组件的使用
需求：实现这个天气风险提醒框可以拖拽可改变大小实现：利用vue-draggable-resizable组件官网链接：https:/u二恶/developer.aliyun.com/mirror/npm/package/vue-draggable-resizable#live-playground实现方法：在vue原创 2020-05-21 14:38:40 · 6938 阅读 · 0 评论 -
vue接收后端文件流(new Blob)下载文件（导出表格）
代码： <el-button type="primary" size="small" class="button-export" @click="exportHandle">导出</el-button> exportHandle() { let para = { ... }; downHistoryForecastForSeaZone(para) .then(re原创 2020-05-20 11:43:42 · 4087 阅读 · 0 评论 -
vue+element实现动态表格（动态生成表头）
场景：选中左侧的船舶，点击确定后，右侧动态生成表头这个表头可以是后端给的数据，当然也可以是前端点击后自己配置数据。我用的是前端自己存储表头数据。部分代码如下： <el-table-column v-for="item in tableColumnList" :label="item.propName" :property="item.prop" :key="item.prop" align="center"> <tem原创 2020-05-11 19:28:58 · 8426 阅读 · 0 评论 -
Vue事件总线（EventBus）的使用
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。但是两个页面没有任何引入与被引入关系，该怎么通信呢？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。EventBus的使用1.初始化（有两种方式），首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。（1）新创建一个 .j原创 2020-05-11 18:45:36 · 800 阅读 · 0 评论 -
vue获取元素高度的方法
vue获取元素的高度 <div ref="getHeight" class="block"/> .block { width: 100px; height: 100px; background: blueviolet; border: 2px solid pink; padding: 10px; margin: 5px; }获取高度值（包括元素高度、内边距和边框） let height原创 2020-08-03 15:33:06 · 6897 阅读 · 0 评论 -
vue computed正确使用方式
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，vue 提倡使用计算属性。需要特别说明：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解讨论 computed 和 watch 之间的区别前，我们先看下 computed 和 methods 有何区别？computed or methods理论上，computed 所有实现可以使用 methods 完全替换。<p&g转载 2020-07-02 11:47:32 · 1222 阅读 · 0 评论 -
对vue的computed（计算属性）的理解
vue的计算属性：1.在computed属性对象中定义计算属性的方法，在页面使用{{方法名}}来显示计算结果。2.通过getter/setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算（计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算）。<template> <div class="sea"> <div class="frost-content"> 姓名：<input原创 2020-07-02 11:20:10 · 619 阅读 · 0 评论 -
前端vue中实现文件下载的几种方法
第一种 前端创建超链接，通过a标签向后端发送get请求，需要给a标签添加一个download属性这种写法是创造了一个a标签，把地址写到a标签里再用js调用点击，实现访问文件地址就是下载了代码如下: <a @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)" &...原创 2020-04-22 14:38:29 · 62530 阅读 · 4 评论