iView軟件介紹
iview是一款功能非常全面的電腦中后臺UI源碼編程工具,友善的API應用程序編程接口,幫助開發(fā)人員訪問列程更快捷,支持警告提示、全局提示、通知提醒、問題提示、氣泡提示、時間軸、樹形控件等高質(zhì)量的豐富功能,全面輔助用戶使用過程。
iView軟件功能
高質(zhì)量、功能豐富
友好的 API ,自由靈活地使用空間
細致、漂亮的 UI
事無巨細的文檔
可自定義主題
iView軟件說明
iview
執(zhí)行npm install iview --save 在項目中引入iview
引入 iView #
一般在 webpack 入口頁面 main.js 中如下配置:
import iView from 'iview'
import 'iview/dist/styles/iview.css'
//導入樣式
Vue.config.productionTip = false
Vue.use(iView)
在非 template/render 模式下(例如使用 cdn 引用時),組件名要分隔,例如 DatePicker 必須要寫成 date-picker。
以下組件,在非 template/render 模式下,需要加前綴 i-:
Button: i-button
Col: i-col
Table: i-table
Input: i-input
Form: i-form
Menu: i-menu
Select: i-select
Option: i-option
progress: i-progress
以下組件,在所有模式下,必須加前綴 i-,除非使用 iview-loader:
Switch: i-switch
Circle: i-circle
2.因為iView 的所有組件文案默認使用的是中文,通過設置可以使用其它語言。
在 Webpack 中使用 #
完整引入 iView
import Vue from 'vue';
import iView from 'iview';
import locale from 'iview/dist/locale/en-US';
3.
iView Loader
用途 #
統(tǒng)一 iView 標簽書寫規(guī)范,所有標簽都可以使用首字母大寫的形式,包括 Vue 限制的兩個標簽 Switch 和 Circle。
雖然不推薦,但通過 loader 選項配置,可以開啟所有標簽前綴的寫法了,比如 i-date-picker。
安裝 #
首先通過 npm 安裝 iview-loader
npm install iview-loader --save-dev
4.柵格
采用了24柵格系統(tǒng),將區(qū)域進行24等分
使用row在水平方向創(chuàng)建一行
將一組col插入在row中
在每個col中,鍵入自己的內(nèi)容
通過設置col的span參數(shù),指定跨越的范圍,其范圍是1到24
每個row中的col總和應該為24
水平排列的布局。
col必須放在row里面。
使用報錯:
Parsing ERROR: x-invalid-end-tag :
問題原因
iView將標簽渲染為原生html標簽時,由于這些標簽是自閉合的,所以有end標簽會報錯。
解決方案
修改配置文件,忽略該項檢查:
根目錄下 - .eslintrc.js - rules
添加一行:
'vue/no-parsing-error': [2, { "x-invalid-end-tag": false }]
重啟dev: npm run dev
組件概述 #
Layout:布局容器,其下可嵌套 headersidercontentFooter或 Layout 本身,可以放在任何父容器中。
Header:頂部布局,自帶默認樣式,其下可嵌套任何元素,只能放在 Layout 中。
Sider:側(cè)邊欄,自帶默認樣式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。
Content:內(nèi)容部分,自帶默認樣式,其下可嵌套任何元素,只能放在 Layout 中。
Footer:底部布局,自帶默認樣式,其下可嵌套任何元素,只能放在 Layout 中。
iView更新日志
1.細節(jié)更出眾!
2.BUG去無蹤
華軍小編推薦:
強烈推薦下載iView,誰用誰知道,反正小編我已經(jīng)用了。此外,快表軟件、河小象編程客戶端、自動化測試工具AutoRunner、Easy GUI、小海龜LOGO語言也是不錯的軟件,歡迎點擊下載體驗!


























您的評論需要經(jīng)過審核才能顯示
有用
有用
有用