Lin UI 是基于微信小程序原生语法 实现的组件库。遵循简洁、易用的设计规范。

时间:2024-03-10 19:54:23

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)
}



 

 

判断第一种写法: