- 博客(47)
- 收藏
- 关注
RSS订阅
原创 团队代码风格统一、一键格式化整个项目、自动格式化代码
想团队项目开发中，由于大家的代码风格不一致，会导致代码难以管理，看起来很烂，新人难以快速看懂等问题。通过下面的方式，大家的代码风格，在按下保存时，将会保持为一致。相关文件在 附件一，安装插件到开发环境：cnpm i prettier eslint-config-prettier eslint-plugin-prettier -D二， 添加必要的配置：1，在根目录新建.vscode而文件夹，下面新建settings.json文件，这样就可以在保存时使用prettier和eslint自动格式一下代码
2020-05-26 10:54:01
2720
原创 vue根据权限生成动态路由、导航栏
基本思路：1,创建vueRouter,用公共路由实例化2,创建需要根据权限筛选的路由对象（在路由对象，添加必要的权限判断字段）3,登录完成,由后端配合返回当前用户的权限集合4,筛选出有权限的路由对象，利用vueRouter的addRoutes方法，生成完整路由5,处理刷新页面导致vueRouter重新实例化导致路由对象不完善 （利用router.beforeEach导航守卫，,利用add...
2019-04-17 12:08:09
8073
3
原创 Web Components 原生组件的封装（template、slot、生命周期、传参）
先上图看效果user-card就是一个原生的组件，1，支持传入图像、姓名等props2，支持使用slot，插入html片段，使用同vue类似3，支持使用template标签，写组件模板4，支持调用组件的方法，也可以传入方法给组件调用5，兼容性良好，纯原生，主流浏览器都兼容核心API1，自定义元素customElements.define(tag-name,tagClass,{extends:tagname})第一个参数：标签名，才- 横线连接小写子母第二个参数：标签的类eg:cl
2022-05-30 22:45:00
1567
原创 vue指令：v-focus实现el-input获得焦点，input获得焦点时不弹起键盘
背景大量的页面需要进入时获得焦点，还有安卓pda扫描设备，需要获得焦点时，不触发键盘弹起。源码使用vue指令实现。你要不是用的vue， 也可以提取出来，@focus配合函数 实现。// 添加全局v-focus指令Vue.directive("focus", { inserted: function(el, { modifiers: { noKeyboard } }) { try { const tagName = el.tagName; if (tagName
2021-08-25 19:00:28
2608
7
原创 vue继承一个组件,对element-ui二次开发
vue继承一个组件， 进行二次开发的简单方法eg:修复原组件prefix，放长文本 样式错烂的问题， props和方法跟原组件el-select相同<template> <div class="rys-select"> <div class="rys-select-prefix" :style="prefixStyle"> <slot name="prefix"></slot> </div>
2020-12-12 17:31:25
2421
原创 常用table组件封装（函数组件，render函数， 动态slot）
功能：1，key-value类型的展示（如图）2，value支持显示省略号，自带title, 合并格（列）3, value单元格支持使用render,slot,html自定义功能效果图：使用示例：egData试用主组件的示例 <CustomerTable :tableData="egData" > <template slot-scope="{value}" slot="name"> slot渲染： {{v
2020-12-02 16:48:59
938
2
原创 react-native Text上下居中 一像素问题
1,Text 组件设置lineHight=hight, textAlignVertical:'center',一些安卓设备上还是不能上下居中 hock: <View style={{ justifyContent: "center",alignItems: "center",}}> <Text>122</Text> </V...
2019-11-14 14:36:40
509
原创 react-navigation 常用方法总结
1，创建底部选项卡 createBottomTabNavigatorimport React from "react";import { StyleSheet, Image } from "react-native";import {setSpText, scaleSizeW} from '../utils/util';import Home from '../page/home/home...
2019-11-14 14:23:31
500
原创 react-native 封装一个可以滑动的步骤条 Step
可以根据prop (step)滑动 到指定位置，可以左右滑动import React, { Component } from "react";import { Text, View, StyleSheet, ScrollView, TouchableOpacity} from "react-native";import { scaleSizeW, setSpText...
2019-11-14 11:44:38
1095
原创 react-native 底部弹窗选项卡 + 上传图片 +预览图片
效果图，支持默认图片，上传中的状态，最大上传数量，预览大图等功能import React, { Component } from "react";import { StyleSheet, View, Text, Image, TouchableOpacity, Modal, Platform} from "react-native";import { sca...
2019-11-14 11:37:26
660
原创 react-native Toast简单封装
import {Component} from 'react';import Toast from 'react-native-tiny-toast';import {setSpText} from './util';export default class ToastBox extends Component { static show = content => { /...
2019-11-14 11:17:32
900
原创 react-native AsyncStorage 封装
AsyncStorage 类似localStorage ，不过是异步的 返回Promise/** * AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统， */import {AsyncStorage} from 'react-native';class StorageUtil { /** * 根据key获取json数值 * @param ...
2019-11-14 11:11:16
557
原创 react-native 自适应
import { Dimensions, PixelRatio, Platform, StatusBar } from 'react-native';import ImagePicker from 'react-native-image-crop-picker';const { width, height } = Dimensions.get('window');import { getI...
2019-11-14 11:02:48
462
原创 cookie getCookie setCookie delCookie
function getDomain() { var str = document.domain; var index = str.indexOf("."); return str.slice(index+1);}/** * 设置cookie */function setCookie(name, value, days) { var expires = ""; if ...
2019-11-05 15:59:48
459
原创 webpack实例解析五（用.env.development设置环境变量）
原理：1，利用node的fs模块读取文件处理成对象2，用webpack.DefinePlugin插件，设置process.envreadEnv.jsconst fs = require('fs');const path = require('path');// 读取环境变量的文件把它转化成对象module.exports = (file) => { // flie为文件路...
2019-08-13 18:49:03
19469
原创 webpack实例解析四（根据环境分离配置）
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。开发环境：我们需要：强大的 source map（源码映射-> debug） 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server（本地服务器）。生产环境：关注点在于压...
2019-08-12 17:02:27
835
原创 webpack实例解析三（devServer）
webpack的devServer，给我们提供了一个本地的node服务器，用于开发模式下调试我们的应用.webpack-dev-server模块启动之后把我们的代码打包到node服务器，提供了热更新，后端代理，自动启动浏览器等实用功能。webpack-dev-server的配置支持两种形式：1，直接在package.json 的 script 命令后面配置、直接控制台 webpack-dev...
2019-08-10 17:08:37
896
原创 webpack实例解析二(插件)
除了一中的3个参数，webpack的列一个参数plugins，可以干预打包的过程，自动化等等文件下载：链接：https://pan.baidu.com/s/1QTJhqn31uqXhnIXOdvsbyw提取码：ui8k下面以HtmlWebpackPlugin为例，它你能自动把打包的文件引入html，设置各种网页的需求文件初始结构：package.json{ "name": "...
2019-08-09 19:01:01
279
原创 jquery 倒计时 禁用元素 解开禁用 防止连续点击
// 倒计时 /** * $el jquery对象 */ function countDown($el) { var num = 60 var timer = null var defaultCss = { cursor: 'pointer', 'opacity': 1 } // 默认样式 var disa...
2019-08-07 16:27:22
520
原创 分享一个react + antd练手小项目
1，项目基于create-react-app 最新版脚手架，2，使用react-router-dom作为路由3，使用redux + react-redux 作为状态仓库4，使用axios 为ajax5, 使用antd 为ui框架，导航已建好6，配置好了代理，以及环境变量界面不多，但是核心都搭建好了，注释丰富，剩下的就是填鸭式的业务了（项目中使用的本地后端，已注释，剩下静态数据）截图...
2019-08-07 09:22:36
2550
原创 最新版create-react-app，配置环境变量，设置代理 -(2019-08)
环境变量：在根目录直接新建文件：.env.production就是生产环境的变量当然 .env.development .env.test就是开发和测试环境了变量规则：必须是 REACT_APP_ 开头的REACT_APP_ROOT='/api'读取不变还是：let root = process.env.REACT_APP_ROOT设置代理在src 根目录新建：set...
2019-08-06 19:16:27
2807
原创 redux + react-redux + redux-persist实现react项目的store,以及数据持久化
项目结构 react-create-app创建的defaultState.js默认的stateexport default { hasLogin: false, //是否登录的标记 userInfo: null, memu: [1, 2, 3],// 用于页面权限，后端返回 authKey: '', sessionId: '', contractList: [], ...
2019-08-02 18:38:07
952
原创 webpack实例解析一(基础)
webpack的作用大家都知道：把项目中的各种资源，解析后打包打一起安装建议安装带本地 而不是全局，避免版本问题cnpm i webpack webpack-cli -D创建一个demo文件夹，结构如下package,json各种包{ "name": "webpack", "version": "1.0.0", "description": "", "script...
2019-06-13 19:41:41
300
原创 echarts 自定义legend，线性渐变
先看效果图，业务要求：一次最多两个系列，去掉最开始的系列不管是用原生 jquery vue react基本思路都是 ：改变 series clear() 再setOption()html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
2019-06-12 15:10:46
3756
原创 redux模块化入门
redux：提供给应用一个全局的状态，必须按照它的方式单向数据流方式修改状态核心概念：1，state就是一个状态对象2，action就是动作，用来触发reducer函数3，reducer是一个函数，用来修改state模块化store结构state.jsconst state = { info: { age: 20, sex: '男', money: 10...
2019-04-28 10:52:39
493
原创 vue keep-alive妙用
周所周知vue实现spa单页引用的核心原理是：根据url动态的切换组件但是每次切换组件时，组件都会重新实例化，数据初始化。那么有没有一个api，可以让组件在切换的时候保持原来的状态呢？比喻一下表单输入值，分页信息等等这就是keep-alive了官方是这样介绍他的用法的<!-- 基本 --><keep-alive> <component :is="vi...
2019-04-19 09:57:59
151
原创 iview render函数常用总结（vue render函数）
iview 的render函数就是vue的render函数iview常用在表格里面自定义内容render函数常用的配置h就是createdElement的简写3个参数如下：h("元素名称或组件名称", { domProps: { // 原生dom元素的一些属性 value: 1, type: 'n...
2019-04-18 18:56:47
9677
4
原创 vue 作用域插槽、slot 、v-slot 、slot-scope
vue 插槽slot 和 具名插槽 作用都是在调用组件的时候传递一些DOM结构进去，不同点是：具名插槽在传递DOM时需要声明，传递给哪个slot的名字 name他们用法简单不在赘述。重点说一下作用域插槽 slot-scope 的使用，以及vue2.6.X开始的新语法v-slot作用域插槽的核心作用是：子组件给父组件传递数据老版作用域插槽，slot="test“： 指定插槽的名字用...
2019-04-18 17:23:40
2075
1
原创 vue、react网页添加水印
原理：在页面覆盖一个盒子，取消鼠标事件，层级最高，透明，用canvas，绘制背景为了防止内部数据泄露，拍照等等，水印可以添加登录人姓名，公司名等等代码：（借鉴大神的）let watermark = {}let setWatermark = (str, option = {}) => { let id = '123.123.123'; if (document.getEle...
2019-04-17 17:26:10
2046
3
原创 ios overflow: scroll卡顿 -webkit-overflow-scrolling:touch的bug多，解决方案
前段时间开发公司移动端官网（m.rys.cn ，vue+vux开发），遇到的ios下滑动卡顿，没有惯性的问题百度之后： -webkit-overflow-scrolling:touch，很快解决了问题，但是它让z-index transform属性失效 ,严重影响了页面的布局问题，各种方法使用之后都不行，最后用 better-scroll插件来滑动，基本解决问题，由于安卓本来就没问题，...
2019-04-17 15:18:08
1151
原创 axios 二次封装、请求拦截、响应拦截
实际开发中，直接用axios的api方法比较麻烦，二次封装一下，要好用很多请求拦截：就是调接口之前，可以添加一些请求配置，headers token等等响应拦截：就是服务器返回之后，可以根据约定的状态，做一些全局的提示等的完整代码：import axios from 'axios'import qs from 'qs'import { Modal, Notice } from 'iv...
2019-04-17 12:07:56
861
原创 vue tree封装一个可选的的树组件
组件实现的基本功能1，根据后端返回的数据格式，传入组件动态的渲染出当前角色有哪些权限（新建，修改）2，适配有2级和只有一级多选的数据3，有全选（√） ，全不选 ，部分已选（-）的3装状态，每一级都支持（用的iview2次封装）4，改变之后返回当前选中的所有权限的id，用于提交5，手风琴效果，小屏适配先看效果图.有部分权限没打开打开小屏权限数据结构，select_stat...
2019-04-02 19:37:09
1877
1
原创 vuex刷新之后数据丢失，数据持久化，vuex-persistedstate
为什么刷新之后vuex的状态就没了？原因是刷新之后js初始化，vuex重新初始化了；常见的解决方案有1，mounted里面调接口重新给state赋值，太麻烦，pass2，watch里面监听state,再赋值，也很lowvuex理解不透彻的可以先看看完美方案是利用sessionStorage/localStorage,做一个暂时的储存store的模块化结构主要是针对mutation...
2019-03-27 12:12:14
3086
原创 vscode开发vue 自动保存，完美格式化代码（备忘）
template html不换行， js完美格式化，插件{ "editor.tabSize": 2, "editor.detectIndentation": false, "editor.formatOnSave": true, "vetur.validation.template": false, "vetur.form
2019-03-01 10:17:43
2307
原创 vue .sync修饰符的实例
.sync的作用是：让子组件优雅的修改父组件的data实例：弹窗的开关父组件传递一个布尔值show决定组建的开关&lt;product-list @add='add' :show.sync='showModal' :checked='tableData2' /&gt;showModal为弹窗的开关，在子组件出发关闭的方法this.$emit('update:show', false)...
2019-01-31 16:50:01
1396
原创 vuex入门，图文+实例解析
我理解的概念：vuex是为vue提供了全局的状态仓库（store），就像一个状态机，避免了父子、兄弟组件之前复杂的传参。他维持了全局共用的数据的一致性。核心概念秒懂：1，state 共用的数据2，getters 处理state后得到想要的数据3，mutations 唯一可以修改state的函数4，actions 只能显式的调用mutations，可以异步...
2018-12-12 16:26:43
1651
1
原创 在vue中应用sass，sass常用语法
常用语法：1，变量定义：$border:1px solid #ccc;$warning:#ff9900;2，混入：返回一段样式，可以加入变量@mixin ellipsis(){ overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}混入的使用@include mixinName3,继承：继...
2018-12-11 16:52:10
1083
原创 在vue中应用less, less常用语法
安装：cnpm install less less-loader --save配置loader:找到配置文件：build/webpack.base.conf.js在rules里加一条： { test: /\.less$/, loader: "style-loader!css-loader!less-loader", }...
2018-12-11 15:32:14
3899
原创 js快速排序，冒泡排序详细解析
快速排序快速排序的算法是：1，取出中间值；2，把剩下的值跟中间值一一比较，比中间值小的放在left数组，比中间值大或相等的放在right数组3，再把left 和 right 也按1.2的步骤切分，4，利用递归的思想，直到切分到数组只剩下一个元素，终止递归5，最后把数组拼接起来function quickSort (arr) { if (arr.length <= 1...
2018-12-11 13:50:39
1426
原创 element-ui,iview组件样式修改，框架自带样式修改,/deep/击穿
项目中经常要修改框架自带的样式，但是写style，却没有效果方法一：给组件加id / class，在style一面直接修改，注意style不要加scoped,vue可以有多个style结构：<template> <Modal v-model="params.modal1" :title="tit" :mask-closable="false" id="noAssessm...
2018-12-11 09:17:54
14371
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人