- 博客(22)
- 收藏
- 关注
RSS订阅原创 不确定行数文本上下左右居中并且超出省略号代替
动态获取数据的时候不确定文本行数并且要求文本居中和超出的用省略号来代替.son{ overflow: hidden;//超出隐藏 text-overflow: ellipsis;//溢出用省略号显示 display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。 // 控制行数 -webkit-line-clamp: 2;//超出两行隐藏 -webkit-box-orient: vertical; // 从上到下垂直排列子元素 //（设置伸缩
2021-09-16 18:46:37
204
原创 react+TypeScript 选项卡
HTML:import { Component} from "react";import './tab.less'interface Props{ a:string}interface User{ ID:string text:string}interface Cont{ ID:string text:string}interface State{ ButtonIndex:number ButtonList:User[]
2021-09-16 17:24:14
200
原创 react+TypeScript 拖拽（pc端和移动端）
1.pc端HTML：import React, { Component, createRef } from "react";import './deag.less'interface Props{ }interface State{ }class Drag extends Component<Props,State>{ disX:number=0 disY:number=0 X:number=0 Y:number=0
2021-09-16 17:20:45
382
原创 React项目，从详情页返回列表页时，保存数据并返回到原来的位置
移动端开发时会遇到在列表页点击进入详情，返回后列表页刷新的情况，对用户体验很不友好。解决方案：使用 react-keeper 完成路由的分配，以及页面组件的缓存react-keeper 详情参考： https://blog.youkuaiyun.com/qq_37942845/article/details/1046949661、下载相关依赖项npm install react-keeper -s2、app.js中相关配置原来我们app.js中设置路由import { Component }
2021-09-12 21:07:53
2822
原创 css 设置最小字体
用transform：scale<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-09-02 21:23:47
1493
原创 react配置redux
第一步：下载 react-redux 和reduxnpm i react-redux redux -D第二步：src路径下新建store文件store文件下新建index.js文件 import { createStore } from "redux";//引入公用的方法import { SET_NSME } from './action' //传值 name:姓名 age: 年龄function user(state = { name: 'blue', ag.
2021-09-02 20:06:47
247
1
原创 create-react-app 配置 二次封装axios 和反向代理
1.安装axiosnpm install axios --save2.在src里新建一个api文件，并在里面创建index.js和request.jsindex.js里面的代码如下：import { Service } from "./request"; export function searchCar(config){ const params=new URLSearchParams() params.append('page',config.page).
2021-09-02 19:31:49
522
原创 create-react-app 配置路由
1.下载路由的核心中间件npm install react-router-dom react-router-config -S2.在src中的index里引入中间件，并修改代码如下：import {HashRouter as Router} from 'react-router-dom' <Router> <App /> </Router>,3.在src里面建一个文件，里面在创建Index.js和List.jsI..
2021-09-02 18:51:04
1387
原创 在react中配置Antd Mobile后导致px转rem失效问题及配置文件别名失效问题的解决办法
1.首先打开antd-mobile的官方文档https://mobile.ant.design/docs/react/use-with-create-react-app-cn安装npm install antd-mobile --save第二步：下载npm install react-app-rewired customize-cra --save-dev第三步：打开package.json ，找见scripts直接全部替换/* package.json *...
2021-09-01 19:51:11
1788
原创 react 暴露webpack.config.js
第一步：npm run eject如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下继续在npm中输入git add .git commit -m '自定义名'npm run eject这个时候在你创建的文件里面就可以直接看见文件夹：config...
2021-09-01 19:24:21
431
1
原创 react的create-react-app移动端rem适配
1. 安装：npm install lib-flexible postcss-pxtorem -S 2. 引入在项目入口文件index.js引入lib-flexibleimport 'lib-flexible';3. 修改webpack.config.js3.1 初始化配置npm run eject这时候可能会报错解决方案git initgit add .git commit -m 'init'3.2. 修改webpack.config.j
2021-09-01 19:14:47
971
4
原创 新版 create-react-app less环境配置
1. 安装lessnpm install less-loader less --save-dev2. 查找node_modules 下面的react-scripts/config/webpack.config.js 默认已经帮你配置了sass环境 (只要安装sass环境 npm install sass-loader node-sass --save-dev)我们只要新增新增代码如下：const lessRegex = /\.less$/;cons...
2021-09-01 18:58:32
282
原创 Vue实现两个小球，线交叉
html部分<template> <div class="about"> <div class="box"> <!-- 默认线 --> <div class="Line"></div> <!-- 蓝色的线 --> <div class="slider-Line" ref="slider-Line"></div> <!-
2021-08-30 20:48:02
650
原创 VUE 实现两个小球互推
html 部分<template> <div class="about"> <div class="box"> <!-- 右边小球 --> <div class="ball ac" @touchstart.prevent="fnstart"></div> <!-- 左边小球 --> <div class="ball" @touchstart.preven
2021-08-30 20:41:28
136
原创 React 实现选项卡
HTML 部分<body> <div class="root"></div></body><script type="text/babel"> class Table extends React.Component { constructor(props) { super(props); this.state = { curr
2021-08-30 20:31:06
403
原创 React实现拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2021-08-30 20:27:49
228
原创 Vue vue-lazyload懒加载
1.安装，在vue-cli中安装npm install vue-lazyload -D2.在vue-cli中的使用在main.js中配置import VueLazyload from 'vue-lazyload'//使用懒加载组件Vue.use(VueLazyload,{ loading:require('../src/assets/images/Loading_failed.png'), attempt:3})3.把图片img里面路径 ：src改为v-lazy 就可以
2021-08-11 16:30:24
149
原创 vue-cli使用px2rem 或 postcss-plugin-px2rem px转换rem
1.安装插件（1）安装px2rem-loader(devDependencies)npm install px2rem-loader --save-dev（2）移动端适配解决npm包 "lib-flexible" (dependencies)npm install lib-flexible --save（3）main.js中引入 "lib-flexible"import 'lib-flexible' // 移动端适配 (目录: hello-world/src/main.js)2
2021-07-20 15:14:09
995
原创 vue解决ios橡皮筋回弹
通过监听 touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 // 禁止页面滚动 var forbidScroll = function (e) { e.preventDefault(); }; // 通过 $once 来监听生命周期 beforeDestroy 钩子 this.$once("hook:beforeDestroy", () => { bod
2021-07-20 14:39:13
196
1
转载 vue实现购物车抛物线小球动画效果的方法
这是模仿饿了么写出来的效果代码部分HTML<template> <!--购物车小球--> <div> <button @click="additem" class="shop">按钮</button> <div class="cart">{{ rednum }}</div> <div class="ball-container"> <!--小球-
2021-07-20 14:37:17
1002
1
原创 vue 路由跳转记住滚动位置，返回时回到上次滚动位置
第一步：写到App.vue组件中<keep-alive><!--//缓存组件跳转的页面--><router-viewv-if="$route.meta.keepAlive"class="ui-view"transition-mode="out-in"></router-view></keep-alive><!--//非缓存组件跳转页面-->...
2021-07-01 14:54:23
459
原创 npm查看源以及切换源
1.设置为淘宝镜像npm config set registry https://registry.npm.taobao.org2.设置回原本的源，用来发布npm包
2021-06-08 16:13:25
552
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人