vue
*拯
前端开发工程师
展开
-
nuxt + vue-seamless-scroll实现文字滚动
nuxt踩坑之文字滚动, nuxt + vue-seamless-scroll, vue-seamless-scroll,nuxt使用滚动报错, client-only解决nuxt报undefined原创 2022-09-23 14:34:49 · 854 阅读 · 0 评论 -
vue + quillEditor富文本编辑器
vue + quillEditor vue + quillEditor编辑器 quillEditor编辑器 富文本编辑器原创 2022-09-14 15:26:41 · 516 阅读 · 0 评论 -
vue + mavon-editor编辑器
预览效果的编辑器 vue + mavon vue + mavon-editor mavon-editor编辑器mavon-editor预览编辑器 mavon editor编辑器原创 2022-09-02 16:32:24 · 687 阅读 · 2 评论 -
复制文章携带版权信息
addEventListener()的使用 复制文章携带版权信息 内存泄漏原创 2022-08-12 15:40:18 · 209 阅读 · 2 评论 -
pc端实现支付宝支付
pc支付宝支付 pc端实现支付宝支付 pc端接入支付宝二维码支付原创 2022-08-08 17:13:15 · 716 阅读 · 0 评论 -
nuxt.js + vuedraggable 拖拽效果
实现拖拽效果/实现优先级/实现排序/ nuxt.js+vuedraggable原创 2022-06-18 10:43:54 · 498 阅读 · 5 评论 -
Vue 事件中央总线
VUE 任意组件间传值的方式原创 2022-04-08 11:43:40 · 983 阅读 · 0 评论 -
vue + element + template 加权限管理
项目需求: 对不同角色做权限管理效果图如其中主要是对一下文件进行修改src/routersrc/store/modules/permission.js (没有就添加)src/store/modules/user.jssrc/store/indexsrc/permission.js那就按照文件修改的文件进行修改了 src/router中代码如下把需要权限的加在 asyncRoutes 里面// 这里面放的是国定路由的菜单 export const constantRoutes =原创 2021-12-15 17:32:38 · 2440 阅读 · 19 评论 -
Vue兄弟间传值
实现B页面接收A页面传来的值步骤1:建一个bus.js文件import Vue from "vue"export default new Vue步骤2:A页面引入传值使用($emit)import Bus from '@/bus.js';//在页面销毁前进行传值 beforeDestroy(){ Bus.$emit('stockPOS',this.tacticsStockPOS) },步骤3:B页面引入接收并销毁(on,on,on,off)import Bus from原创 2021-12-10 15:36:48 · 804 阅读 · 0 评论 -
VUE + 微信分享
项目场景:项目场景:一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友效果图如下首先得得下载微信的 weixin-js-sdkcnpm i weixin-js-sdk --save在需要分享的页面引入import wx from 'weixin-js-sdk'; // 引入wxjsimport { shares } from '@/api/index'; // 分享的接口 传给后端一个地址(与域名一致)在methods写调用的方法// vue调用微信的自定义分原创 2021-12-06 15:33:15 · 3263 阅读 · 8 评论 -
vue + video.js/videojs-contrib-hls 实现hls拉流播放
videojs-contrib-hls拉流播放主要是因为之前使用西瓜播放器插件实现hls拉流播放时,安卓手机是正常的,但是苹果一直打转,pc端的话https格式也播放不来,pc端的话去掉s改为http即可进行播放步骤1.下载videojs-contrib-hls依赖(没有下载video.js的也下载一下这个)npm i videojs-contrib-hls --savenpm i video.js --save步骤2. main中引入video-js.cssimport 'video.js原创 2021-11-25 17:44:08 · 6018 阅读 · 2 评论 -
vue+vant实现图片预览
图片点击预览<div class="img_box" v-for="(image, i) in interestDetails.picUrl" :key="i" > <img :src="image" alt="预览图片" style="width:100%;border-radius:8px;" @click="getImg(image, i, interestDetails.picUrl)" /&g原创 2021-11-18 17:28:39 · 525 阅读 · 2 评论 -
vant+vue实现上拉加载
上拉加载数据直接上代码吧,毕竟这个才是重点呐 <List v-model="loading" :finished="finished" :error.sync="error" error-text="请求失败,点击重新加载" @load="onLoad" > <div class="list" v-for="(item, index) in elseLive"原创 2021-11-18 16:59:32 · 497 阅读 · 4 评论 -
vue+video.js实现视频播放
使用video.js来播放视频首先呢配置文件时必不可少的,那么步骤来了步骤1:下载依赖(npm)// 还是一样哦,有淘宝镜像的话cnpm i video.js --save// 没有的话可以使用npm i video.js --save步骤2:全局配置(main.js中)// 引入视频插件 video.jsimport Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Vid原创 2021-11-03 11:01:19 · 541 阅读 · 0 评论 -
当后台返回的数据格式为“[xxx,xxx,xxx]“转换为数组格式
当数据格式为"[xxx,xxx,xxx]"字符串转为数组接口效果如下使用后的效果如下步骤如下步骤1:使用split(’,’)切割let a = row.picUrl.split(",");步骤2:去掉左右的【】号 a = a.map(item => item.replace("[", "")); a = a.map(item => item.replace("]", "")); console.log(a);好了,希望对你有所帮助...原创 2021-10-29 15:41:31 · 599 阅读 · 0 评论 -
封装时间工具类刚刚,几分钟前,几小时前,昨天,日期
项目中的需求之后写的一个时间封装效果图:几小时前日期显示实现步骤步骤1:把这个js封装在工具util中 我命名为 date.jsexport function formatMsgTime (timespan) { // 因为我接口得到的数据是 日期的格式,所有先转为了时间戳 // 2021-01-28 18:34:28 改为时间戳 let thisTime = timespan; thisTime = thisTime.replace(/-/g, '/');原创 2021-10-29 14:14:54 · 247 阅读 · 2 评论 -
vue + Export2Excel导出表格数据
后台管理系统中表格导出功能导出的效果图:1.npm 下载 file-saver 和 xlsx 这两个依赖文件cnpm install file-saver@1.3.8 xlsx@0.14.1 --save2.导出文件存放3.js代码直接拿取/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = [原创 2021-10-09 15:07:15 · 898 阅读 · 0 评论 -
h5与原生实现分享功能
写一个安卓和ios端与H5的分享交互的功能ios端给出的效果图首先在utils文件中建了一个 bridge.js 文件 ,并写入如下代码function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge) } if (window.WVJBCallbacks) {原创 2021-09-27 02:12:31 · 655 阅读 · 1 评论 -
修改element ui组件样式
解决element ui样式修改不生效的问题(样式穿透)1.如果使用css 原生样式,那么可以直接使用 >>> 穿透修改<style> .a >>> .b { color:red; } //编译后 .a[data-v-f3f3eg9] .b { color:blue; }</style>2.项目中用到了预处理器 scss 、sass、less 都可以使用 /deep/注意:vue-cli3以上版本不可以<style原创 2021-09-27 01:36:25 · 600 阅读 · 0 评论 -
vue + xgplayer-hls.js 实现hls流播放
项目中使用西瓜播放器插件第一步:npm i xgplayer --savenpm i xgplayer-hls.js --save第二步:// 在需要的页面引入import 'xgplayer';import hlsjsPlayer from 'xgplayer-hls.js';第三步:// 提供一个容器<div id='xg></div>第四步:// 定义一个方法来初始化initPlayer(url, bgImg) { let pla原创 2021-09-14 21:17:36 · 4618 阅读 · 0 评论