大乌鸦

原创 最好用的水印vue指令封装

【代码】最好用的水印vue指令封装。

原创 今天解封了，该递交作业了，我做了个智能机器人

首先介绍一下这个库有什么功能它是一个用程序来玩QQ的库，你自己在手机上玩QQ聊天的一些功能它都能轻松胜任。Install:> npm i oicq # or > yarn add oicq复制代码Usage:const { createClient } = require("oicq")const account = 147258369const client = createClient(account)client.on("system.onlin...

原创 vue的bus自动销毁的封装

import Vue from 'vue'// 存储所有的事件const EventStore = {}const Index = new Vue()const destoryHandler = function() { // this 为调用此方法的vue组件 const currentEventObj = EventStore[this._uid] if (!currentEventObj) { return } for (const.

原创 统一注册组件

const test = require.context('./models', false, /\.vue$/);var testfile = []test.keys().forEach(key => { var a = { fileName:'', file:'' } const fileName = key.slice(2, -4); const file = test(key).default; a.fileName.

原创 VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误

问题现象项目使用vue/cli3脚手架搭建的前端项目，vue版本为2.6.10。ie11报错问题如下：（当时的报错没有截图，用的别人的图）像这种根本就没法排查错误，很恼火百度了一堆，全是抄来抄去，关键还没有能解决问题的，艹！万能的谷歌走起其实对于这个问题很明显就是语法错误，就是ie不支持的问题，ie垃圾既然是语法的问题，那就是编译的问题，那么咱们就直接编译对应的包，但是那是哪个包呢重点来了：点开报错信息，会发现断点在的地方就是报错的地方，那肯定就是这里的问题了，...

转载 微信支付，H5支付，支付宝支付对接

https://blog.csdn.net/qq_36710522/article/details/90483194

原创 axios二次封装全局拦截

先看一下目录结构首先要下载axiosnpm i axios -S创建一个api文件夹在api文件夹下面创建一个service.js，名字你们随意，代码如下：import axios from 'axios'import util from "../util/util"import qs from "qs";import axiosConfig from "./axiosConfig";/** * @description 创建请求实例 */function cre.

原创 原型链关系图

原创 js实现一键复制功能

原生实现function copy(data){ var oInput = document.createElement("input"); oInput.value = data; document.body.appendChild(oInput); oInput.select(); document.execCommand("Copy"); oInput.className = "oInput"; oInput.style.display .

原创 vue cli3.0项目vue.config.js的配置（有注释）

const path = require('path')// 拼接路径function resolve(dir) { return path.join(__dirname, dir)}const CompressionPlugin = require('compression-webpack-plugin')const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.

原创 vue-cli3.0使用引入tailwindcss步骤

第一步 看文档文档地址：https://www.tailwindcss.cn/第二步 安装@vue/clinpm install -g @vue/cli第三步 安装Tailwind CSSnpm install tailwindcss第四步创建Tailwind配置文件npx tailwindinit//或者自己创建js文件也行 tailwind.config.js这里面生成的js是没有配置的，这也是tailwindcss提供的私有化定制样式，如果...

原创 实现选中复制时不触发点击事件

实现原理，获取当前是否有选中内容，如果有就不进行触发函数事件，反之函数如下export function getSelected() { if (window.getSelection) { return window.getSelection().toString(); } else if (document.getSelection) { return document.getSelection().toString(); } else

原创 vue项目中使用@babel/plugin-proposal-optional-chaining的?.语法，防止字段没有报错

第一步：下载@babel/plugin-proposal-optional-chainingnpm install --save-dev @babel/plugin-proposal-optional-chaining或者cnpm install --save-dev @babel/plugin-proposal-optional-chaining第二步：在你的vue项目里的babel.config.js添加如下代码来拓展解析器plugins:[["@babel/plugin-...

原创 vue项目使用预渲染，提高seo优化

这里预渲染使用到的工具是prerender-spa-plugin接下来我们第一步就是安装prerender-spa-pluginnpm i prerender-spa-plugin -S然后就是在你的项目vue.config.js里面进配置相关参数const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;const

原创 前端一键启动本地服务，随启随用，方便快捷

第一种就是大家应该都知道的live-server了使用如下：一款npm工具，全局npm i -g live-server后，项目目录使用live-server命令行命令便可直接在浏览器中预览（默认找index.html，其他请自行带上文件名空格后跟在后面），并且自动全局监听实时更新。安装：npm install live-server -g命令行常用配置表然后打开项目直接在命令行里面进行live-server更高阶请看链接https://github.com/tapio

原创 原来让网站一键变成全灰色是这么的简单

html{ filter: grayscale(100%); }

原创 修改原生的上传文件按钮「input type=“file“ /」

直接贴代码<!-- 上传按钮的div --> <span class="fileinput-button"> <span>点击上传</span> <input type="file" /> </span><!-- 上传按钮的div -->然后直接复制css即可.fileinput-button { position: relative; display: inli

原创 Ant Design Vue的a-table怎样在操作里面添加多余的操作按钮

文档是这样的<template> <a-table :columns="columns" :data-source="data"></a-table></template><script>const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' },

原创 Ant Design Vue 中 DatePicker 日期选择框 placeholder 改成中文设置

关于怎样让日期里面全是中文的操作<a-range-picker @change="onChange" />首先你要引入相关js然后改成中文的操作是在main.js里面这样写import moment from 'moment';import locale from 'ant-design-vue/lib/locale-provider/zh_CN';import 'moment/locale/zh-cn';moment.locale('zh-cn');这样你的日

原创 能用的vue-cli3关闭eslint语法检查

关闭方法，在根目录创建vue.config.js文件然后把下面的代码放进去，重启项目就ok了module.exports = { lintOnSave: false, devServer: { overlay: { warnings: true, errors: true } }}

原创 小程序开发的内容安全审核

关于小程序没有调用内容审核导致不通过的问题然后进行了相应的查找最终看到了云开发的方法 现在讲述的我的云开发初探调用小程序内容安全API还挺全，我主要用到了图片和文字审查，所以对security.imgSecCheck和security.msgSecCheck的使用做记录。开通云开发在微信开发者工具打开你的小程序工程，点击“云开发”菜单进去，之前没开的按照提示填写云开发...

转载 Express脚手架generator快速搭建项目

https://www.jianshu.com/p/0905937ce8ce

转载 vuecli3 + pdfjs-dist实现简单的pdf预览

地址：https://blog.csdn.net/weixin_44402694/article/details/100152174

原创 下载文件功能

npm i file-saver文档地址：https://www.npmjs.com/package/file-saver自己实现代码this.$api .download(item.downloadId) .then(data => { let userAgent = navigator.userAgent; ...

转载 小程序通用http请求模块,模块化封装

地址：https://github.com/langyuxiansheng/MyProject/tree/master/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%B1%BB/%E9%80%9A%E7%94%A8http%E8%AF%B7%E6%B1%82%E6%A8%A1%E5%9D%97%2C%E6%A8%A1%E5%9D%97%E5%8C...

转载 Axios进度条插件

地址：https://github.com/rikmms/progress-bar-4-axios

原创 axios取消前面的接口发起的请求，执行当前发起的请求（搜索提示里面可以用到）

首先可以看一下axios源码里导出的这几个函数首先引入axios源码里面的导出的实例var CancelToken = axios.CancelToken;let cancelRequest;export function get(url, config = {}) { return instance.get(url, config);}export function...

原创 使用webpack打包单个js文件

一、基础打包1.1 创建项目目录,使用npm init初始化mkdir webpack-demo && cd webpack-demonpm init初始化完成后，目录下会生成package.json1.2 按照 webpack 4以上还需要安装webpack-clinpm install --save-dev webpack webpack-cl...

原创 echarts中国地图根据数据对省份渲染不同的颜色

完整代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echarts中国地图</title> <style> .centerItem { width: 856px; ...

原创 上传附件方法记录

<input @change="fileData" ref="fileData" type="file" name="file" />编写方法fileData(e) { console.log(e.path[0].files[0]);//要传给后端的数据 _addfujian({ file: e.path[0].files[0] }) ...

原创 websocket的使用封装

现在目录创建一个socket.js，代码如下var websock = nullvar globalCallback = null // 初始化weosocketfunction initWebSocket () { // ws地址 -->这里是你的请求路径 var ws= 'wss://*********/webSocket'; websock = new Web...

转载 vue 使用i18n实现多语言包国际化网站

前言有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。安装vue-i18n我们使用npm安装vue-i18n。npm install vue vue-i18n --save引入vue-i18n首先在 mai...

转载 网页骨架屏自动生成方案（dps）（转载）

什么是骨架屏？什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变...

原创 我的nuxt服务端渲染历程

关于的vue框架的一个弊端就是不利于seo优化，不利于百度收录，基于这个问题vue官方也是出台了nuxt服务端渲染，上周公司让我用服务端对项目进行重构，事情来得比较突然，没办法只能硬着头皮边踩坑边实现了。现在我就把这一周来拆的坑肯大家说一遍，减少大家的踩坑时间，提高开发效率！万事开头难，先从文档开始说起！https://zh.nuxtjs.org/1、流程图下图阐述了 Nuxt.j...

转载 nuxt 目前最好的解决服务端存储Cookie的方法

我了解nuxt团队正在开发nuxtClientInit功能，但是在发布之前，您可以自己制作。要了解nuxt在有请求时承担的工作流程，您可以在此处查看其生命周期。这表明首先调用nuxtServerInit，然后再调用中间件。在此中间件调用期间，将提供nuxt.config.js，其中包含您的自定义配置。其中一部分是“插件”，如文档所述，通过此选项，您可以定义在实例化根Vue.js应用程序之前应...

原创 broadcast.js实现多个页面的广播类同bus事件

var broadcast = { // 通过调用 broadcast.on 注册事件。其他页面都可以通过调用 broadcast.fire 触发该事件 // 参数说明：如果 isUniq 为 true，该注册事件将唯一存在；如果值为 false或者没有传值，每注册一个事件都将会被存储下来 on: function (name, fn, isUniq) { t...

原创 网页分享到微信、微博、QQ，QQ空间，豆瓣等等函数的封装

直接上代码！ //分享到新浪微博 function shareToSinaWB(event){ event.preventDefault(); var _shareUrl = 'http://v.t.sina.com.cn/share/share.php?&appkey=895033136'; //真实的appkey，必选参数 ...

原创 js的敏感词替换标红和提醒

js的敏感词替换标红和提醒

原创 Vue无缝滚动插件的使用

https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-default

原创 浏览器指纹Fingerprint2的实现教程

废话不多说！！！直接就是开怼。。。。。。。。。。第一步：下载Fingerprint2依赖包npm install -S Fingerprint2或者cnpm install -S Fingerprint2第二步：写js代码在这里就是把下面的代码添加到项目启动就会直接执行就是文件里如果你是使用的vue项目，那么你就可以像我这样直接放在main.js里面要是用的原生的话，...