- 博客(31)
- 收藏
- 关注
RSS订阅原创 react-native键盘遮盖底部输入框问题修复
在开发react native项目时碰到软键盘弹起时遮盖输入框的问题，使用官方提供的组件KeyboardAvoidingView效果不是很好，在github上找了一个组件react-native-keyboard-aware-scroll-view，地址：https://github.com/APSL/react-native-keyboard-aware-scroll-view，用法也比较简单。
2024-12-26 17:01:35
559
原创 spug自动化部署前端docker镜像
部署流程：内网服务器构建docker镜像 → 传至外网服务器 → 启动容器。在admin-ui下新建docker-compose.yml。admin-ui-v：镜像存放路径。admin-ui: 实际部署路径。
2024-05-28 10:03:18
347
4
原创 spug自动化部署前端项目
部署路径就是静态文件存放目录，对应nginx配置的路径。如果nginx是用docker安装，配置的路径为软链接，会报404，可以将spug的部署路径当成中转，在应用发布后执行中编写脚本将部署路径的文件移动到nginx目录下。在浏览器中输入 http://localhost:80 访问（默认账户密码在第4步初始化时设置）官网地址：https://spug.cc/docs/install-docker/Secret Token和Gitee保持一致。
2024-05-27 16:29:33
571
原创 gradle-7.5.1-all下载
初始化react native环境时下载gradle-7.5.1-all超时，可以手动下载替换。下载地址：https://gradle.org/releases/
2023-03-22 10:52:20
998
原创 解决react/jsx-no-bind报错
解决react/jsx-no-bind报错：JSX props should not use arrow functions
2022-10-13 10:23:18
1472
原创 前端输入框自动换行实现
利用textarea的scrollHeight属性动态改变textarea的高度实现自动换行1、自定义指令import Vue from 'vue';Vue.directive('autoTextarea', { inserted: (el, binding) => { console.log(el); const change = () => { const value = el.value; // 内容长度不变不做处理 if (
2021-04-26 00:09:59
3165
原创 Vuex原理学习笔记
1、Vuex.jslet Vue;const forEach = (obj, callbackk) => { Object.keys(obj).forEach((key) => { callbackk(key, obj[key]); })}class Store { constructor(options) { this.options = options; // 利用vue的数据绑定实现响应式更新store.state this.vm = n
2021-04-13 22:55:48
102
原创 vue响应式原理学习笔记
class Vue { constructor(options) { this.$el = options.el; this.$data = options.data; this.$methods = options.methods; this.$options = options; // 1、实现一个observer // 2、实现一个compiler new Compiler(this.$el, this); }}// 指令处理c.
2021-03-31 22:55:20
186
原创 webpack4搭建vue环境
1、config/webpack.base.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');const { VueLoaderPlugin } = require('vue-loader');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const NODE_ENV = process.env.NODE_ENV;console.log
2021-03-29 00:33:48
233
原创 webpack4搭建vue开发环境
一、项目基础文件新建src、config、public文件夹，index.html、index.js文件1、index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpac
2021-03-19 23:47:13
152
原创 express生成项目报错：express: command not found解决方法
使用express脚手架生成项目模板时报express: command not found解决方案1、node版本较低（低于8.2.0），需要安装express和express-generator安装express express-generatornpm install -g express express-generator生成项目模板express '项目名称'2、node版本较高时，需要使用npx命令生成项目模板新建项目文件夹生成项目模板npx express-genera
2021-01-27 00:09:37
759
原创 react+typescript项目中使用redux
1.项目目录2.新建index.ts文件，初始化一个增强store仓库import { createStore, applyMiddleware, StoreEnhancer, StoreEnhancerStoreCreator, Store } from 'redux';import thunk from 'redux-thunk';import reducer from './reducers/index';// 生成store增强器 const storeEnhancer: Store
2021-01-06 22:25:29
1035
原创 react+typescript项目配置CSS模块化
1.配置loadermodule: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader' }, { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader',
2020-12-29 21:55:26
1383
原创 typescript的链判断运行符?.
链判断运算符是一种先检查属性是否存在，再尝试访问该属性的运算符，符号为?.如果运算符左侧的操作数?.计算为undefined或null，则表达式求值为undefined。否则，正常触发目标属性访问，方法或函数调用namespace a { let a = { b: 1, speak() { console.log(111111111); } }; let b = a?.b; console.log(b); a?.speak();}...
2020-12-13 23:02:33
463
原创 typescript项目eslint配置
1、装包npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D2、配置eslint规则（.eslintrc.js）module.exports = { 'parser': '@typescript-eslint/parser', 'plugins': ['@typescript-eslint'], 'rules': { 'no-var': 'error',// 不能使用var声明变量
2020-12-12 12:13:24
6705
原创 JS格式化金额，用逗号隔开
// 保留两位小数var money = `${Number(132132.999).toFixed(2)}`;console.log(money);// 132133.00// 每隔3位用逗号隔开money = money.replace(/^(\d*).(\d*)/, (...args) => { return args[1].replace(/\B(?=(?:\d{3})+$)/g, ',') + '.' + args[2];});console.log(money); //
2020-12-03 11:11:05
504
原创 JS利用正则快速格式化手机号
let mobile = '13888888888'.replace(/^(.{3}).*(.{4})/, '$1****$2');console.log(mobile); // 138****8888mobile = '13888888888'.replace(/^(.{3})(.*)(.{4})/, '$1 $2 $3');console.log(mobile); // 138 8888 8888
2020-12-03 10:07:53
1650
原创 git常用的代码回滚命令
git本地操作有时会有误删误改并提交的时候，或者你已经把需求代码提交到远程仓库，然后产品经理说你的需求不上了。这就需要用到代码回滚。这里只介绍两个最常用的操作1.回滚本地代码查看log查看log可以用git log 命令，也可以去代码库copy$ git logcommit 91d88890cac745b7314fa115c4beaa5649cc1fc6 (HEAD -> mast...
2020-04-24 16:22:07
4928
原创 前端--移动端弹窗弹出后禁止页面滚动
问题描述在做项目时，我碰到了一个问题，当浮层弹出后，浮层后面的内容仍可以滚动。错误演示解决方案首先我们要明确，当浮层弹出后，我们操作的是body的滚动条，而不是其他div。1.body出现滚动条body出现滚动条。这种问题是应该避免，我认为合理的页面布局不应该让body出现滚动条。应该将内容放在div中，让div出现滚动条，这样可以很方便的处理各种问题。如果你的布局不好改，也是有解...
2020-04-23 18:01:50
1463
原创 vue的sync修饰符
在有些情况下，我们可能需要对一个prop进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。在正常情况下，我们可能首先会想到子组件emit一个事件，让父组件来修改对应的值，但是这样代码过去冗余。在vue 2.3.0后新增了.sync修饰符，可以完美实现“双向绑定”效果具体实现父组件：使用.sync修饰符向子组件中...
2020-04-23 10:49:56
136
原创 Vue移动端组件开发系列之Header组件
技术要点：1.是否显示下边框2.返回按钮支持自定义跳转，默认跳转支持组件外埋点操作3.支持右标题代码如下：HTML代码<template> <div class="header-bar" :class="{bd_line:showLine}" @touchstart.prevent > <div clas...
2020-04-16 17:03:48
779
原创 vue项目keepAlive配合vuex动态设置路由缓存
vue项目动态设置keepAlive缓存需求首页 → 列表页，缓存列表页面 → 详情页 → 列表页（不重新加载列表页，同时滚动条与进入详情页前一致）→ 首页（清除列表页的缓存）效果图解决方案直接使用keepAlive会出现一个问题，当从查询1进入列表页面，这时缓存list组件，然后返回首页，点击查询2，会发现list的数据是查询1的，因为这里直接调用了上一次的缓存因此，在返回首页后需...
2020-04-14 16:53:05
1880
原创 vue实现购物车商品单选、全选及商品数量和总价计算
vue实现购物车商品单选、全选及商品数量和总价计算最近在做一个vue的电商项目, 好久不做购物车功能, 已经忘得差不多了, 所以写了个小demo回顾一下, 代码写的很糙, 只是简单的实现了功能, 欢迎各位指正&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;
2018-12-10 00:37:15
7021
inspect.exe
2024-02-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人