1.1 vue vue-element-ui元件 layout佈局系列學習(一) row 行概念 <el-row></el-row> col 列概念 <el-col></el-col> col元件的:span屬性的佈局調整,一共分為24欄: <el-row> <el-col :span="24"><div class="grid-content"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content"></div></el-col> </el-row> row元件的:gutter屬性來調整佈局之間的寬度---分欄間隔 <el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> </el-row> Col元件的:offset屬性調整方塊的偏移位置（每次1格/24格） <el-row :gutter="20"> <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col> </el-row> 對齊方式: row元件的type="flex"啟動flex佈局，再通過row元件的justify屬性調整排版方式，屬性值分別有: justify=center 居中對齊 justify=start 左對齊 justify=end 右對齊 justify=space-between 空格間距在中間對齊 justify=space-around 左右各佔半格空格對齊 <el-row type="flex" class="row-bg" justify="center"> <el-col :span="6"><div class="grid-content"></div></el-col> </el-row> 響應式佈局: 參考bootstrap的響應式，預設四個尺寸 xs <768px sm ≥768px md ≥992 lg ≥120 <el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col> </el-row> element-ui 的響應式柵格佈局 要注意的問題 xs sm md lg xl五個尺寸的預設值均為24，意味著，任何一個尺寸屬性不設定，則該尺寸下響應式寬度為24，這與bootstrap不同 尺寸屬性可以設為0，則該el-col不顯示 不論尺寸屬性設定為多少，若el-col中沒有任何內容則該el-col不顯示（內部元素為空也不行，如<div></div> <span></span>） 2.1Vue中使用clipboard實現複製功能 clipboard.js 是一個不需要flash，將文字複製到剪貼簿的外掛。 首先現在Vue中引入clipboard npm install clipboard --save 在需要使用的元件中import 引入clipboard import Clipboard from 'clipboard'; clipboard的實際使用 不論是單按鈕複製還是多按鈕複製，一定要在頁面載入DOM完成後先New出來具有複製功能的按鈕， 如果在函式內再New那麼可能會出現點選複製按鈕兩次，才複製成功的現象，如下： mounted() { var copybtn = document.getElementsByClassName('btn') this.clipboard = new Clipboard(copybtn); } <!--並不一定非要在mounted中也可以在其他週期內， 只要頁面已經載入完DOM即可，如果是動態生成可以使用nextTick中New。--> 繫結複製內容的方式有以下幾種： <!--第一種直接繫結在按鈕上--> <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2" @click="copy()">複製 </button> <!--第二種單個複製按鈕動態獲取需要複製的內容--> <input type="text" v-model="copyContent" id="copy_text" style="opacity: 0"> <button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">複製</button> <!--第三種可以在New Clipboard時設定要複製的內容--> new Clipboard('copyBtn',function(){ return <!--要複製的內容--> }) copy(){ let _this = this <!--如果在內部new會出現點選兩次在複製成功的現象所以還請各位多多注意--> clipboard.on('success', function () { Toast('複製成功') _this.destroy() <!--銷燬快取,然後在重新new這樣不會出現點選複製上出現之前複製的內容的情況--> _this.clipboard = new Clipboard(copyBtn); }) clipboard.on('error', function () { Toast('複製失敗，請手動複製') }) } 2.3vue中使用file-saver匯出檔案 安裝: npm install file-saver --save 語法 saveAs()從檔案儲存器匯入 import { saveAs } from 'file-saver'; FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom }) 傳遞{ autoBom: true }如果你想FileSaver.js自動提供Unicode文字編碼提示（：見位元組順序標記）。 請注意，只有在您的Blob型別已charset=utf-8設定的情況下才能執行此操作。 例子 使用儲存文字 require() var FileSaver = require('file-saver'); var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); FileSaver.saveAs(blob, "hello world.txt"); 儲存文字 var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); FileSaver.saveAs(blob, "hello world.txt"); 儲存網址 FileSaver.saveAs("https://httpbin.org/image", "image.jpg"); 在相同來源內使用URL只會使用a[download]。否則，它將首先檢查它是否支援帶有同步頭請求的cors標頭。 如果是這樣，它將下載資料並使用Blob URL儲存。如果沒有，它將嘗試使用下載它a[download]。 標準的W3C File API Blob介面並非在所有瀏覽器中都可用。 Blob.js是Blob解決此問題的跨瀏覽器實現。 儲存畫布 var canvas = document.getElementById("my-canvas"); canvas.toBlob(function(blob) { saveAs(blob, "pretty image.png"); }); 注意：標準HTML5 canvas.toBlob()方法並非在所有瀏覽器中都可用。 canvas-toBlob.js是一個跨瀏覽器canvas.toBlob()，可以對此進行填充。 儲存檔案 您可以儲存File建構函式而無需指定檔名。如果檔案本身已經包含名稱，則有很多方法可以獲取檔案例項（從儲存，檔案輸入，新建構函式，剪貼簿事件） 。如果仍要更改名稱，則可以在第二個引數中更改它。 // Note: Ie and Edge don't support the new File constructor, // so it's better to construct blobs and use saveAs(blob, filename) var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"}); FileSaver.saveAs(file); 2.4parser簡介 簡單來說就是把原始碼轉換為目的碼的工具 2.5vue中封裝svg-icon元件並使用 使用vue-cli3.0腳手架執行搭建一個專案 components檔案下新建SvgIcon元件:components/SvgIcon/index.vue 將所需svg檔案放置icons的svg資料夾下 main.js中引入icons檔案 直接在元件中使用icon-class為svg名字的圖示即可 安裝svg-sprite-loader，並且在vue.config.js檔案下配置 執行專案，顯示圖示 2.6CSS Flex彈性佈局，多個div自動換行 /* 要建立一個 flex 容器，只需要將一個 display: flex 屬性新增到一個元素上。 預設情況下，所有的直接子元素都被認為是 flex 項，並從左到右依次排列在一行中。 如果 flex 項的寬度總和大於容器，那麼 flex 項將按比例縮小，直到它們適應 flex 容器寬度 */ display: flex; /* flex-direction 決定主軸的方向 row(預設)|row-reverse|column|column-reverse*/ /* flex-direction: row; */ /* flex-wrap決定當排列不下時是否換行以及換行的方式,nowrap(預設)|wrap|wrap-reverse */ /* flex-wrap:wrap; */ /* flex-flow是lex-direction和flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。預設值為row nowrap，即橫向排列 不換行 */ flex-flow:row wrap; /* !當主軸沿水平方向時!justify-content,決定item在主軸上的對齊方式，可能的值有flex-start（預設），flex-end，center，space-between，space-around */ justify-content:center; /* !主軸水平時!決定了item在交叉軸上的對齊方式，可能的值有flex-start|flex-end|center|baseline|stretch */ align-items:center;