HH

原创 锚点+滑动

点击滑动，实现描点，但是要求跳转的过程中有滑动，额，，又基于safari的兼容，，，因此手动计算滑动toUseDetail () { // document.querySelector('#luggageInstruction').scrollIntoView({ // behavior: "smooth" // }) // var el = document.querySelector('#lug

原创 promise 和 async，await

// const a = () => {// return new Promise(resolve => {// resolve('1')// })// }// const b = () => {// return a().then(res => {// console.log('1', res)/...

原创 关于如何在npm上发布一个自己的包流程：

关于如何在npm上发布一个自己的包流程： 创建一个npm账号 新建一个index.js function npmDemo(argument) { var name = 'finit'; var f1 =function f(arg){console.log(arg)} return { name:name, f1:f1...

原创 react-redux 改todoList

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import { Provider } from 'react-redux'i...

原创 redux-sage 的使用

import {createStore, applyMiddleware, compose } from 'redux'import todoApp from './reducer/index'import thunk from 'redux-thunk'import createSagaMiddleware from 'redux-saga'import mySaga from './...

原创 redux-devtools-extension 使用

import {createStore, applyMiddleware, compose } from 'redux'import todoApp from './reducer/index'import thunk from 'redux-thunk'// let store = createStore(todoApp,// window.__REDUX_DEVTOOLS_...

原创 redux-thunk的使用

import {createStore, applyMiddleware } from 'redux'import todoApp from './reducer/index'import thunk from 'redux-thunk'// let store = createStore(todoApp,// window.__REDUX_DEVTOOLS_EXTENSION...

原创 redux 异步请求操作

import React, { Component } from 'react'import './App.css'import ListItem from './DelItem'import store from './store'import {inputChange, addTo, delItem, initList} from './actions'import axios f...

原创 todoList加入redux

//创建storeimport {createStore } from 'redux'import todoApp from './reducer/index'let store = createStore(todoApp, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSI...

原创 React Router

import React, { Component } from 'react'import { HashRouter as Router, Switch, Route} from 'react-router-dom'import Routes from './route'class App extends Component { render () { return ( ...

原创 React todoList

import React, { Fragment } from 'react';import DelItem from './DelItem'// import { Component } from 'react'// 这上下两种是相等的// import React from 'react'// const Component = React.Componentclass Ap...

原创 原生JS实现Touch滑动反弹

<template> <div> <div class="box"> <ul @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend' class="scroll"> <li v-fo...

原创 上推动画

<template> <div class="box"> <div class="tab"></div> <div class="content-box"> <div ref="wrapBox" class="wrapBox"> <div class="scrollBox...

原创 better-scroll左右联动

<template> <div class="box"> <div class="tab"></div> <div ref="wrapBox" class="wrapBox"> <div class="scrollBox"> <ul v-for="(item, i) in...

原创 音乐排行榜动效

<template> <div class="box"> <span class="title">排行榜</span> <div class="top" ref="bgImg"> <!-- <span class="title">排行榜</span&...

原创 vue页面切换左右滑动动画

<template> <div class="container"> <!-- <router-link to='/far'>To Far</router-link> <router-link to='/user/1'>User1</router-link> <router-link ...

原创 左边定宽，右边超出点点点显示

<template> <div class="box"> <div class="left"> <img src="http://y.gtimg.cn/music/photo_new/T003R300x300M000000ywolj2fIe6R.jpg"/> </div> <div clas...

原创 better-scroll 横向轮播

<template> <div class="box" ref="box"> <div class="slide-box" ref="slideBox"> <div class="slide-item" v-for="(item,i) in imgList" :key='i'> <a> ...

原创 列表简约样式

原创 better-scroll纵向滚动

<template> <div ref="box" class="box"> <div class="content"> <p v-for="(item,i) in Array(60)" :key='i'>内容</p> </div> </div></template&g...

原创 导航栏

<template> <div class="box"> <div v-for="(item, i) in Array(4)" :key='i' class='item'> <span>歌曲</span> </div> </div></template><...

原创 vue拖拽

<template> <div class="box" ref="box"> <div class="left" :style="{width: leftOffsetPercent}"> <button>success</button> </div> <div class="ce...

原创 Vue居中弹窗加vue动画

<template> <div> <p @click="toggle" class="h4000">展示弹窗</p> <div class="box"> <transition name="opacity"> <div class="mask" @touchmo...

原创 Git指令

# git 命令大全1. git init: 在当前目录新建一个代码仓库2. git add a.txt：将a.txt从工作区提交到暂存区3. git commit -m 'modify information': 将修改部分从暂存区提交到本地的版本库4. git status: 查看当前分支文件的工作目和暂存区的状态5. git log: 查看提交历史记录6. cat a...

原创 js 中的函数重载实现

&lt;!-- 关于 js 中的函数重载 1.在 《js高级程序设计》 中告诉我们，js不支持函数重载，那么如果出现函数明相同的情况下，后者会覆盖前者。 2.简单区别一下 函数重载 和 函数重写 函数重载：函数名相同，函数的参数不同 （包括参数的类型和个数） 函数重写：函数名，参数和返回值都相同 3.其实js中的函数重载还...

原创 javascript 赋值 浅拷贝 深拷贝

let originObj = { name: 'Lili', age: 12, families: ['Jhon', 'Linda', 'Mike'] } // 赋值 (赋值获得的是指向原对象的一个地址指针，它和原对象操作的是同一个数据源，任何操作都会互相影响) let copyObj = originObj ...

原创 TypeScript入门

TypeScript简介typescript是由微软发明，是javascript的类型的超集，可以编译成javascript，运行在浏览器中的开源语言。它试图取代javascript，然而现在并没有实现，但是，现在很多的库和组件已经开始接受typescript，因此typescript的学习也变得很有必要。为什么typescript会出来，可能就是因为javascript实在是缺乏太多的东...

原创 vue中如何将变量带给class的属性名

遇到一个需求，设想是这样，我们需要根据不同的status给li设置样式，那么必须给li添加动态的class，添加方法如下： &lt;li :class="setClass(item.status)" v-for="(item, index) in dataLists1" :key="index" &gt;&lt;/li&gt;// 将class赋值给方法，动态生成对象 setC...

原创 element 图片上传

之前在项目中遇到图片上传的问题，其中还是有很多细节要注意。下面是当时要完成的效果图： 思路： logo1和logo2是同一行，点击添加又可以添加一行，这个时候用一个对象数组来存储logo1的name 和 url 属性，用另外一个对象数组来存储logo2的name 和 url 属性。同时，我们点击“点击上传”的时候，要获取到当前的index，这样我才知道，它是给数组中的哪一个进行上传...

原创 纯CSS实现手风琴

&lt;div class="box"&gt; &lt;ul&gt; &lt;li class="active"&gt; &lt;a&gt; &lt;img src="./images/1.jpg" /&gt; &amp

原创 Vue 组件和插件的关系

Vue组件（component）用来构成你的App的业务模块，它的目标是App.vue。Vue插件(plugin) 用来增强你的技术栈的功能模块， 它的目标是Vue本身。（插件是对Vue的功能的增强和补充）Vue组件我们通常在src的目录下，新建一个component文件夹来存放公共的组件，在我们要使用组件的页面中引入组件，并且进行一个说明。组件个调用它的页面之间的通信，就是父组件和子...

原创 vue 组件之间的通信

父组件向子组件通信 使用props，父组件可以使用props向子组件传递数据。 使用$children可以在父组件中访问子组件。 子组件向父组件通信 在vue中，不建议在子组件中更改父组件的状态，所以我们通过在子组件中使用vm.$emit( eventName, […args] )，在父组件中监听子组件emit触发的事件来进行通信。 使用$parent可以访问父组件的数据。 非父子组件...

转载 CSS 伪类 伪元素

伪类和伪元素伪类是用于当某个元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为动态变化的。伪元素用于创建一些不在文档树中的元素，并为其添加样式。CSS3的规范中，要求使用双冒号（::）表示伪元素，使用单冒号（:）表示伪类...

原创 JS Array 数组遍历

数组遍历是经常进行的一个操作，然而总是有时候会记不住各种遍历的返回值，是否会改变原数组等，这里做一个对比总结。在ECMAScript5为数组定义5个迭代的方法，每个方法都接收两个参数：要在每一项运行的函数和（可选的）运行函数的作用域对象---影响this的值。传入这些方法中的函数会接手三个参数：数组项的值，该项在数组中的位置以及数组对象本身。 ECMAScript5为数组定义的5个迭代...

原创 Javascript 数组去重

数组去重的几种简单的方法最原始的使用双层循环去重 let unique = (arr =&gt; { let res = []; for(var i = 0, arrLength = arr.length; i&lt;arrLength; i++){ for( var j = 0, resLength = res.length...

原创 vue 响应式原理

在vue中，数据是响应式绑定的，所以我们可以通过改变数据来更新视图。这同时也使得状态管理非常简单直接。官方文档介绍 https://cn.vuejs.org/v2/guide/reactivity.html因此，之前在项目中遇到一个bug，当我在一个数组中添加数据之后，打印数据，但是页面却无法得到更新的问题。‘解决方案：使用 Vue api 中的一个实例的方法 vm.$set( tar...

原创 简单通用的模态框

在学习使用vue和element的封装插件的时候，我们经常要写模态框的一个样式，那么，我觉的最简单的也就是下面这种，值得以后常用。&lt;style&gt; *{ margin: 0; padding: 0; } .mask { position: fixed; ...

原创 element table表格 头部设置样式

我们在使用element的表格的时候，经常需要我们自己重新设置表格的样式，个人表示加的最多的样式是给表格的第一行添加背景颜色，也就是头部标题添加上背景颜色。这里记录一下怎么实现。在 table attributes 中有一个 header-cell-style 属性（表格单元格的style的回调方法，也可以使用一个固定的Object为所有的表头的单元格设置一样的style）1.使用表格单元...

原创 Element form表单 表单域对齐

在form表单组件中，我们可以通过 label-position 属性来改变表单域或标签的位置，可选的值有 top/left/right ，默认的是 right ，lable-position 必须要和 label-width（表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值） 共同使用，才会生效。...

原创 JavaScript中 “按值传参”，“引用传参” 和 “共享传参”

js传参