Lin UI 是基於linui微信小程序原生語法 實現的組件庫。遵循簡潔、易用的設計規范。
【林間有風LinUI】
1.官方demo：http://face.cms.7yue.pro/
2.文檔：http://doc.cms.7yue.pro/lin/client/
3.github：https://github.com/TaleLin/lin-cms-vue
4.JWT加密composer：https://packagist.org/packages/firebase/php-jwt
前端vue代碼目錄結構：
├───public // 公共資源目錄，該目錄webpack原封打包
│ ├───icons // icon圖片存放目錄
│ │ favicon.ico // 本站favicon圖片
│ │ iconfont.css // 阿里iconfont文件
│ │ index.html // template模板
│ │ robots.txt // Robots協議
├───script // 腳本
├───src 【下邊】 │ │ babel.config.js // babel配置文件 │ .browserslistrc // 適配瀏覽器版本 │ .eslintrc.js // eslint配置文件 │ .gitignore // git上傳忽略文件
【src文件目錄】
├───assets // 靜態資源文件存放目錄 │ ├───components // 布局組件及業務基礎組件 │ │ ├───layout // layout布局組件 │ │ ├───base // 通用基礎組件庫（包含element-ui二次封裝組件） │ ├───config // config配置項 │ │ ├───stage // 路由配置文件 │ │ │ error-code.js // 與服務端約定的錯誤狀態碼 │ │ │ index.js // 前端自定義配置項 │ ├───lin // Lin CMS核心庫 │ │ ├───directives // 全局指令 │ │ ├───filter // 全局過濾器 │ │ ├───mixin // 全局mixin │ │ ├───models // model層 │ │ ├───utils // 各種工具函數 │ ├───plugins // 插件 │ ├───router // 前端路由 │ │ ├───modules // 每個業務模型的路由樹 │ │ │ home-router.js // 菜單路由 │ │ │ index.js // vue-router入口文件 │ │ │ routes.js // vue-router路由配置 │ ├───store // vuex狀態管理文件 │ ├───views // 業務組件 │ │ App.vue // vue根組件 │ │ main.js // webpack打包入口
增加左側導航eg：會員卡
①：[src]->[config]->[stage] 創建card.js 並在同級目錄index.js,
②：import cardConfig from './card' // 引入會員卡路由 cardConfig
[views]->[card]->CardList.vue
路由配置：接口地址
[src]->[lin]->[models]->user.js
登陸路由獲取token並保存
\src\plugin\custom\assets\image
修改logo
\src\component\layout\side-bar
修改左側
=================================================
1.分頁
<el-pagination
:current-page="currentPage4"
:page-sizes="[5, 10, 20, 30, 40,50,100]"
:page-size="list_rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="onChangeListRows"
@current-change="onChangePage"
/>
-----------
onChangeListRows(val) {
this.per_page = val
this.list_rows = val
this.getAvatarListData()
console.log(`每頁 ${val} 條`)
},
onChangePage(val) {
this.page = val
this.getAvatarListData()
console.log(`當前頁: ${val}`)
},
<el-table-column
prop="tag" label="分類" width="150" filter-placement="bottom-end" > <template slot-scope="scope"> <el-tag :type="scope.row.pid === '1' ? 'success' : 'primary'" disable-transitions @click="onClickStatus(scope.$index, scope.row)" >{{ scope.row.pid>0?scope.row.permission.name:'————' }} </el-tag> </template> </el-table-column>
// 判斷增加的權限
for (let i = 0; i < addAuths.length; i++) {
// eslint-disable-line
for (let j = 0; j < this.cacheAuths.length; j++) { // eslint-disable-line if (addAuths[i] === this.cacheAuths[j]) { addAuths.splice(i, 1) } } }
-----------
遍歷對象
for (let item in this.getAdminPermissionListAdmin) {
console.log(item)
}
判斷第一種寫法：
