郑州彭于晏

原创 Permission

index.js/* * @Author: zhang gen yuan * @Date: 2021-08-09 14:34:28 * @Descripttion: */import Vue from 'vue'import permissionFunc from './permission'Vue.directive('permission', { inserted(el, binding) { let p = binding.value; if

原创 elementui Table合并单元格

objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1 || columnIndex === 3) { return { rowspan: row.rowspan, colspan: 1, }; } }, setrowspans() { ...

转载 IE浏览器生效的CSS 与其他浏览器区别对待

本文转载自 https://blog.csdn.net/Caroline_Yang/article/details/106662172点击去原文 前言：IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。 IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表。如下所示，使用外部样式表。 1 2 3 <!--[if IE]&gt

原创 Vue这个透传技巧，治好了我的重度代码洁癖（收藏！）

Vue这个透传技巧，治好了我的重度代码洁癖（收藏！）标题背景介绍透传是一个通讯层面的概念，指的是在通讯中不管传输的业务内容如何，只负责将传输的内容由源地址传输到目的地址，而不对业务数据内容做任何改变。其实透传这个概念，我最早是从上面一个领导那里听到的，由于他是电气工程师出身，而硬件通讯这块用到透传还是挺多的。对于透传，我感觉有那么一点熟悉感，仔细想想后我发现，其实我们前端也一直在使用透传，特别是在做基础封装时。标题透传在前端的应用今天就用一个Vue基础组件封装的过程为例，来简单聊聊什么是透传。

原创 Vue 报错 decorators-legacy 解决方案

安装插件.babelrc[ "@babel/plugin-proposal-decorators", { "legacy": true } ],

原创 Webpack 提升开发 run dev编译速度 hard-source-webpack-plugin

hard-source-webpack-pluginnpm install hard-source-webpack-plugin --save-devconst HardSourceWebpackPlugin = require('hard-source-webpack-plugin')plugins: [ new HardSourceWebpackPlugin()]config.plugin(‘cache’).use(HardSourceWebpackPlugin)

原创 webpack插件 webpack-spritesmith来自动合成精灵图.

为了性能优化, 我们一般采用精灵图的方式来处理图标, 这里我们采用webpack插件 webpack-spritesmith来自动合成精灵图.安装npm install webpack-spritesmith -SVue.config.js// vue.config.jsvar path = require('path');var SpritesmithPlugin = require('webpack-spritesmith');var templateFunction = functio

原创 天气组件 官网

https://www.tianqi.com/dingzhi/

原创 Vue2.X 类式组件

参照这位大佬的csdn地址

原创 vue-tree-chart

npm i vue-tree-chart --save组件<template> <table v-if="treeData.name"> <tr> <td :colspan="Array.isArray(treeData.children) ? treeData.children.length * 2 : 1" :class="{parentLevel: Array.isArray(treeData.c

原创 Vue 列表滚动

npm install vue-seamless-scroll --saveimport vueSeamlessScroll from 'vue-seamless-scroll'<template> <vue-seamless-scroll :data="listData" :class-option="classOption" class="seamless-warp"> <ul class="item"> &lt

原创 React 报错 版本不对

新建 .env 文件SKIP_PREFLIGHT_CHECK=true

原创 React cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><script src="https://

原创 Express 生成token

/* * @Author: zhang gen yuan * @Date: 2021-06-25 10:55:53 * @Descripttion: *//* * @Author: wuwle * @Date: 2020-12-27 10:24:01 * @LastEditors: Please set LastEditors * @LastEditTime: 2021-06-25 10:59:34 * @FilePath: \demo\vue\毕设\server\utils\jwt.

原创 uni-app 使用 Web-View

原创 萤石对接记录

萤石1萤石2

原创 uniApp push推送消息

import request from '@/common/request';export function setBadgeNumber(num){ // #ifdef APP-PLUS plus.runtime.setBadgeNumber(num); // #endif }export function bindMsgClick(){ //监听系统通知栏消息点击事件 plus.push.addEventListener('click', function(msg){

原创 路由深层次嵌套

component: {render: (e) => e("router-view")},

转载 VueCli3.0 rem 适配不同分辨率

npm install postcss-px2rem px2rem-loader --saveutils / rem.jsconst baseSize = 16// 设置 rem 函数function setRem () { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 1920 // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高

原创 Vue 使用JSX 写表格

<!-- * @Author: zhang_gen_yuan * @Date: 2021-05-20 22:54:04 * @LastEditTime: 2021-06-07 23:24:12 * @Descripttion: --><script>export default { data() { return { tableData: [ { date: "2016-05-02", na

原创 Nginx 配置 Vue history模式

location / { root html; try_files $uri $uri/ /index.html; }

原创 高德地图 根据状态定位 自定义图标 点击 显示 infoWindow

<!-- * @Author: zhang gen yuan * @Date: 2021-06-02 18:43:49 * @Descripttion: --><template> <div style="width: 100%; height: 100vh" id="container"></div></template><script>import AMap from "AMap";import { getMa

原创 echarts拖动X轴

dataZoom: [ { type: "slider", show: true, start: 0, end: 30, xAxisIndex: [0], } ],

原创 elementUI Tree树形结构 复选框

html <el-tree :data="grantData" show-checkbox node-key="id" :default-checked-keys="checked" :props="defaultProps" accordion @check="handleCheckChange" > </el-tree>data defaultProps: { // 规定显示项 ch

原创 打包体积优化

npm install -D compression-webpack-plugin@1.1.12plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|.\css/, //匹配文件名 threshold: 10240,//对超过10k的数据压缩 deleteOriginalAssets: false //不删除源文件 }) ],...

原创 高德地图 --------- 路书

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link

原创 输入框 输入正整数

正能输入正整数 <el-input type="text" id="price" v-model="goodsNum" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.v

原创 echarts 地图 自定义区域

1DATAV.GeoAtlas2bigemap3合并文件http://geojson.io/#map=11/34.8856/114.9733<!-- * @Author: zhang gen yuan * @Date: 2021-04-13 14:43:28 * @Descripttion: --><template> <div ref="line" style="width: 100%; height: 600px"></div&

原创 socket

socket: null, lockReconnect: false, tt: "",reconnect(service) { this.tt && clearTimeout(this.tt); if (this.limitConnect > 0) { if (localStorage.getItem("lockReconnect") != true) { localStorage.setItem("lockReco.

原创 uni-app输入银行卡识别

<template> <view> <view @tap="nextStep">下一步</view> </view></template><script> import BIN from "bankcardinfo" export default { methods: { nextStep() { BIN.getBankBin('6217000130001272') .then(r

原创 uni-app清除缓存

<template> <view class="content"> <view>应用缓存：{{storageSize}}</view> <button type="default" @tap="clearStorage">清除缓存</button> </view></template><script>export default { data() { return {

原创 全局scss

css: { loaderOptions: { sass: { prependData: ` @import "@/assets/common.scss"; ` } } }有的版本 data

原创 uni-App 扫描二维码

<template> <view> <!-- 扫码页面 --> <!-- #ifndef APP-PLUS --> <view class="wrap"> <view class="u-tips-color"> 请在app中打开 </view> </view> <!-- #endif --> </view></template>

原创 uni-app 打开定位信息

let bool = false // android平台 if (uni.getSystemInfoSync().platform == 'android') { var context = plus.android.importClass("android.content.Context"); var locationManager = plus.android.importClass("android.location.LocationManager"); var

原创 Vue-cli Dll

vue.config.js/* * @Author: zhang gen yuan * @Date: 2021-03-30 09:27:11 * @Descripttion: */const webpack = require('webpack')const path = require('path')module.exports = { //二者选其一 chainWebpack: config => { config.plugin('dll-refe

原创 keytool报错

原创 uni-app对接支付

支付宝 // 请求接口 返回orderInfo alipayPay(this.orderNo).then(res => { console.log(res) uni.requestPayment({ provider: 'alipay', orderInfo: res.data.orderInfo, success: resPay => { },

原创 转换金钱格式

const options = { style: 'currency', currency: 'CNY', }; (123456).toLocaleString('zh-CN', options) //¥123,456.00

转载 Fly

Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：提供统一的 Promise API。浏览器环境下，轻量且非常轻量 。支持多种JavaScript 运行环境支持请求／响应拦截器。自动转换 JSON 数据。支持切换底层 Http Engine，可轻松适配各种运行环境。浏览器端支持全局Ajax拦截 。H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片。定位与目标Fly 的定位是成为 Ja

原创 uni-app加入购物车动画效果

index.vue<template> <view class="content"> <view class="list"> <view class="item flex" v-for="(d,i) in shops" :key="i"> <view class="il flexs"> <image :src="d.img" mode="widthFix"></image> &lt