- 博客(41)
- 收藏
- 关注
RSS订阅
原创 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
3317
19
原创 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
3384
9
原创 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
6246
3
原创 小程序弹出层/抽屉封装 （抖音小程序）
开发抖音小程序时，由于缺乏适配的UI框架和相关案例，我通过大模型封装了一套代码，实现了一个类似Element UI抽屉效果的弹出层组件。该组件支持从任意方向弹出，并包含关闭按钮和标题显示功能。代码结构分为两部分：HTML部分定义了抽屉的结构，包括头部区域和内容区域；JavaScript部分处理了抽屉的逻辑，如打开、关闭、位置更新等。通过这种方式，开发者成功解决了抖音小程序开发中的UI适配问题。
2025-05-19 16:59:34
817
2
原创 Uniapp app 安卓手机（红米）自定义基座进行真机调试
在开发App时，真机调试是不可或缺的步骤。本文以红米手机为例，详细介绍了如何配置权限以进行调试。首先，确保调试设备已插入SIM卡，然后进入设置，找到“更多设置”并开启开发者选项。接着，通过USB连接手机和电脑，打开代码编辑器，选择“运行到手机或模拟器”，并进一步选择“运行到Android App基座”。最后，点击运行，系统将编译并在手机上安装基座App，完成调试过程。这一流程确保了App在实际设备上的表现与预期一致。
2025-05-09 11:30:35
345
原创 Uniapp Android/IOS 获取手机通讯录
本文介绍了在开发App时，如何获取用户通讯录的完整过程。首先，需要在manifest.json配置文件中勾选并填写相关权限，包括Android的READ_CONTACTS、WRITE_CONTACTS和GET_ACCOUNTS权限，以及iOS的NSContactsUsageDescription描述。接着，通过plus.android.requestPermissions方法请求权限，并在获取权限后调用plus.contacts.getAddressBook方法获取通讯录信息。文章还提供了界面
2025-05-09 11:03:28
726
原创 el-autocomplete 使用clearable清除内容，再次点击输入框下拉条件不再显示问题
前段时间写后台管理项目时，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了。通过这个方法，你可以解决 el-autocomplete 使用clearable清除内容，再次点击输入框下拉条件不再显示问题。添加一个清除事件的方法。
2024-10-29 15:11:00
675
原创 vue Element U 解决表格数据不更新问题
最近在使用 Vue 和 Element UI 开发后台管理系统时，操作表单数据重新请求表格接口后遇到表格数据不更新的问题。后面查阅了些资料，这通常是由于 Vue 的响应式系统没有检测到数据的变化，或者数据更新后没有正确地触发视图的重新渲染。
2024-10-25 11:13:55
1647
原创 nuxt + vue-seamless-scroll实现文字滚动
nuxt踩坑之文字滚动， nuxt + vue-seamless-scroll， vue-seamless-scroll，nuxt使用滚动报错， client-only解决nuxt报undefined
2022-09-23 14:34:49
968
原创 vue + quillEditor富文本编辑器
vue + quillEditor vue + quillEditor编辑器 quillEditor编辑器 富文本编辑器
2022-09-14 15:26:41
584
原创 vue + mavon-editor编辑器
预览效果的编辑器 vue + mavon vue + mavon-editor mavon-editor编辑器mavon-editor预览编辑器 mavon editor编辑器
2022-09-02 16:32:24
742
2
原创 VUE 分享给好友及朋友圈
VUE 分享给好友及朋友圈步骤如下：一、下载 weixin-js-sdkcnpm i weixin-js-sdk --save二、页面引入import wx from 'weixin-js-sdk'; // 引入wxjsimport { shares } from '@/api/index'; // 分享的接口 传给后端一个地址(与域名一致)三、在 methods ...
2022-08-18 17:07:23
58
原创 nuxt.js 引入Jquery的方法
nuxt.js 引入jquery的方式步骤1 npm下载jquery：npm install jquery --save 步骤2 在nuxt.config.js配置引入const webpack = require('webpack');export default{ build:{ plugins: [ new webpack.ProvidePlugin({ '$': 'jquery' }) ] }}步骤3 页面中使用：
2022-05-25 11:07:15
1546
2
原创 nuxt.js 跳转新页面
nuxt.js 跳转新页面的方法一般跳转方式的写法为： this.$router.push({ path: `/soft/${e.routerKey}`, }) 跳转新页面的方式1： let routeData = this.$router.resolve({ path: `/soft/${e.routerKey}`, }); window.open(routeData.href, '_blank');跳转新页面的方式2：window.open(`/soft/${e.r
2022-05-25 10:56:52
4312
1
原创 vue 任意组件间通信
1. 事件中央总线方式1: 全局事件总线```js// 步骤1 1.在main.js文件中定义new Vue({ el: '#app', router, store, render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this } })...
2022-04-08 15:04:03
26
原创 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
848
原创 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
595
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
540
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
581
原创 vue结合vant写图片预览功能
App图片预览需求(前提配置好了vant)如果还没有配置的话，配置步骤如下官网链接：https://youzan.github.io/vant/#/zh-CN/grid步骤1：下载依赖npm i vant --save// 如果有淘宝镜像的话也可以使用（下载的速度会快些 --save，可以在package.json查看）cnpm i vant --save步骤2：在全局main.js中配置// 引入 vantimport Vant from 'vant';import 'vant
2021-11-03 10:28:27
1006
3
原创 报Error in render: “TypeError: Cannot read property ‘replace‘ of undefined“
需求效果有，但是报错报错前的效果图，报错图，及代码1.效果已经出来了2.报错图3.代码 <p class="date_time" >{{ getday(interestDetails.createTime) }}</p>解决后的代码使用v-if来判定此时是否已经取到该有的值<p class="date_time" v-if="interestDetails.createTime">{{ getday(interestDetails.createTi
2021-11-01 11:21:53
664
原创 当后台返回的数据格式为“[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
654
原创 封装时间工具类刚刚，几分钟前，几小时前，昨天，日期
项目中的需求之后写的一个时间封装效果图：几小时前日期显示实现步骤步骤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
277
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
939
原创 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
749
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
636
原创 时间格式化封装和使用
时间格式化封装第一步:在src下的util下建一个js文件;第二步:封装代码;export function formatTime(value, format) { if (typeof value !== 'number') { try { value = parseInt(value); } catch (e) { console.error('time parsing error'); return ''; } } l
2021-09-14 21:32:29
214
原创 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
5128
原创 window.location系列
window.location系列解析效果图为:亲们，自己也可以在控制台里面自己试试加粗样式代码内容：window.location.origin( 可用来动态获取接口 ( 获取传参前的url ) )结果为："http://localhost:8083"window.location.host( 获取域名 + 端口号 )结果为："localhost:8083"window.location.href( 当前的url )结果为："http://localhost:8083/#
2021-08-31 16:43:45
391
原创 自定义字体
项目中使用外部字体这也是我在项目中使用到的代码如下：// 定义:@font-face { font-family: 'Yaku'; src: url('https://aq-images.oss-cn-shenzhen.aliyuncs.com/font/font.TTF')format('TTF'); }// 使用: <span style="font-family: Yaku; color: #ffea60; font-s
2021-08-26 09:47:13
205
3
原创 React + Taro ui 实现左滑删除
React的基础上使用Taro UI组件实现左滑删除家人们，先看看效果图吧1.好家伙，直接上代码了// 1.首先得引入一下组件 AtSwipeActionimport { AtSwipeAction } from "taro-ui";// 2.HTML代码{list.map((item, index) => ( <AtSwipeAction key={item.id} onOpened={this.handle
2021-06-17 12:24:47
1721
5
原创 JSON转换
JSON格式的转换好家伙，直接上代码<script> var obj = { title:'文件名', count:1, } const fill = JSON.stringify(obj); console.log(fill ,typeof(fill)); //string 类型 let fl = JSON.parse(fill); conso
2021-05-26 15:57:47
113
2
原创 JS判断对象为空的方法
判断一个对象为空的方式JSON 内置对象 JSON.stringify() 方法ES6 Object.keys() 的方法ES6 Object.getOwnPropertyNames() 的方法jq isEmptyObject() 的方法测试代码1. JSON内置对象的方法;const o = {} ;console.log(JSON.stringify(o) === '{}' ) // true// 返回 boolean 值 为空就时 true 否则就是 false2.
2021-05-21 17:56:21
241
1
原创 React + Taro 小程序跳转公众号
Taro小程序跳转公众号的文章步骤：登录公众号后台-小程序-小程序管理-添加-关联小程序关联后就可以在微信的公众平台查看(设置-关联设置-关联公众号)如图所示：然后使用web-view我这个是使用广告轮播实现的代码如下注意：一个页面使用一个web-view 所以我使用遍历传值到跳转地址的页面html代码 {/* 跳转公众号的文章 */} <View> <AtCurtain isOpened={this.state.
2021-04-26 16:18:24
989
3
原创 小程序基础库
小程序的基础库查看小程序的基础库打开Vscode查看project.config.json的配置文件中的libVersion "compileType": "miniprogram", "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "libVersion": "2.10.3", "condition": {}因为小程序的获取用户信息接口的改变在使用的 taro编译的小程序时，基础库就得提升到 2.16.0
2021-04-21 10:43:22
1954
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人