自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(218)
  • 资源 (18)
  • 收藏
  • 关注

原创 vue中使用腾讯地图 api逆地址解析

1、首先去申请一个key,可以在https://lbs.qq.com/这个网站里申请。打开是下图这个样子的。2、点击登录,绑定一些信息,手机号之类的,随后点进开发者信息里,如下图3、点击key管理,创建新密钥,填写相应信息即可4、创建好了点击添加key5、key 配置我这里是pc 所以我就选择了如下图6、 保存好就生成了key7、找到自己所需要的api 逆地址解析在这里8、了解接口 及其所需要的参数9、因为接口用到跨域我们这儿选择在vue中使用JSONP来解决第一步 安装

2021-11-30 15:08:02 135

转载 vue防抖

链接

2021-11-29 18:08:02 17

原创 vue-router如何判断是从哪个路径跳转过来的?

日常项目中经常会出现这种效果 点击添加和编辑 跳转至 编辑页活添加页后,通过保存 el-tab-pane这个组件还是要指向原来的地方这个通过监听路由进行判断方法一、通过beforeRouteEnter实现但是要注意哦 beforeRouteEnter是不能访问this的解决方法如下 beforeRouteEnter(to, from, next) { next(vm => { if (from.path == "/channel/index/addAdvert")

2021-11-23 15:53:13 274

原创 vite 创建vue3 项目

1、通过cmd 命令行npm init vite 项目名 实现vite的初始化实现项目的创建项目创建完成后记得 安装依赖哦

2021-11-18 15:53:24 237

原创 vue 区分不同的线上环境

switch (window.location.hostname) { case 'localhost': window.API_BASE_URI = 'https://staging-muyou-api.cdjkh.cn'; //本地 break; case 'staging-muyou-admin.cdjkh.cn': window.API_BASE_URI = 'https://staging-muyou-api.cdjkh.cn'; // 测试 break;.

2021-11-16 17:11:59 699

原创 vue cli2.x使用tinymce

1、安装tinymcenpm install tinymce -Snpm install @tinymce/tinymce-vue -S注意版本 新版本兼容vue3安装指定版本npm install tinymce@5.6.2 -Snpm install @tinymce/tinymce-vue@3.2.6 -S下载中文语言包 传送门下载完之后在项目里新建public文件夹1)在public目录下新建tinymce文件夹,并将下载的语言包解压到该目录下2)在node_modu

2021-11-03 11:53:36 61 1

原创 admin 按钮级 权限控制

后端返回的数据前端实现通过自定义指令实现按钮权限的控制在main.js中定义自定义指令// 自定义指令Vue.directive('permission', { bind: function (el, binding) { console.log(el, binding, '1121') if (!Vue.prototype.$_permission(binding.value)) { if (!el.parentNode) { el.style.

2021-10-22 17:13:21 17

转载 props的异步加载问题

详情参考 props的异步加载问题

2021-10-18 14:19:14 10

原创 手搓自适应表格

原型实现方法外层div 值需要上右下的边框 display: flex; border: 1px solid #dbdbdb; border-left: none; margin-bottom: 10px;内层的div 只需要有左边框 display: flex; align-items: center; border-left: 1px solid #dbdbdb; padding: 5px 2px; font-size:

2021-10-18 11:33:25 6

原创 vue 后台管理系统 嵌套路由配置

const routes = [{ path: '/login', component: () => import('@/views/Login.vue'), hidden: true, meta: { title: '登录' }},{ path: '/404', name: '404', component: () => import('@/views/error/404'), hidden: true},// 首页{ path: '

2021-10-17 16:35:28 33

原创 vue admin 动态路由权限管理

主要思路 通过后端接口返回数据 进行判断 (通过后端实现的权限管理有许多种),在这里 我们主要通过 关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中箭头所指的便是 后端接口返回的权限列表实现方法通过 通过 配置路由meta.menu 和 router.addRoute来实现权限匹配 和添加第一步 在router/index.js 中完成 无需权限路由的配置 我这里配备的便是 登录 404 和首页const routes = [{ path: '/l

2021-10-17 16:31:06 315

原创 element 面包屑返回上一个带参页面

在vue-cli 中 通过组件内的路由导航钩子实现注意 钩子层级应于mounted同级<script>export default { data() { return { prePath: "" }; }, computed: {}, watch: {}, beforeRouteEnter(to, from, next) { /* must call `next` */ console.log(from, "来了");

2021-10-12 10:57:12 40

原创 后台返回图形验证码 前端如何处理

后端返回图形验证码console 打印的结果此时前端用axios请求如果直接去拿返回值,就会发现…额…乱码了啊(数据流)前端处理用原生 转化 getImg() { var that = this; var windowUrl = window.URL || window.webkitURL; //处理浏览器兼容性 var xhr = new XMLHttpRequest(); var url = `${window.API_BASE_URI

2021-10-09 11:44:18 75

原创 oninput vue 中的用法

第一种 <div class="inputStyle"> <input oninput="if(value.length>11)value=value.slice(0,11)" v-model="codeParams.mobile" placeholder="请输入手机号" type="number" /> </div>第二种 <div class="content-item"> &lt

2021-09-17 11:57:27 10

原创 uniapp input 输入字符过长自动截断

@input 事件<view class="notice"> <view class="name">交易流水号</view> <view><input type="text" v-model="param.payNum" placeholder="请输入交易流水号" placeholder-style="color:rgba(147, 147, 147, 100);font-size: 16px;margin-top:1rpx" @input="

2021-09-13 14:09:24 88

原创 uniapp 自定义底部导航栏设置

该方案结合uview Tabbar 实现根据文档可知1、在page中正常写入2、在各个tabbar页面引入u-tabbar组件,组件会默认自动通过uni.hideTabBar()隐藏系统tabbaru-tabbar级别最好和内容最外层同级3、用vuex 实现动态切换4、根据权限动态分配...

2021-09-13 11:32:46 161

原创 H5 监听页面是否被关闭

var device_type = navigator.userAgent; //获取userAgent信息 var md = new MobileDetect(device_type); //初始化mobile-detect var os = md.os(); //获取系统 const eventName = os == "iOS" ? "pagehide" : "unload"; // 监听刷新 window.addEventListener(even...

2021-09-09 18:01:56 27

原创 js 判断当前时间是否在规定的时间内

服务器返回的数据 dayFlag() { let H = new Date().getHours(); // 在区间 if ( H > this.detail.weekBeginTime.split(":")[0] && H < this.detail.weekEndTime.split(":")[0] ) { return true; } // 等

2021-09-04 14:20:00 64

原创 h5 进入后台 超过1分钟 退出登录

监听页面应用进入后台 document.addEventListener("visibilitychange", function() { // 未进入后台 if (document.visibilityState == "visible") { if (window.localStorage.getItem("user")) { // 存在进入Time var current = new Date().getTime()

2021-09-01 15:06:15 24

转载 js 获取今天的前几天或后几天的方法

想要获取当前时间,我们都知道 new Date()非常简单容易,但是想要获取昨天,明天,后天就没这么简单了莫慌 一样的简单 new Date(new Date().setDate(new Date().getDate() - 1))说明: -1 表示 获取昨天的时间+1表示获取明天的时间 其它同理...

2021-08-31 21:34:12 16

原创 H5仿淘宝下拉多选框

效果图本案例结合vant多选框 实现这里只具体分析一下下拉框动画 内容多选效果 遮罩层下拉框的实现1、 通过对导航栏 position: fixed; top: 0px;transform: translate(-100%); 使他向上移动他自身高度的位置这样子就实现了刚开始的导航栏隐藏2、通过点击使导航栏移动到固定的位置<template> <div class="box"> <!-- 顶部 --> <div class="top

2021-08-27 18:32:08 179

原创 uniapp 子组件 mounted 刷新

实现方法:通过在父组件的onShow调用子组件的方法(请求) 实现页面的刷新父组件 html <stock :obj="obj" ref="stock" />js onShow() { console.log('我是onshow') this.$refs.stock.getData() },子组件js 请求的参数必须在data中初始化data() { return { tableData:{}, info:{ directorEnabled: JS

2021-08-13 18:01:24 491

原创 ios 安卓 手机软键盘 搜索

注意:input 标签 type search 通过keydown 监听按下事件2、ios下必须搭配from 表单 及 action 属性 实现 <form action="javascript:return true" @submit.prevent="formSubmit"> <input type="search" v-model="content"

2021-08-10 16:39:48 14

原创 h5 打包后效果失效

在 多行省略文本时 发现-webkit-line-clamp: 2;效果失效出现布局问题 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical;解决方式通过/*! autoprefixer:

2021-08-05 17:09:37 16

原创 uniapp底部IOS安全距离

// 盒子 用法paddingBottom {   padding-bottom: constant(safe-area-inset-bottom); // 顶部安全区  padding-bottom: env(safe-area-inset-bottom); // 底部安全区  box-sizing: content-box;}定位 二选一  bottom: constant(safe-area-inset-bottom);   bottom: env(s

2021-07-26 17:13:13 273

原创 uniapp ios 调数字键盘

<input type=”number” pattern=”[0-9]*”>

2021-07-12 11:09:16 127

原创 node Promise 的使用

const fs = require('fs')const path = require('path')let filePath = path.join(__dirname, '11.txt')// then链式调用的特点:// 1、第一个then执行完毕后(不管成功还是失败)会执行第二个then里函数的代码// 2、then的函数里面可以有返回值。被下一个then的形参接收// 3、(最重要的一个) 如果返回的是一个Promise对象,下一个then的形参接收到的不是这个Promi

2021-07-05 16:33:10 12

原创 腾讯地图 定位

搜索 金牛区欢乐谷 发现返回的类型为CITY_LIST后根据 官方代码 发现问题 未设置相对应的城市 或地区this.searchService.setLocation(this.region);搜索 金牛区欢乐谷 发现返回的类型为CITY_LIST// 官方案例<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charse.

2021-06-22 18:26:30 100

转载 Vant Toast loading加载使用

methods: { // 提交表单 onSubmit(value) { const toast = vant.Toast.loading({ duration: 0, // 持续展示 toast forbidClick: true, message: "加载中..." }); axios.post("http://127.0.0.1:8010/test").then(function (resp) { .

2021-06-22 15:15:07 532

原创 node内置模块 http 结合 url

ip地址:标识网络上不同的设备(可联网的设备)端口号:标识同一设备上的不同的网络进程 // 同一台设备 具有唯一性网络进程 (可联网的,运行起来的程序)搭建一个后端的程序1、引入http模块2、配置服务器程序的端口号 // 不要使用0-1024 及知名端口 mysql 3306 mongodb 270173、创建服务器对象4、调用服务器对象的监听方法// 1、引入http模块const http = require('http')// 2、配置服务器程序的端口号 const .

2021-06-16 18:27:17 19

原创 node 内置模块 文件操作

const fs = require('fs')const path = require('path')// 拼接路径let node1Path = path.join(__dirname, 'node1.js')// 同步读取: 读取文件的时候,要等到文件读取完毕,才会执行后面的代码(sync)// fs.readFileSync(filename, [options],callback)// filename:文件名// options:为具体选项配置,包括数据的编码方式// cal

2021-06-11 12:01:33 16 1

原创 Node.js Buffer(缓冲区)

// JavaScript 语言自身只有字符串数据类型, 没有二进制数据类型。// 但在处理像TCP流或文件流时, 必须使用到二进制数据。 因此在 Node.js中, 定义了一个 Buffer 类, 该类用来创建一个专门存放二进制数据的缓存区。let buf1 = Buffer.from([97, 98, 99])let buf2 = buf1.toString()console.log(buf1, '我是Buffer')let buf3 = Buffer.from('node')c

2021-06-11 10:34:53 16 1

原创 node path的内置模块

const path = require('path')// console.log(__dirname) // 得到当前执行文件的绝对路径,不包括文件名// console.log(__filename) // 的到当前执行文件的绝对路径,包括文件名let extName = path.extname(__filename) // 获取文件拓展名(后缀名)let baseName = path.basename(__filename) // 获取文件名(包含后缀名)let dirNa

2021-06-10 16:50:02 13

转载 nodejs使用的CommonJS规范

模块的引用let 变量= require('模块的标识') eg: let obj = require('./node')模块的定义在node中一个js文件就是一个模块默认情况下在js文件中编写的内容 都是运行在一个独立的函数中,外部的模块无法访问导出变量和函数使用 exportsexports.属性 = 属性值;exports.方法 = 函数;注意:exports不能直接赋值为一个对象,这样原有的指向module.exports会被更改module.export

2021-06-10 14:51:08 18

原创 uniapp 下拉效果显示

弹框的思路1、通过固定定位 + animation 实现动画效果2、通过绑定动态绑定类 :class 实现动画的交替 .anim { animation: tobottom 1s ease-in; animation-fill-mode: forwards; } @keyframes tobottom { from { top: -90px; } to { top: 65px; } }2、 通过 animation-fill-mode: .

2021-06-02 11:57:35 458 1

原创 uni-app 引入本地iconfont

一、首先下载字体文件二、然后删除多余文件,只需要留下 iconfont.ttf 和 iconfont.css 文件放入到 static 下,修改 iconfont.css 文件,如下在需要的地方引入 样式文件效果

2021-05-26 18:19:52 25

原创 uni-app 封装request

第一步、根目录下新建 config.js 文件const config = {base_url: '这里可以是生产环境或者测试环境'}export { config }第二步、根目录下新建 https/index.js 文件import { config} from '../config.js'export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码 // 判断请求类型 let hea

2021-05-25 17:13:33 30

原创 nvm node安装

一、nvm安装使用nvm 安装Node前 需卸载本机nodenvm 下载地址nvm-noinstall.zip:绿色免安装版,但使用时需进行配置。nvm-setup.zip:安装版,推荐使用本次演示的是安装版。检查打开CMD,输入命令 nvm ,安装成功则如下显示。可以看到里面列出了各种命令,本节最后会列出这些命令的中文示意。安装完后打开C:\Users\Administrator\AppData\Roaming\nvm\settings.txt添加以下内容,切换no

2021-05-25 10:05:33 20

转载 安装NVM之后,NODE -V 提示‘NODE‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件

1、出现这个情况时,扪心自问,用nvm安装新的nodejs后有咩有执行这个命令:nvm use [nodejs version name]nvm use v10.15.32、如果已经执行了上述命令但还是报node不是内部命令云云,那么先检查 C:\ProgramFiles\nodejs文件是否可用,一般来说应该是不可用的,我就删除了(你也可以不先删除,若是下面操作没有问题就说明该文件夹无影响)。来到这一步,就需要打开nvm这个文件夹了,我的是在这个位置:C:\Users\Administr

2021-05-24 22:45:03 24

原创 vue 二维码生成、压缩、下载

主要工具生成二维码 QRcode文件压缩 JSZip文件下载 FileSaver下载npm install qrcodejs2 // 生成二维码 npm install jszip // 文件压缩npm install file-saver // 文件下载引入需要的页面直接引入import QRCode from "qrcodejs2";import JSZip from "jszip";import FileSaver from "file-saver";

2021-05-19 17:20:52 53

科技感图片

科技感图片

2020-12-09

area.js 省市区数据

用于前端的省市区的导入

2020-08-04

swiper-3.4.2.min.rar

swiper-3.4.2.min.rar

2020-09-20

贴图工具贴图工具.7z

贴图工具贴图工具贴图工具贴图工具贴图工具

2021-01-28

根据行政区编码渲染地图

根据行政区编码渲染地图根据行政区编码渲染地图根据行政区编码渲染地图根据行政区编码渲染地图根据行政区编码渲染地图根据行政区编码渲染地图

2021-01-14

正则表达式的封装正则表达式的封装

正则表达式的封装

2020-12-24

city-provinces.7z

省市边界经纬度

2020-12-17

自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式

自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式

2020-09-25

基于element ui 的二次简单表格封装

基于element ui 的二次简单表格封装

2020-09-10

中国省市区

中国省市区有vue版

2020-09-08

多级菜单的图标添加及路由配置.rar

多级菜单的图标添加及路由配置.rar

2020-09-01

vue api 配置文件(解决跨域)

vue api 配置文件

2020-08-27

菜单联动

菜单联动

2020-08-28

音乐播放微信111app.rar

音乐播放微信111app.rar

2020-08-21

微信小程序实现共享数据

等同于vue---state的小程序共享数据

2020-08-13

微信小程序vant引用 及api封装

小程序vant引用 及api封装

2020-08-13

微信小程序音乐播放.rar

微信小程序音乐播放

2020-08-20

city.js 城市数据

方便导入城市数据

2020-08-04

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除