按鈕

<button ng-button nzType="primary">Primary</button> nzType="" primary/default/dashed/danger

按鈕內部嵌入圖標

<button nz-button nzType="primary">Search<i nz-icon type="search"></i></button>

大小

nzSize large 大 small 小

按鈕組

<nz-button-group [nzSize]="size"> <button nz-button nzType="primary"><i nz-icon type="left"></i>Backward</button><button nz-button nzType="primary">Forward<i nz-icon type="right"></i></button></nz-button-group> size='large' 可以統一設置按鈕組的大小

禁用

<button nz-button nzType='primary' disabled>禁用</button> <button nz-button nzType='primary' [disabled]=false>不禁用</button>

加載的按鈕

<button nz-button nzType="primary" nzLoading>Loading</button><button nz-button nzType="primary" [nzLoading]=false>Loading</button>

nzBlock

按鈕適合父寬度<button nz-button nzType="primary" nzBlock>Primary</button>

圖標

使用<i nz-icon></i> 聲明組件 nzType 設置對應的圖標 nzSpin 屬性實現動畫旋轉<i nz-icon [nzType]="'sync'" [nzSpin]="true"></i>nzTheme 屬性為 twotone 來渲染雙色圖標 [nzTwotoneColor] 來設置顏色 <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>

使用阿里圖標庫(這個很好用)

