项目实战
文章平均质量分 56
秋刀鱼笛滋味
这个作者很懒,什么都没留下…
展开
-
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 · 2655 阅读 · 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 · 2431 阅读 · 0 评论 -
常用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 · 939 阅读 · 2 评论 -
团队代码风格统一、一键格式化整个项目、自动格式化代码
想团队项目开发中,由于大家的代码风格不一致,会导致代码难以管理,看起来很烂,新人难以快速看懂等问题。通过下面的方式,大家的代码风格,在按下保存时,将会保持为一致。相关文件在 附件一,安装插件到开发环境:cnpm i prettier eslint-config-prettier eslint-plugin-prettier -D二, 添加必要的配置:1,在根目录新建.vscode而文件夹,下面新建settings.json文件,这样就可以在保存时使用prettier和eslint自动格式一下代码原创 2020-05-26 10:54:01 · 2732 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 504 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 662 阅读 · 0 评论 -
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 · 904 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 2308 阅读 · 0 评论 -
nginx实现跨域详细教程,附带前后端实例
配置目录:nginx-1.14.1\conf\nainx.conf主要配置: server {# nginx监听的端口 listen 1999;# 前端项目端口 server_name 172.30.34.180; #charset koi8-r; #access_log logs/host.a...原创 2018-12-03 19:34:33 · 1050 阅读 · 0 评论 -
axios 二次封装、请求拦截、响应拦截
实际开发中,直接用axios的api方法比较麻烦,二次封装一下,要好用很多请求拦截:就是调接口之前,可以添加一些请求配置,headers token等等响应拦截:就是服务器返回之后,可以根据约定的状态,做一些全局的提示等的完整代码:import axios from 'axios'import qs from 'qs'import { Modal, Notice } from 'iv...原创 2019-04-17 12:07:56 · 862 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 3765 阅读 · 0 评论 -
vue keep-alive妙用
周所周知vue实现spa单页引用的核心原理是:根据url动态的切换组件但是每次切换组件时,组件都会重新实例化,数据初始化。那么有没有一个api,可以让组件在切换的时候保持原来的状态呢?比喻一下表单输入值,分页信息等等这就是keep-alive了官方是这样介绍他的用法的<!-- 基本 --><keep-alive> <component :is="vi...原创 2019-04-19 09:57:59 · 153 阅读 · 0 评论 -
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 · 494 阅读 · 0 评论 -
iview Table的样式,功能修改
在后台系统中经常用到的table跟iview的有较大区别eg:可选表格的,表头换成别的字符,不再是全选的checkbox官网是这样的我们怎么把它弄得符合设计呢,看代码&amp;amp;lt;Table :columns='tableColums' :data='tableData' stripe id=&amp;quot;tab_keyTag&amp;quot; ref=&amp;quot;table&amp;q原创 2018-11-27 16:02:49 · 3363 阅读 · 0 评论 -
vue组件封装—单属性非props的应用
先看效果,功能,样式根据参数决定源码:组件&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div style=&amp;quot;position: relative;display: inline-block;&amp;quot;&amp;amp;gt; {{label}} &amp;amp;lt;Date-pick原创 2018-11-27 16:37:45 · 779 阅读 · 0 评论 -
iview表格Table表头动态化实现
业务逻辑:根据日期,时间筛选跨度固定为3个月,获取数据,表格动态按月份展示,看图表格还是这么简单 &amp;amp;lt;Col span=&amp;quot;8&amp;quot;&amp;amp;gt; 时 间: &amp;amp;lt;Date-picker type=&amp;quot;month&amp;quot; format=&原创 2018-11-27 20:17:56 · 18052 阅读 · 2 评论 -
vuex入门,图文+实例解析
我理解的概念:vuex是为vue提供了全局的状态仓库(store),就像一个状态机,避免了父子、兄弟组件之前复杂的传参。他维持了全局共用的数据的一致性。核心概念秒懂:1,state 共用的数据2,getters 处理state后得到想要的数据3,mutations 唯一可以修改state的函数4,actions 只能显式的调用mutations,可以异步...原创 2018-12-12 16:26:43 · 1652 阅读 · 1 评论 -
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 · 14376 阅读 · 1 评论 -
在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 · 3900 阅读 · 0 评论 -
在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 · 1086 阅读 · 0 评论 -
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 阅读 · 0 评论 -
vuex刷新之后数据丢失,数据持久化,vuex-persistedstate
为什么刷新之后vuex的状态就没了?原因是刷新之后js初始化,vuex重新初始化了;常见的解决方案有1,mounted里面调接口重新给state赋值,太麻烦,pass2,watch里面监听state,再赋值,也很lowvuex理解不透彻的可以先看看完美方案是利用sessionStorage/localStorage,做一个暂时的储存store的模块化结构主要是针对mutation...原创 2019-03-27 12:12:14 · 3093 阅读 · 0 评论 -
vue tree封装一个可选的的树组件
组件实现的基本功能1,根据后端返回的数据格式,传入组件动态的渲染出当前角色有哪些权限(新建,修改)2,适配有2级和只有一级多选的数据3,有全选(√) ,全不选 ,部分已选(-)的3装状态,每一级都支持(用的iview2次封装)4,改变之后返回当前选中的所有权限的id,用于提交5,手风琴效果,小屏适配先看效果图.有部分权限没打开打开小屏权限数据结构,select_stat...原创 2019-04-02 19:37:09 · 1885 阅读 · 1 评论 -
vue根据权限生成动态路由、导航栏
基本思路:1,创建vueRouter,用公共路由实例化2,创建需要根据权限筛选的路由对象(在路由对象,添加必要的权限判断字段)3,登录完成,由后端配合返回当前用户的权限集合4,筛选出有权限的路由对象,利用vueRouter的addRoutes方法,生成完整路由5,处理刷新页面导致vueRouter重新实例化导致路由对象不完善 (利用router.beforeEach导航守卫,,利用add...原创 2019-04-17 12:08:09 · 8082 阅读 · 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 · 1157 阅读 · 0 评论 -
vue、react网页添加水印
原理:在页面覆盖一个盒子,取消鼠标事件,层级最高,透明,用canvas,绘制背景为了防止内部数据泄露,拍照等等,水印可以添加登录人姓名,公司名等等代码:(借鉴大神的)let watermark = {}let setWatermark = (str, option = {}) => { let id = '123.123.123'; if (document.getEle...原创 2019-04-17 17:26:10 · 2052 阅读 · 3 评论 -
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 · 2078 阅读 · 1 评论 -
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 · 9704 阅读 · 4 评论 -
iview的Select组件远程搜索的BUG优化--以及JS函数节流的应用
iview的Select组件远程搜索的优化使用业务场景:模糊搜索姓名,点击选择template:&lt;Select style='width:200px;margin-right:20px' @on-change='check' clearable filterable remote :remote-method='fuzzySearch' :loading="loading1" pla...原创 2018-11-27 15:33:10 · 4118 阅读 · 2 评论