liuye066的专栏

react项目开发过程中遇到的问题

[a-d]"表示一个字符串包含小写的'a'到'd'中的一个（相当于"a¦b¦c¦d"或者"[abcd]"）；（"a","ab","abbb",……"^The"表示所有以"The"开始的字符串（"There"，"Thecat"等）；'相当于"{0,}"，"{1,}"和"{0,1}"。"(a¦b)*c"表示一串"a""b"混合的字符串后面跟一个"c"；"[ab]"表示一个字符串有一个"a"或"b"（相当于"a¦b"）；"hi¦hello"表示一个字符串里有"hi"或者"hello"；...

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象中用法：1、将一个数组放入另一个数组中2、拼接数组使用扩展运算符可以代替concat()来拼接数组。3、扩展运算符可以与解构赋值结合起来，生成数组4、Math5、将类数组或可遍历对象转换为真正的数组6、字符串转数组......

指令以"v-"作为前缀，Vue提供的指令有：v-model、v-if、v-else、v-else-if、v-show、v-for、v-bind、v-on、v-text、v-html、v-pre、v-cloak、v-once等。指令也可以自定义指令既可以用于普通标签

创建数组var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度，注意不是上限，是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值数组元素的添加push// 将一个或多个新元素添加到数组结尾，并返回数组新长度arrayObj. push([item1 [item

CSS 外边距重叠(外边距塌陷)块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。一、哪些元素会发生外边距重叠问题外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题二、什么情况下会发生外边距重叠呢第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值

效果：功能：1。点击色块中任何一点，色块中的正方形显示该点的颜色。2。点击色块上方的颜色圆点，色块选中该颜色所在的位置，并在正方形中显示相应颜色。3。上方圆点如果不是rgb格式，需要转换。4。组件的大小从调用它的页面中传过去。组件代码(CanvasColor2.vue)：<template><!-- <div>--> <div id='outDiv' style="position: relative">&l

第一种： 使用vue-seamless-scroll组件：1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save2。使用2-1 全局配置在main.js中，正常配置是：import scroll from 'vue-seamless-scroll'Vue.use(scroll)在用到的页面文件中：<vue-seamless-scroll></vue-seamless-scroll..

第一种情况：父子组件width都设为100%，子组件中设置了margin，溢出解决方法：在父组件中加入display: inline-flex即可<div style="width: 100%; display: inline-flex;"> <div style="width: 100%; background-color: #46b6c8; margin: 12px;">sdsdffsdfsdf===== </div></

效果：轮播功能用到了react-slick组件，安装：npm install react-slick --savenpm install slick-carousel安装完后需要在使用轮播图的页面上导入css文件：import Slider from 'react-slick';import 'slick-carousel/slick/slick.css';import 'slick-carousel/slick/slick-theme.css';swiper.js.

效果如下：LineChart.jsimport React, {Component} from 'react';import {Card} from 'antd';import EChartsReact from 'echarts-for-react';class LineChart extends Component{ getOptions =(hours,temps, humiditys,weathers) => { return { .

1。自定义确认框和提示框根据传入的type来判断是确认框或提示框<template> <transition name="confirm-fade"> <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')"> <div class="confirm-content-wrap" @click.stop>

VUE中，在一个页面打开弹框，在弹框中上下滑动，下方页面会跟着滑动。解决办法：在main.js中加入代码：//弹出框禁止滑动Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面

1。在类组件中打开抽屉组件的方法：使用state来设置显示与否。setState来改变状态import { Drawer, Button } from 'antd';import React from 'react'class DrawerDemo extends React.Component { state = {visible:false} showDrawer = () => { this.setState({ visib

Mobx 快速入门安装依赖项: mobx, mobx-reactnpm i mobx mobx-react定义observable, observer 和 action1。 定义一个状态对象, 它具有可观察的属性, 我们将它称为 observable，将状态对象传递给 mobx observable()import {observable} from 'mobx';let tableState = observable({ Head: [ {heade..

在函数组件中根据onClick里调用的函数的写法不同，onClick={}里有多种调用方式。第一种函数： function jump(url,event) { goToPage(url); }当onClick={}里调用这个函数时，有两种写法：（1）方法名.bind(this,参数)<table onClick={jump.bind(this,goods.link)}>如果直接用方法名(参数)调用的话，打开页面，该方法自动执行。&l

在React中使用echarts图表，制作一张24小时天气曲线图，显示温度，湿度曲线和各个小时的天气情况和具体温度；描述：设置了3个x轴，设置了时间，温度，天气效果图：1. 安装：npm install --save echarts-for-reactnpm install echarts --save2. 在图表页面引入Echartsimport React from 'react';import ReactEcharts from 'echarts-for-r.

一. 使用 create-react-app 快速构建 React 开发环境npm install -g create-react-appcreate-react-app my-appcd my-app/npm start你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：<script src="https://unpkg.com/react@16/umd/react.development.js"></script> &l

1. iOS 点击组件时，出现黑色的边框：这个是ios兼容的问题，因为safari有自带的默认样式，只需要设置-webkit-tap-highlight-color:rgba(0,0,0,0)就可以了。这个意思是发生tap事件时高亮背景色设为透明 就不影响其他样式了。网上很多资料点击出现蓝色或黄色边框时，加 outline:none，在这里不管用。...

<input type="checkbox" id="switch" class="switch" :checked="fun.value=='true'">css样式：/* Switch开关样式 *//* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */input[type='checkbox'].switch{ outline: none; appearance: none; -webkit-appearance: ...

Vue安装1. 下载安装nodeJs，中文官方下载地址：http://nodejs.cn/download/Node.js 历史版本下载地址：https://nodejs.org/dist/node.js安装包自带npm，无需独立安装。查看当前的 Node 版本：$ node -vv4.4.3查看当前的npm版本：npm -v2.安装vue（1）npm方法$ npm install vue（2）CDN方法:对于制作原型或学习，你可以这样使用最新版本.

1。v-bind:判断变量isShow 的值，如果为 false 使用 head_float 类的样式，否则不使用该类第一种方法， 用v-if和v-else-if：<Energy ref="myEnergy" :tasks="tasks" v-if="isShow"></Energy><Energy ref="myEnergy" :tasks="tasks" v-else-if="!isShow" class="head_float">第二种方法：