html<i nz-icon [nzIconfont]="'icon-twitter'"></i>ts import { NzIconService } from 'ng-zorro-antd';constructor(private _iconService: NzIconService) {this._iconService.fetchFromIconfont({scriptUrl: '../../../assets/iconfont.js' //下載圖標路徑的js});}

兼容圖標的寫法

<i nz-icon [type]="'star'" [theme]="'fill'"></i>

設置class或者style會以SVG的形式渲染

<i nz-icon [type]="'message'" style="font-size: 16px; color: #08c;"></i>

ng-zorro 布局篇

<div nz-row><div nz-col nzSpan="12">col-12</div><div nz-col nzSpan="12">col-12</div></div> 父盒子帶有 nz-row 子盒子帶有nz-col,因為24柵格,nzSpan="6"柵格常常需要間隔 nzGutter 父元素 <div nz-row nzGutter="16"> 推薦 8n+8左右偏移 子盒子 nzoffset="4"

ng-zorro Flex布局

父元素添加 nzType="flex" 水平方向 nzJustify="" start,center,end,space-between,space-around <div nz-row nzType="flex" nzJustify="start"><div nz-col nzSpan="4">col-4</div> 垂直方向 nzAlign="" top middle bottom<div nz-row nzType="flex" nzJustify="space-around" nzAlign="middle">

響應式布局

xs sm md lg xl xxl 12刪格 <768 >=768 >=992 1200 <div nz-row><div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10"></div>[nzXs] <576px [nzSm] ≥576px [nzMd] ≥768px [nzLg] ≥992px [nzXl] ≥1200px [nzXXl] ≥1600px

向右移動的個數

[nzPull] 柵格向左移動格數 [nzPush] 柵格向右移動格數<div nz-row><div nz-col [nzSpan]="18" [nzPush]="6">col-18 col-push-6</div><div nz-col [nzSpan]="6" [nzPull]="18">col-6 col-pull-18</div></div> 可以調換兩個盒子的順序,但是不會改變他們的大小,,如果要交換位置就是這個,不行的話就用偏移

圖釘

nz-affix 標簽[nzOffsetTop]="120" 下面滾動距離上面的距離 <nz-affix><button nz-button [nzType]="'primary'"><span>Affix top</span></button></nz-affix>[nzOffsetBottom] 距離窗口底部達到指定偏移量后觸發 number [nzOffsetTop] 距離窗口頂部達到指定偏移量后觸發 number 注意圖釘不要使用定位

表格

<nz-table #nzTable [nzShowPagination]="total>10" nzShowSizeChanger nzShowQuickJumper [nzFrontPagination]="false" [nzData]="searchResult" [nzPageSizeOptions]="[10, 20, 50, 100]" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [nzShowTotal]="totalTemplate"[nzTotal]="total" [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">[nzShowPagination] 是否顯示分頁器 [nzShowSizeChanger] 是否可以改變 nzPageSize[nzShowQuickJumper] 是否可以快速跳轉至某頁[nzFrontPagination] 是否在前端對數據進行分頁，如果在服務器分頁數據或者需要在前端顯示全部數據時傳入 false [nzData] 數據數組 [nzPageSizeOptions] 頁數選擇器可選值 [nzPageIndex] 當前頁碼，可雙向綁定 [nzPageSize] 每頁展示多少數據，可雙向綁定 [nzShowTotal] 用于顯示數據總量和當前數據范圍，用法參照 Pagination 組件<ng-template #totalTemplate let-total>共 {{total}} 條</ng-template>

分頁

<nz-table #nzTable [nzShowPagination]="total>10"nzShowSizeChanger nzShowQuickJumper[nzFrontPagination]="false"[nzData]="listOfData" [nzPageSizeOptions]="[10,20, 30,40]" [(nzPageIndex)]="page"[(nzPageSize)]="page_size"[nzShowTotal]="totalTemplate" [nzTotal]="total"[nzLoading]="loading"(nzPageIndexChange)="searchData()"(nzPageSizeChange)="searchData(true)"><ng-template #totalTemplate let-total>共 {{total}} 條</ng-template> ts// 表格的設置項public page = 1;public page_size = 10;public total: any; //多少條數據public listOfData: any = [];//表單數據searchData(reset: boolean = false) {if (reset) {this.page = 1;}this.loading = true;const params = {page: this.page,page_size: this.page_size};this.http.get('/api/v1/get_ip/shows_blocked_ips/', params).subscribe(res => {console.log(res);if (res['status'] === 1) {this.total = res['total'];this.listOfData = res['data'];this.loading = false;} else {this.loading = false;this.nzMsg.create('error', `請求出錯！`);}})}

Layout布局

nz-layout 布局容器 下面的標簽都只能放在nz-layou中nz-header 頂部布局nz-sider 側邊欄nz-content 內部部分nz-footer 底部布局 [nzWidth]="numer" 寬度 [nzTheme]="'light'" 主題顏色,默認藍色 'light'｜'dark' 白色或者藍色 <nz-layout><nz-header>header</nz-header><nz-layout><nz-sider>left sidebar</nz-sider><nz-content>main content</nz-content><nz-sider>right sidebar</nz-sider></nz-layout><nz-footer>footer</nz-footer> </nz-layout>

　面包屑

自動面包屑路由{path: 'apple',component: ArticleComponent,data: {breadcrumb: 'Apple'},children: [{path: 'steve',component: ArticleComponent,data: {breadcrumb: 'Steve'},children: [{path: 'jobs',component: ArticleComponent,data: {breadcrumb: 'Jobs'}}]}]}html<nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb><nz-divider></nz-divider> //分割線<router-outlet></router-outlet> See the first: <a [routerLink]="'apple'">Apple</a><br> See the second: <a [routerLink]="'apple/steve'">Steve</a><br> See the third: <a [routerLink]="'apple/steve/jobs'">Jobs</a><br>不會的話就用簡單點<nz-breadcrumb><nz-breadcrumb-item><a [routerLink]="['../../']">Home</a></nz-breadcrumb-item><nz-breadcrumb-item>Breadcrumb</nz-breadcrumb-item></nz-breadcrumb>

前言

網址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Index?tdsourcetag=s_pctim_aiomsg

接下來很長的不斷時間我將會學習MDN索引的所有內容,我會記錄學習過程中我平時忽略又覺得很重要的知識點,有時候覺得自己基礎不太好,所以要多重復,多復習才能讓自己變得更加優秀

今天看到一遍文章,說的是類似<>到底在學習互聯網是否需要老師,雖然每個人都希望能有一個老師帶自己,但是現實也是很殘酷的,很多時候我們都是自己一個坑一個坑的去填,雖然那篇文章說的好,牛逼的人會向比他們更牛逼的人吸取技能,但是當我們身邊沒有這樣的人,也沒有能夠跟你一起談論學習,一起探討學習方法的人,但是我還是覺得人生要有追求,熱情這東西只有再該有的年齡才會有的,如果你錯過了這個時期,可能以后就沒有機會

隨著我們年紀越來越大,我們的記憶力思想積極性都變得越來越沒有意義,有時候在想,怎么讓自己的生活變得越有意思,我覺得有追求的生活是最有意思的,比如讓自己成為大牛

樹立好自己的人生方向和目標,比如反婚(不走老套路,讓自己能有更多時間的去追求自己想要的東西),還有時間這東西,還是不說吧,沒準過過幾年我會覺得自己的想法是多么的幼稚

黃金十年

Array.entries(), Array.key() ,Array.vlaues()

var arr = ["a", "b", "c"]; var iterator = arr.entries(); for (let e of iterator) {console.log(e); }// [0, "a"] // [1, "b"] // [2, "c"]let a = ['a', 'b', 'c'].keys(); for(let key of a){console.log(key); //0 ,1 ,2 }let a = ['a', 'b', 'c'].values(); for(let key of a){console.log(key); } // 'a' 'b' 'c'其實可以用 for in 拿到索引 for of 拿到值

Array.fill(value[,start[,end])

value 用來填充數組元素的值。 start 可選 起始索引，默認值為0。 end 可選 終止索引，默認值為 this.length。console.log([1, 2, 3, 4, 5, 6].fill(4,4)); // [ 1, 2, 3, 4, 4, 4 ]

filter

搜索過濾條件var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; const filterItem=query=>{return fruits.filter(value=>value.toLowerCase().indexOf(query.toLowerCase())>-1) }理解 indexOf 找到返回索引沒有找到返回-1 console.log('abc'.indexOf('bc')); //1

扁平化

var arr1 = [1, 2, [3, 4]]; console.log(arr1.reduce((a, v) => a.concat(v), []));多層 var arr1 = [1, 2, [3, 4, [3, 4, [4, 5, [7, 8, 9, [5, 6]]]]]]; const flatDeep=(arr)=>{return arr.reduce((a, v) => Array.isArray(v) ? a.concat(flatDeep(v)) : a.concat(v), []); }; console.log(flatDeep(arr1));

reduce等價map

[1,2,3,4,5].reduce((a,v)=>a.concat(v*2),[])

includes

參數 * 元素值 * 索引(可選) 從第幾個索引開始 [1,2,3].includes(2) //true [1,2,3,NaN].includes(NaN) //true 當索引大于數組長度,該數組不會搜索 當索引小于0,則整個數組都會搜索

書(深入理解javascript特性)

可計算屬性名

var grocery = {id: 'bananas',name: 'Bananas',units: 6,price: 10,currency: 'USD' }; let groceries={[grocery.id]:grocery }; console.log(groceries);//第二種情況 function getEnvelope(type, description) {return {// type:description 不行的[type]:description} }console.log(getEnvelope('sss', 'ggg'));

　方法的定義

let obj={emit(){return {name:'zhangsan',age:12}} }

擴展運算符

var list = ['a', 'b', 'c', 'd', 'e']; let {a,b,...other}=list; let [c,d,...first]=list; console.log(other);//類數組 console.log(first);//數組ES5 ES6 list.push.apply(list, items) list.push(...items)

class

class LocalStorage {constructor(key) {this.key = key}get data() {return JSON.parse(localStorage.getItem(this.key))}set data(data) {localStorage.setItem(this.key, JSON.stringify(data))} }const ls = new LocalStorage('groceries'); ls.data = ['a', 'b', 'c']; console.log(ls.data);

轉載于:https://www.cnblogs.com/fangdongdemao/p/10926872.html

總結

以上是生活随笔為你收集整理的本周学习总结(ng-zorro/MDN索引/读书笔记)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。