Vue实用功能
快起来搬砖了
这个作者很懒,什么都没留下…
展开
-
【Vue功能】weixin-js-sdk实现vue分享功能
h5链接分享到微信好友、朋友圈的链接卡片内容可以自定义安装微信sdk使用新建文件:plugins/wechat.js页面使用注意:使用微信自定义分享功能的时候,当分享链接中存在中文的时候,要进行encodeURIComponent(),原因:在安卓手机上能成功自定义分享,ios手机上则不能成功分享,安卓手机会自动encodeURIComponent,而IOS不会。原创 2022-12-07 19:30:00 · 781 阅读 · 0 评论 -
Vue修改数组对象中的键名
Vue修改数组对象中的键名/** * params date <array> 需要修改的json格式的数组 * params newKey <string> 需要修改成的key值 * params oldKey <string> 需要被修改的key值 */ changeTreeDate(zf_jsonObj, newKey, oldKey) { let str = JSON.stringify(zf_jsonO原创 2021-09-14 17:05:18 · 1654 阅读 · 0 评论 -
【Vue实用功能】彻底搞懂Vue中的Mixin混入
【Vue实用功能】彻底搞懂Vue中的Mixin混入Mixin和VueX的区别原创 2022-10-28 15:27:56 · 3158 阅读 · 0 评论 -
【Vue实用功能】Vue实现拖拽元素、列表拖拽排序
【Vue实用功能】Vue实现拖拽元素、列表拖拽排序左右两个容器,左边和右边的元素可以拖动互换列表拖拽排序原创 2022-10-27 11:23:13 · 3434 阅读 · 1 评论 -
【Vue实用功能】Vue中H5页面缓存解决方案
每次更新H5页面的时候,都需要刷新或者清楚缓存,才能加载到最新的代码,这大大降低了用户的体验。原创 2022-10-24 14:19:27 · 1916 阅读 · 0 评论 -
【Vue实用功能】Vue开发中非父组件之间的通信
1. 父子组件之间的通信问题 2. Vue开发中 `$emit、$on和$off` 的用法 3. eventBus遇到数据不更新的问题原创 2022-10-12 11:28:54 · 592 阅读 · 0 评论 -
【Vue实用功能】Vue监听浏览器刷新和关闭事件
【Vue实用功能】Vue监听浏览器刷新和关闭事件。在前端开发中,我们通常会遇到这样的需求,用户离开、刷新页面前,修改数据未进行保存操作,需要提示框提醒用户。原创 2022-10-11 16:08:02 · 3954 阅读 · 0 评论 -
Vue移动端各种机型判断
#Vue判断是否为移动端/IOS/当前设备是否为手机Vue移动端各种机型判断判断当前设备是否为移动端原创 2021-12-16 14:07:31 · 5962 阅读 · 0 评论 -
【Vue实用功能】Vue实现浏览器全屏退出全屏
Vue实现浏览器全屏和退出全屏功能原创 2022-08-18 14:12:29 · 516 阅读 · 0 评论 -
【Vue实用功能】Vue数组中的某属性拼接成字符串
Vue数组中的某属性拼接成字符串。原创 2022-08-09 09:39:15 · 2772 阅读 · 0 评论 -
Vue最全的获取时间和时间格式转换方法
vue获取当前日期、vue 获取当前时间 年月日 时分秒、Vue如何获取当前时间、Vue 获取当前时间并格式化、Vue js实时显示当前时间、vue.js 获取当前时间、vue中获取当前的时间原创 2021-11-22 09:48:15 · 1224 阅读 · 0 评论 -
【Vue实用功能】Vue 项目首次打开加载很慢的优化方案
当SPA(单页应用程序)变得很复杂时,构建后的包会变得很大,从而导致页面的加载时间过长。vue-router 支持 webpack 内置的异步模块加载系统。所以采用路由被访问时按需加载,使用较少的路由组件就不用打包进 bundles 中。方案2:CDN加速...原创 2022-06-20 14:54:49 · 5763 阅读 · 1 评论 -
element-ui 的el-popover 自定义弹出和关闭
element-ui 的el-popover 自定义弹出和关闭业务需求: 鼠标悬停打开弹窗,点击弹窗里面的内容后关闭弹窗Element 中 Popover 弹出框的弹出方式有 hover,click,focus,手动激活几种方式,根据业务需求,可以如下使用:el-popover弹出框 关闭和打开分别用 doClose() 和 doShow() 方法 ,Element UI文档中没有提到这两个方法 <el-popover placement="bottom" ref="popover原创 2022-05-16 13:13:46 · 8037 阅读 · 5 评论 -
【Vue实用功能】vue滑块组件验证
vue滑块验证,图片验证,图片旋转验证,滑动验证注:Vue3均使用按需引入1、 基本滑块验证组件// 安装npm i vue-drag-verify2 -S// 引用: main.js 中引用import Vue from 'vue'import dragVerify from 'vue-drag-verify2'Vue.use(dragVerify)<template> <div> <h3>模块验证:</h3>原创 2022-04-26 11:28:22 · 11315 阅读 · 8 评论 -
【Vue实用功能】Vue中实现移动端的scroll滚动
Vue中实现移动端的scroll滚动介绍:在移动端或PC,页面的部分内容需要我们让其在页面滚动,这时候我们都会使用::-webkit-scrollbar来修饰原生滚动条,这样会影响滚动条对宽度的检测,所有就有了该组件,不需要配置横向或纵向滚动,自定义滚动条完全按照原生的方式去显示,如果内容区域存在纵向滚动条,使用它后将替换纵向滚动条组件:vue-custom-scrollbar安装//npmnpm install vue-custom-scrollbar//yarnyarn add vue原创 2022-04-24 17:03:48 · 5333 阅读 · 2 评论 -
Vue将base64转换为File文件类型
Base64 转 File主要应用场景:文件上传转换函数: dataURLtoBlob(dataurl, name) { var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[原创 2022-01-20 10:01:58 · 4130 阅读 · 0 评论 -
Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器
Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器粘贴图片:vue-quill-editor复制图片实际上会以 base64 形式的进行一个上传,写进数据库后会导致数据一些加载问题**解决方法:**将复制的图片先上传到服务器,再将服务器返回的图片链接地址插入img标签中优化:mounted() { this.editor = this.$refs.myQuillEditor.quill; addQuillTitl原创 2022-01-19 15:57:04 · 2431 阅读 · 0 评论 -
vue实现简单瀑布流布局(vue-stick)
vue-stickgithub地址:https://github.com/bh-lay/vue-stick一款基于 vue.js 的瀑布流组件。demo: https://bh-lay.github.io/vue-stick/demo/实例 : http://bh-lay.com/blog注意:我这里主要是移动端,当然,你也可以在PC端使用,根据个人需求npm 安装npm install -s vue-stick全局引用:import Stick from 'vue-stick'Vue原创 2022-01-19 14:27:00 · 1770 阅读 · 5 评论 -
Vue 使用three.js实现简单全景图
Vue 使用three.js实现简单全景图安装cnpm install three -S全景页面引用import * as Three from 'three'html模块<template> <div> <div id="containerVr"></div> </div></template>js模块<script> // 引入THREE impo原创 2022-01-12 14:56:07 · 1195 阅读 · 0 评论 -
Vue地图导航
在Vue中,通过经纬度进行高德地图导航1、通过超链接导航<a href="https://uri.amap.com/marker?position=120.320294&lat=31.482944&name=无锡市滨湖区****"> <p class="title">无锡市滨湖区</p> <p class="text">地址:无锡市滨湖区****</p></a>2、通过事件导航 /**原创 2022-01-11 15:46:08 · 1181 阅读 · 0 评论 -
Vue滑动隐藏图标效果
Vue实现固定定位图标滑动隐藏效果页面滚动前页面滚动后<template><!-- 注意:我这里是Vue3,所以最外层没有套一个div盒子 --> <!-- <router-view></router-view> --> <div class="main"> <div class="toAsk" :class="[ !transition ? 'fixed-transition' : '原创 2022-01-10 14:32:32 · 925 阅读 · 0 评论 -
Vue实现时间加一个数字再转时间格式
实现时间加一个数字再转时间格式 // 时间转换 getNewDay(dateTemp, days) { var dateTemps = dateTemp.split("-"); var nDate = new Date(dateTemps[1] + '-' + dateTemps[2] + '-' + dateTemps[0]); //转换为MM-DD-YYYY格式 var millSeconds = Math.abs(nDate) +原创 2021-12-13 15:48:05 · 659 阅读 · 0 评论 -
Vue 拖拽缩放组件 vue-drag-resize属性
1、插件安装 cnpm install --save vue-drag-resize2、main.js全局引用 import VueDragResize from 'vue-drag-resize' Vue.component('vue-drag-resize', VueDragResize) 3、.vue页面使用<template> <div> <div class="manbox"> <vue-d原创 2021-11-24 11:04:45 · 3940 阅读 · 0 评论 -
Vue插件视频播放插件
Player视频播放安装插件npm install vue-video-player --save引用插件//1、全局引用import VideoPlayer from "vue-video-player";import 'vue-video-player/src/custom-theme.css' // 视频插件样式import 'video.js/dist/video-js.css' // 视频插件样式Vue.use(VideoPlayer);//2、组件引用import { v原创 2021-11-04 17:14:19 · 557 阅读 · 1 评论 -
Element UI 接口请求加载
加载操作:const loading = this.$loading({ lock: true, text: "Loading", spinner: "el-icon-loading", background: "rgba(0,0,0,0.7)" }); setTimeout(() => { loading.close(); }, 1000);接口请原创 2021-10-14 09:20:23 · 437 阅读 · 0 评论 -
Vue中视频播放插件
插件:vue-video-player1、安装npm install vue-video-player --save2、插件引用//main.js全局引用import VideoPlayer from 'vue-video-player' // 视频插件引用import 'vue-video-player/src/custom-theme.css' // 视频样式import 'video.js/dist/video-js.css' // 视频插件样式Vue.use(VideoPlaye原创 2021-09-15 15:26:17 · 985 阅读 · 1 评论 -
解决element-ui的表格设置固定栏后,边框线消失的bug
解决element-ui的表格设置固定栏后,边框线消失的bug// 解决element-ui的表格设置固定栏后,边框线消失的bug /deep/ .el-table__row { td:not(.is-hidden):last-child { right: -1px; } } /deep/.el-table.theme table thead tr th { background: #3399ff !important; border-right:原创 2021-09-15 14:00:45 · 1360 阅读 · 0 评论 -
Vue删除指定字符后面的字符串
Vue删除指定字符后面的字符串let index = res1.name.lastIndexOf(".");this.upload_data.name = res1.name.substring(0, index)// 深拷贝:防止修改原数据时新数据发生数变化原创 2021-09-15 13:59:57 · 3359 阅读 · 0 评论 -
Vue点击滑动到指定的位置
Vue点击滑动到指定的位置<!-- 跳转的指定元素 --><div class="tab_content3" ref="design_up"></div>// 滚动到指定位置 toDesign_up() { // 需要跳转的元素 <div ref="design_up"></div> let total = this.$refs["design_up"].offsetTop; co原创 2021-09-14 22:00:51 · 447 阅读 · 0 评论 -
Vue当路由发生改变时重新调用接口/执行其他操作
watch: { // 路由变化就是刷新数据,为了解决子级跳转到这个页面,数据不刷新问题 '$route': { handler() { if (this.id) { this.handleDetail(); } }, immediate: true } },原创 2021-09-14 21:58:48 · 1368 阅读 · 0 评论 -
Vue中Element Ui解决子页面返回父级页面参数消失
<template> <section class="filter-box pd-15 white-box mb-15" v-if="$route.fullPath !== '/index'"> <el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb-item v-for="(item) in leve原创 2021-09-14 21:51:35 · 603 阅读 · 0 评论 -
Vue实现数字滚动效果
实现数据滚动效果 offical() { this.$axios.get(`${this.$Tools.Conts.domain}official/index`).then(res => { if (res.data.code == 0) { this.num = res.data.data; console.log(res.data.data); this.beatNums(); }原创 2021-09-14 21:49:36 · 3109 阅读 · 0 评论 -
Vue中element去掉输入框内首尾空格
去掉输入框内首尾空格<el-input type="textarea" v-model.trim="deleNsbp" ></el-input>原创 2021-09-14 21:44:54 · 1228 阅读 · 0 评论