Null_Bugs-优快云博客

原创 vue结合iview使用面包屑导航

1、配置路由{ path: '/list', meta: [{ title: 列表'}], name: 'MinePicture', component: () => import('../views/lists/list.vue'),},{ path: '/list/detail/:id', meta: [{ title: '列表',url:'/list' }, { title: '详情'}], name: 'pictureDetail', componen

2020-09-11 16:04:34 1028

原创 iview中表单单独进行验证

let _self = this new Promise(function (resolve, reject) { _self.$refs['formCustom'].validateField("mobile", (error) => { resolve(error) }) }).then((data)=>{ .

2020-07-16 16:26:34 1161

原创 vue中create-api

1.组件中必须设置name2.3.this.$create组件名4.注意只能是字符串，字符串可以响应式改变props

2019-11-28 21:22:56 1060

原创回流和重绘

理解浏览器的重绘和回流css性能能让javascript变慢？频繁触发重绘与回流，会导致UI频繁渲染，最终导致js变慢回流：当render tree 中的一部分（全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。当页面布局和几何属性改变时就需要回流重绘：当render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，...

2019-11-19 20:40:51 208

原创预加载和懒加载

懒加载通过监听scroll事件，判断图片进入可视区域之后请求图片资源对于电商等图片很多，页面很长的业务场景适用减少无效资源的加载并发加载的资源过多会阻塞js的加载，影响网站的正常使用可以使用原生js或者引用zepto.min.jsvar viewHeight = document.documentElement.clientHeight;//可视区域的高度functi...

2019-11-12 15:32:01 227

原创 window10中右击打开命令行

1、win键 + R 输入regedit2、打开“HKEY_CLASSES_ROOT\Directory\Background\shell”，shell右击新建项“在此处打开命令窗口”3、右击“在此处打开命令窗口”，新建“command”项"C:\Windows\System32\cmd.exe" "--working-dir" "%v."确定就ok了...

2019-11-08 22:02:51 333

原创 vue中多个组件调用同一个接口

export function getData(callback){ let opt = { method : 'get', url: '/user', success: res => { callback(res.data.value || []) }, fail:err =&...

2019-11-07 21:04:29 1599

原创 ios中click不起作用

click事件在PC端和安卓上都可以点击，但是在ios上因为在ios上类名为click-btn的div元素上没有click事件，它是touch事件,如果把click-btn的div改成button,在ios上是可以点击的,div本身默认不能点击，解决方案如下：方案1：在样式中添加属性cursor:pointer;方案2：添加touchstart事件document.body.addEv...

2019-11-07 08:49:29 586

原创 js/css导航条三级

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>三级导航菜单</title> </head> <style> *{ margin: 0; padding: 0;}body{ font-size: 1...

2019-09-27 14:53:39 434

原创 angular8 页脚

footer.component .html<app-horizontal-grid [cols]='5' [displayCols]='5'> <div appGridItem *ngFor="let item of tabItem; let idx = index;"> <img [src]="idx === selectedIndex ? ...

2019-09-25 17:48:52 431

原创 angular8 倒计时

componentimport { Component, OnInit, Input } from '@angular/core';import { Observable, interval } from 'rxjs';import {takeWhile, map, tap } from 'rxjs/operators';@Component({ selector: 'app-c...

2019-09-24 16:09:09 956

原创 angular8 管道和async

/* subscribe 是异步方法 */import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';import { ImageSlider, Channel } from 'src/app/shared/components';import { Acti...

2019-09-23 10:35:45 1423

原创 angular8 拦截器

首先新建一个文件夹叫interceptors，在该文件夹下建一个文件叫param.interceptor.ts，输入ng-http-interceptor创建import { Injectable } from '@angular/core';import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} fro...

2019-09-18 16:46:45 1241 1

原创 angular8 http请求

https://www.getpostman.com 下载postman在编辑器中搜索rest.client插件新建一个rest.http的文件@baseUrl = https://jsonplaceholder.typicode.comGET {{baseUrl}}/posts HTTP/1.1###POST {{baseUrl}}/POST HTTP/1.1C...

2019-09-18 15:10:06 4986

原创 angular8 脏值检查

什么是脏值检查？当数据改变时更新视图（DOM）什么时候会触发脏值检查？浏览器事件（如click,mouseover,keyup等）setTimeout()和setInterval()HTTP请求如何进行检测检查两个状态值：当前状态和新状态import { Component, OnInit, NgZone } from '@angular/core';...

2019-09-16 15:39:14 1168

原创 git push遇到的问题

git push origin master报错：! [rejected] master -> master (non-fast forward)1、git pull origin master --allow-unrelated-histories //把远程仓库和本地同步，消除差异2、重新add和commit相应文件3、git push origin master...

2019-09-05 10:41:28 226

原创 angular8 依赖注入

提供服务：@Injectable()标记为可供注入的服务模块中声明：providers 数组或者import对应模块在组件中使用构造函数中直接声明Angular框架帮你完成注入https://github.com/yyk316507/angualr8-demo...

2019-09-04 15:00:37 455

原创 angular8 管道

管道的作用就是在视图上提供便利的值变换的方法。{{obj | json}}{{date | date : 'MM-DD'}}{{price | currency : 'CNY':'symbol':'4.0-2'}}app.module.tsimport localZh from '@angular/common/locals/zh-Hans';import { regi...

2019-09-04 10:10:47 526

原创 angular8 路由初步

路由是什么路由（导航）本质上是切换视图的一种机制。路由的导航的URL是否真实存在angular的路由借鉴了大家熟知的浏览器URL变化导致页面切换的机制angular是单页程序，路由显示的路径不过是一种保存路由状态的机制，这个路径在web服务器上不存在。父组件<router-outlet></router-outlet>路由定义定义路由数组：路...

2019-09-03 13:57:25 635

原创 angular8 滚动多个图片加文字组件

子组件html<div class="container" [ngStyle]="{ 'grid-template-rows': templateRows, 'grid-template-columns': templateColumns}" (scroll) ="handleScroll($event)" > <ng-conten...

2019-09-02 14:32:51 359

原创 angular8组件嵌套

组件嵌套是不可避免的，过度嵌套会陷入复杂和冗余组件本身和外界的交互，通过@Input和@Output避免组件嵌套导致冗余数据和事件传递：内容投影、路由、指令、服务投影组件<ng-content select="样式类/标签/指令"></ng-content>组件：<ng-content select=""></ng-conte...

2019-08-30 11:57:41 492

原创 angular8 指令的样式和事件绑定

指令可以理解为没有模板的组件，它需要一个宿主元素推荐使用方括号 [] 指定Selector，使它变成一个属性html<div appGridItem *ngFor="let item of channels"> <img [src]="item.icon" alt="" [appGridItemImage]='"4rem"' [fitMode]="'non...

2019-08-29 17:02:33 972

原创 angular8 注解

import { Component, OnInit} from '@angular/core';import { Emoji, Comfirmable } from '../../decorators';@Component({ selector: 'app-horizontal-grid', templateUrl: './horizontal-grid.component.h...

2019-08-28 15:50:40 270

原创 angular8 模块

什么是模块模块就是提供相对独立功能的一组代码模块的组成部分可以有：组件，指令，服务，管道等从某种角度说，它像一个小型的应用@NgModule 注解·declarations 数组：模块拥有的组件、指令或管道。注意每个组件/指令/管道只能在一个模块中声明。providers 数组：模块中需要使用的服务exports数组：暴露给其他模块使用的组件、指令或管道等。...

2019-08-28 11:57:41 267

原创 angular8的双向绑定

<input [value]= "username" (input)="username = $event.target.value"/>ngModelFormsModule 中提供的指令使用[(ngModel)] = "变量" 形式进行双向绑定[(ngModel)] = "username" (ngModelChange) = "username = $eve...

2019-08-22 11:32:07 2303

原创 angular8 模板在组件类中的引用

<div #helloDiv>你好</div>export class AppComponent { @ViewChild('helloDiv') helloDivRef : ElementRef;} ngOnInit() { console.log("初始化",this.helloDivRef ) this.helloDivRef .n...

2019-08-22 10:36:12 724

原创 angular8的内容嵌套

在父组件引用的子组件里面加<div>内容嵌套</div>在子组件中添加<ng-content></ng-content>

2019-08-22 10:34:59 331

原创 angular8的组件的生命周期

constructor 构造函数永远首先被调用ngOnChanges 输入属性变化时被调用（在组件的 '@Input' 属性发生变化的时候调用）ngOnInit 组件初始化时被调用ngDoCheck 脏值检测时调用 (会调用多次)ngAfterContentInit 当内容投影ng-content完成时调用ngAfterContentChecked Angula...

2019-08-22 10:33:53 1279

原创 angular8 样式绑定的几种方式

[ngStyle]="{'background-color':backgroundColor}"注意：父组件引用的时候外层记得加个引号否则会以为是变量[backgroundColor]='"#ccc"'或者backgroundColor='orange'...

2019-08-22 10:33:09 2157

原创 angular8 封装组件

组件封装的意义和方法需要重用，或者简化逻辑ng generate component组件名（驼峰模式）使用index.ts方便导入以及隔离内部变化对外部的影响ng g c 组件名（驼峰模式）如果想在某个文件夹下新建组件 ng g c 文件名/组件名（驼峰模式）在每一个文件夹下新建一个index.ts 引用每一个组件里export * from ...

2019-08-22 10:32:05 1471

原创 typescript的interface

export interface TopMenu { title:string; link?:string;}

2019-08-22 10:27:26 419

原创 angular8指令

1.for循环变量的引用范围索引的获取第一个和最后一个奇和偶提升性能（trackBy:trackElement）trackBy:menu ? menu.title : null<li *ngFor="let item of items;let i = index;let first =first;let last =last;let odd = odd;let...

2019-08-22 10:20:09 628

原创 angular8项目需要的东西

vs的推荐扩展 Debugger for Chrome Path Intellisense Angular files Angular Language Service Angular 8 Snippets-typeScript一站式开发框架模块服务组件路由表单响应式开发删除rm -fr pinduoduong new pinduoduo...

2019-08-22 10:17:50 342

原创 js获取时间

1.获取上个月的最后一天var endDate = new Date();//上个月最后一天new Date(endDate.setDate(0)).toLocaleString();2.获取这个月的最后一天var date= new Date(2019,0,3)date.setDate(28)date.setMonth(date.getMonth()+1)let las...

2019-08-22 10:13:22 278

原创在angular中使用*ngIf else

<div class="lessons-list" *ngIf="condition else elseTemplate"> 判断条件为真</div><ng-template #elseTemplate> <div>判断条件为假</div></ng-template><div class...

2019-08-21 16:03:37 1258

原创 Angular8 移动端顶部导航demo

子组件：html<ul> <li *ngFor="let item of menus;let ind = index;"> <a href="#" (click)="handelSelected(ind)" [ngStyle]="{'color' : currentTab===ind ? titleActiveColor : titleColor...

2019-08-21 15:52:20 415

原创 node.js读取文件

使用文件读取const http = require('http');const fs = require('fs');const path = require('path');const server = http.createServer(function (req, res) { const fileName = path.resolve(__dirname, 'data...

2019-08-19 09:51:11 262

原创手机号，邮箱等加*号

手机号加*号 val.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')邮箱加*号val.replace(val.substring(4,val.loginName.lastIndexOf("@")),"*****")名称加*号val.replace(/([0-9a-zA-Z]{4})[0-9a-zA-Z]{10}([0-9a-zA-Z]{...

2019-08-15 13:56:20 582

原创图片点击放大图，鼠标可以放大缩小，旋转的一个插件

2019-08-14 17:24:18 809

原创使用lightbox 点击表格的图片放大，放大后可以旋转滚动鼠标放大缩小

引用lightbox.csslightbox.js在js中搜索Lightbox.prototype.build = function() {在这个方法后面添加下面的内容// 图片滚轮缩放 this.img = this.$container.find('.lb-image'); this.label = this.$lightbox.find(...

2019-08-08 17:17:32 1103

空空如也

空空如也