[TOC] # Vuep 組件庫 組件是構成插件的基礎組件，這些組件提供常用的布局。 ## Box Box 組件，聲明一個div容器，提供快速布局。 **屬性** - type 包含 [group,box,image,layer] 可以自定義type。需要自行解析 - width 資源寬度。如果需要水平居中，此值必填，例：200、200px、20em... - height 資源高度。如果需要垂直居中，此值必填,例：同上 - x 資源的相對x坐標,相當于 left 例：同上 - y 資源的相對y坐標,相當于 top 例：同上 - r 資源距離畫布右側的值，相當于box的right值 例：同上 - b 資源距離畫布底部的值 相當于box的bottom值 例：同上 - z 圖層的優先級(z-index)，默認為優先級疊加 - center 居中方式，可選（x,y,xy） - position 的值,圖層默認以absolute定位，['absolute','static','fixed','relative'] - opacity 當前層的透明度 - ani css3動畫 同 animation - bg 背景 - bgMode string 背景的填充方式[repeat,round,space,repeat-x,repeat-y,cover,contain,background] - [廢棄]src 當前層的綁定資源，可用作背景圖片處理 - [廢棄] mode 層的解析定位方式 **實例** ```html <div id="app" v-cloak> <!-- box支持嵌套 --> <box width="640" height="1008" bg="url(../assets/texture.jpg)"> <!-- 定義一個普通盒子 --> <box width="200" height="200" x="30" y="30" bg="#ccc"> width="200"<br>height="200"<br>x="30"<br>y="30" </box> <box width="30" height="30" r="30" y="30" bg="#ccc"> width="200"<br>height="200"<br>x="30"<br>y="30" </box> <!-- 定義一個水平居中的盒子 --> <box width="200" height="200" y="60" center="x" bg="#ccc"> width="200"<br>height="200"<br>y="60"<br>center="x" </box> <!-- 定義一個垂直居中的盒子 --> <box width="200" height="200" center="y" bg="#ccc"> width="200"<br>height="200"<br>center="y" </box> <!-- 定義一個完全居中的盒子 --> <box width="200" height="200" center="xy" bg="#ccc"> width="200"<br>height="200"<br>center="xy" </box> <!-- 右下角的盒子 --> <box width="200" height="200" r="0" b="0" bg="#ccc"> width="200" height="200" r="0" b="0" </box> <box width="200" b="0" center="x" bg="#ccc"> width="200" b="0" center="x" </box> </box> </div> ``` ## Grouper Grouper組件創建一個分組，內部的組件都是相對此組件的位置布局 **屬性** - 基礎屬性繼承box - layer [string] 可以使用資源聲明組件（主要為ps導出的分組配置） **示例** ```html <Grouper layer="bottomBtns" center="xy"> <Imager /> <Imager /> <Grouper> ``` ## Imager 圖片組件，可從資源庫中加載已經被load的圖片，或者直接設置圖片的src **屬性** - 基礎屬性繼承 box 組件 - src [可選] 圖片路徑 - layer [圖層名稱] resource 中的別名 - alt 圖片的alt屬性 - bgMode [boolean,string] boolean 時表示資源圖片是否為背景。string時同box的bgmode屬性 ** 示例 ** ```html <!-- 引用一張本地的資源圖片，水平居中顯示 --> <imager src="share.jpg" center="x"></imager> <!-- 使用一張圖片作為輸入框的背景 --> <imager src="bg.jpg" width="200" height="200" bg-mode> <input type="text" /> </imager> <!-- 引用一張psd中的切片 --> <imager layer="share_btn" @click.native="todo"></imager> <!-- 引用一張psd中的切片，并覆蓋默認屬性 --> <imager layer="share_btn" @click.native="todo" :y="1008-20"></imager> ``` ## Row Row 行組件，提供常用布局方案 **屬性** - gutter 組件兩邊的留白(注意：這個單位是相對于設計稿的單位，最后會轉換為rem) - direction `flex-direction` 的種類，目前包含[reverse,column,reverse] - justify `justify-content` 可選[start,center,end,around,between] - align `align-items` 可選 [top,middle,down,stretch,baseline] **示例** 通常是配合column一起使用，參考column組件 ## Column Column 列，列模型將一行分為24份。 **屬性** - `span` 當前列所占寬度 - `offset` 向左移動的寬度 - [廢棄] `pull` 向左推的寬度 ```html <div id="app" v-cloak> <row> <column><span>1</span></column> <column><span>2</span></column> </row> <row :gutter="30"> <column><span>1</span></column> <column><span>2</span></column> </row> <row> <column :span="1"><span>1</span></column> <column :span="2"><span>2</span></column> <column span="3"><span>3</span></column> <column span="4"><span>4</span></column> <column span="5"><span>5</span></column> <column span="6"><span>6</span></column> </row> <row> <column :span="8" offset="3"><span>span8 offset3</span></column> </row> <row> <column :span="6" offset="1"><span>1</span></column> </row> </div> ``` ## MovieClip 影片剪輯，可以通過影片剪輯播放序列幀動畫。 **屬性** - source 已經處理好了等距分隔的圖片素材路徑。 - width 幀動畫所占寬度 - height 幀動畫所占高度 - frame 動畫幀數 - paused 是否暫停 - vertical 默認為橫向平鋪，素材是否為縱向平鋪 **實例** ```html <!-- 動畫放在一個box中--> <box center="x" y="20"> <movie-clip width="75" height="90" frame="80" fps="60" source="../assets/movieClip1.png"></movie-clip> </box> <!-- 帶有暫停功能 --> <movie-clip :paused="movieClipPause" width="230" height="202" frame="46" fps="30" source="../assets/movieClip3.png" @click.native="movieClipPause=!movieClipPause"></movie-clip> <!-- 垂直的動畫素材 --> <movie-clip width="640" height="1008" frame="20" fps="24" source="../assets/gifs.png" :vertical="true"></movie-clip> ``` ## ScrollView 一個慣性滾動插件，提供更加柔和的滾動方式 **屬性** - width: `滾動容器寬度` - height: `滾動容器高度` - startX: `0` 開始的X軸位置 - startY: `0` 開始的Y軸位置 - horizontal 'true' 滾動方向為 X 軸 - threshold: `5` - momentum: `true` 當快速滑動時是否開啟滑動慣性 - bounce: `true` 是否啟用回彈動畫效果 - [廢棄] scrollY: `true` 滾動方向為 Y 軸 - [廢棄] scrollX: 'true' 滾動方向為 X 軸 - [廢棄]click: `true` 是否派發click事件 - [廢棄]reachBottom 底部適合你拉閾值，設置此值可接受底部的上拉事件，會觸發onReachBottom 事件，一般用于加載更多 - [廢棄]reachTop 向上滑動閥值，設置此值可接受到頂部的下拉事件，會觸發 onReachTop 事件，一般用于刷新當前數據 - [廢棄]selectedIndex: `0` wheel 為 true 時有效，表示被選中的 wheel 索引 - [廢棄]rotate: `25` wheel 為 true 時有效，表示被選中的 wheel 每一層的旋轉角度 - [廢棄]wheel: `false` 該屬性是給 picker 組件使用的，普通的列表滾動不需要配置 **事件** - `on-before-scroll-start` 滾動開始之前觸發 - `on-scroll-start` 滾動開始時觸發 - `on-scroll-cancel` 取消滾動時觸發 - `on-scroll` 滾動時觸發 - `on-scroll-end` 滾動結束時觸發 - `on-refresh` 當 better-scroll 刷新時觸發 - `on-destroy`銷毀 better-scroll 實例時觸發 **示例** ```html <div id="app" v-cloak> <!-- 高度300px的滾動區域 --> <Scroll-View height="300px" @on-scroll="onScroll" @on-reach-top="onReachTop"> <ul class="list-wrapper"> <li v-for="n in lists" class="list-item"><span>{{ n }}</span></li> </ul> </Scroll-View> <Scroll-View width="1680px" horizontal> <ul class="list-btn"> <li v-for="n in lists" class="list-item"><span>{{ n }}</span></li> </ul> </Scroll-View> </div> ``` ## Swiper 翻頁根容器，所有的頁面組件的根組件,此頁面對當前組內的所有page進行基本配置設置 **屬性** - v-model 可以雙向綁定值到此組件，model的值為page的name值。 - path [string] '' 圖層圖片資源的根目錄 - layout [string] html 布局方式[html,canvas,webgl] 目前只支持html - base [number] 16 在psd中的根字體大小，即rem單位 1rem = html.fontSize - width [number] 640 設計稿寬度 - height [number] 1008 設計稿高度 - perspective [number,string] 1200 3d透視距離，page切換3d效果可能需要 **事件** - ready 加載完成事件 - progress 進度事件 **示例** ```html <swiper v-model="page" path="assets/images/" @progress="onProgress" @ready="onReady"></swiper> ``` ## Page 翻頁頁面組件 **屬性** - name 頁面名稱，用于實現跳轉 - bg 當前頁面背景。 1. 優先查找使用resource中的資源 2. 判斷當前背景是否為圖片 xxx.jpg 或者 url(xxx.jpg) 3. 直接使用background屬性填充圖片區域 (#ccc => background:#ccc) - enter 進場效果 - leave 出場效果 **事件** - rotate - pinch - swipe（包含方向信息 up,down,left,right，如swipeLeft） - tap - doubleTap - longTap - singleTap - pressmove **示例** ```html <Page name="scene1" :enter="enterEffect" :leave="leaveEffect" @swipeUp="nextPage('scene2')" bg="backgroundtest"> </Page> ``` ## 指令 ### v-finger 定義某個組件的擴展事件 **示例** ```html <imager layer="startbtn" v-finger:pinch="onPinch"></imager> <imager layer="startbtn" v-finger:swipe.page1="doSomeThing"></imager> ```