mystraight-CSDN博客

原创小程序生成图片并保存(利用painter生成图片)

image.jsexport default class LastMayday { palette(bg,articleTitleUrl,code,logo,title,content) { return ({ width: '650rpx', height: '1000rpx', backgro...

2018-08-22 10:16:36 7529 3

原创 react-router（4.2）路由嵌套传参

1、app.jsimport React, { Component } from 'react';import './App.css';import {Router , Route ,Switch} from 'react-router-dom'import history from './history';import Portal from './components/Port...

2018-05-25 16:04:58 1117

原创 react 路由传参(react-router-dom^4)

react 路由传参方式一：通过params 1.路由表中 &amp;lt;Route path=' /test/:id ' component={test}&amp;gt;&amp;lt;/Route&amp;gt;　　　　　　　　　　　 2.Link处 HTML方式 ...

2018-05-25 15:42:01 4462 1

原创 js canvas 动态生成图片，以及将base64转换成file对象

export default class DrawIamge { // 随机生成RGBA颜色 randomRgbaColor (min, max) { let r = min + Math.round(Math.random() * 1000) % (max - min) // 随机生成256以内r值 let g = min + Math.round(Math.random...

2018-05-12 00:16:16 10659

翻译 angular.js 路由及页面传参( 收藏)

页面传参数方法：1、$rootScope。2、（url）/user/:name/:age。页面转换方法：1、href="#/"。2、$state.go。3、$location.path。4、ui-sref（1）自带路由ngRoute<html> <head> <meta charset="utf-8"> ...

2018-05-03 13:58:29 290

翻译 AngularJS中Directive指令系列 - scope属性的使用(留着以后忘记时看看)

每当一个指令被创建的时候，都会有这样一个选择，是继承自己的父作用域（一般是外部的Controller提供的作用域或者根作用域（$rootScope）），还是创建一个新的自己的作用域，当然AngularJS为我们指令的scope参数提供了三种选择，分别是：false,true,{}；默认情况下是false。scope = false 首先我们来看一下，当scope参数被设置为false时有什么...

2018-04-26 16:41:33 547

翻译 React学习父子组件通讯

React父子组件之间通讯，利用props和state完成，首先React是单向数据流，父组件可以向子组件传递props；实现父子组件双向数据流整体的思路是： 1，父组件可以向子组件传递props，props中带有初始化子组件的数据，还有回调函数 2，子组件的state发生变化时，在子组件的事件处理函数中，手动触发父函数传递进来的回调函数，同时时将子组件的数据传递回去 2、实现代码 ...

2018-04-25 09:28:08 184

原创 angular5 配置使用sass

1、利用npm工具安装sass依赖和loader cnpm/npm install node-sass --save-dev cnpm/npm install sass-loader --save-dev2、修改.angular-cli.json文件"styles": [ "styles.scss"],"defaults":{ "styleExt": "scss"...

2018-04-19 10:04:14 1880

原创 vue comfirm 弹框组件

static Comfirm (option, callback) { option = option || {}; let MyModal = Vue.extend({}); this.confirm = new MyModal({ data: { show: false, title: option.title ? opt...

2018-04-18 17:00:17 3304

原创 angular.js开发中遇到的两个小问题

1、刷新当前路由ui-sref="app.homeSystem.homeWarehouse" ui-sref-opts="{reload:'app.homeSystem.homeWarehouse'}"或者 var url = $location.path().substring(1); var currentUrl = url.replace(/\//g,"."); $state.r...

2018-04-17 11:58:12 116

原创 react 实现vue里面的 v-html&&v-if&&v-show.html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

2018-04-16 10:18:46 6000 2

转载双向绑定原理(如vue)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Two-way-data-binding</title></head><body> &am

2018-04-16 10:10:36 246

原创 react 路由懒加载和拦截

import React from 'react'import { Router, Route, IndexRoute } from 'react-router'import hashHistory from './history'import App from './base'//路由懒加载const table = (location, cb) => { require....

2018-03-29 18:04:18 4166

原创 angula5基本指令的学习

指令是ng最为强大的功能之一，跟之前的angular.js 语法不一样，angular5采用了一种新的语言，typescript语法，但是很多内容相似。下面为大家介绍自己在学习5的一些基础知识1、*ngFor 像 for 循环一样，可以重复的从数组中取值并显示出来。/ .tsthis.userInfo = ['张三', '李四', '王五'];// .htmldiv clas

2018-01-15 10:34:52 1505

原创 react 实现双向绑定以及事件绑定

import React from 'react';class Test extends React.Component{ constructor(props){ super(props); this.state = { email: "", intro: "", city: "hz",

2017-11-29 23:01:40 6859

原创 react在jsx语法中实现for循环

<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="babel.min.js"></script><style> .yew{color:re

2017-11-13 11:55:08 10580

原创 better-scroll上拉加载和下拉刷新的使用（基于vue写成组件的形式）

import BScroll from 'better-scroll' export default { props: { /** * 1 滚动的时候会派发scroll事件，会截流。 * 2 滚动的时候实时派发scroll事件，不会截流。 * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

2017-11-13 00:16:32 1964

原创移动web页面，input获取焦点弹出系统虚拟键盘时，挡住input的解决方案

移动页面写定位时不用fixed定位 const brand = navigator.userAgent.indexOf(‘Android’) if (brand > -1) { const maxHeight = document.body.clientHeight window.addEventListener(‘resize’, function () { const

2017-11-11 11:01:12 2276

原创 vue安装node-sass出现问题的解法方法

1，使用save会在package.json中自动添加。npm install node-sass --savenpm install sass-loader --save2，通常使用npm安装会出现安装失败。（网路问题）3，可以通过淘宝的npm镜像安装node-sass，解决以上问题。npm install -g cnpm --registry=https://registry.npm.t

2017-09-12 09:20:09 6718

原创 vue2 router 动态传参，多个参数

1、不显示在url中比如有个路由跳转时需要带两个参数：<router-link to='/straight'>查看</router-link>可以这样写 <router-link to='/straight/goodId/skuId'>查看</router-link>然后去router.js 中处理这个路由import Vue from 'vue'import Router from 'vu

2017-09-06 23:26:58 11849

原创拖拽（可以封装成指令的形式 angular ）

//父元素的宽高，不让其脱离宽高 //link:function (scope,ele,attr) {ele.parent (可以拿父元素的宽高)} $scope.widths = $(".box").width(); $scope. heights = $(".box").height(); function draggleBefo

2017-08-31 11:53:01 1242

翻译 vue-模态组件

首先看看它的js代码，这次的js代码相比之前的例子会相对简洁：// register modal componentVue.component('modal', { template: '#modal-template', props: { show: { type: Boolean, required: true, // 必需且是bool类型的

2017-08-21 10:11:47 872

原创通过AngularJS实现图片上传及缩略图展示(学习)

“`

2017-05-04 17:31:11 2652

原创 angular 路由拦截

$scope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){ if(toState.name=='login') return; if(!comApi.isNotNullAndUndefined($sessionStorage.ustu)){

2017-04-28 14:43:55 2765

原创 js面向对象

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body> <script> //封装 /*function Cat(name,color){　　　　this.name = name;　　　　this

2017-04-01 10:24:05 163

原创 js面向对象（原生）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> // function A(name) { this.name = name; } A.prototype.sho

2017-03-30 18:03:12 186

翻译指令与控制器之间通讯

scope = {} 下面我们要进入一个好玩的部分，当我们将scope的属性设置为{}时，我们可以做更多的事情。AngularJS最强的大的地方之一就是它可以构建组建，无论放在哪里都是可以使用的；这所以可以做到这些，不得不归功于指令的这个属性；当我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。

2017-03-27 11:34:06 421

原创 Vue 路由嵌套、数据请求、组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><link rel="stylesheet" href="css/style.css"><body><div id = "app"> <div class="app" > <a

2017-03-20 12:55:19 4460

转载 Vue2 路由

vue-router 2.0 改变的内容原文 https://segmentfault.com/a/1190000006623100 主题软件开发 2.x 版本的 vue-router 相比之前的0.7.x版本，有很多破坏性改变：通用 API 的修改The old router.go() is now router.push() .新的 router.go 类似 window.histo

2017-03-07 09:39:24 635

原创 vue的全选与反选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script type="text/javascript" src = "vue.js"></script><body> <div id = "test">

2017-03-01 17:25:59 752

翻译 angularjs 弹出框 $modal

$modal只有一个方法：open，该方法的属性有：templateUrl：模态窗口的地址template：用于显示html标签scope：一个作用域为模态的内容使用（事实上，modal会创建一个当前作用域的子作用域）默认为modal会创建一个当前作用域的子作用域）默认为rootScopecontroller：为modal指定的控制器，初始化modal指定的控制器，初始化scope，该控制器可用$m

2016-11-21 14:12:27 1856

翻译 $state.go和$location.href有什么区别

前者不在浏览器中保存跳转前的网址，因此按返回键将无效后者不存在这个问题 reload方法，强迫浏览器刷新当前页面 replace方法，通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(

2016-11-10 16:28:50 3213

原创 zepto延迟300s

<!doctype html><head> <meta charset="utf-8" /> <title>zepto延迟</title> <script src="http://zeptojs.com/zepto.js"></script> <style type="text/css"> .div1{ background:

2016-11-06 15:42:20 1321

原创 angular给渲染的标签第一个标签添加默认样式

<span ng-repeat = "obj in datas" class="watch-{{$first}}"></span>前几天小白在用angular写东西的时候遇到了这一个一个问题，就是在渲染时，想要在第一个标签加个样式，结果纠结很久，最后百度才明白如何 {{$first}} 代表如果是第一个数据则返回ture ,所以第一个class名为 watch-true 其他的就是wat

2016-10-26 23:22:24 2020 3

原创 gulp使用

类似于grunt，都是基于Node.js的前端构建工具。不过gulp压缩效率更高。工具/原料nodejs/npm方法/步骤首先要确保pc上装有node，然后在global环境和项目文件中都install gulpnpm install gulp -g (global环境)npm install gulp –save-dev (项目环境)在项目中install需要的gulp插件，一般只压缩的话需要np

2016-09-26 14:11:37 299

翻译贝塞尔曲线在css3中的应用

2016-09-09 21:39:10 930

翻译 css3关于 animation -timing- function step()介绍

最近在学习遇到了这个问题，有点不懂，所以在网上寻找此笔记，以备学习之用! CSS3的Animation有八个属性animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

2016-09-09 21:31:58 7081

翻译 node.js 包的概念

在Node.js语言中，包和模块并没有本质的不同，包是在模块的基础上更深一步的抽象，包将某个独立的功能封装起来，用于发布、更新、依赖管理和进行版本控制。Node.js根据CommonJS规范实现了包机制，开发了npm来解决包的发布和获取需求。 Node.js的包是一个目录，其中包含JSON格式的包说明文件package.json。Node.js的包基本遵循CommonJS规范，因此具备以下特征：

2016-09-09 01:14:54 373

原创 git 创建分支

使用git管理项目的几个关键点 1,从已有的分支创建新的分支(如从master分支),创建一个dev分支git checkout -b dev2,创建完可以查看一下,分支已经切换到devgit branch* devmaster3,提交该分支到远程仓库git push origin dev4,测试从远程获取devgit pull origin dev或者：如果用命令行，运行 git fetch，

2016-09-07 15:12:08 319

原创 node.js events(EventEmitter对象)

var events = require(‘events’); var eventEmitter = new events.EventEmitter(); var listener1 = function listener1(){ console.log(‘监听器 listener1执行’); }; var listener2 = function listener2(){

2016-09-05 01:03:53 291

webpack搭建的一个vue项目模板

空空如也