页面折叠布局:(折叠按钮、transition动画、git项目池模块分支)

布局组件(template):
<el-container>
<el-aside>
<!-- some custom component -->
</el-aside>
<el-main>
<!-- 折叠按钮放在这里 -->
<!-- some custom component -->
</el-main>
</el-container>

template内折叠按钮:

<span class="theme-icon jr-mix-fold-button" @click="changeFold">
<i class="icon-fold-btn-bg-1"></i>
<i class="icon-add23" :class="{'icon-add24': fold}"></i>
</span>

template所有内容:

<el-container>
<el-aside class="jr-layout transition" :width="asideWidth">
<!-- some custom component -->
</el-aside>
<el-main class="jr-layout" style="padding: 40px">
<span class="theme-icon jr-mix-fold-button" @click="changeFold">
<i class="icon-fold-btn-bg-1"></i>
<i class="icon-add23" :class="{'icon-add24': fold}"></i>
</span>
<!-- some custom component -->
</el-main>
</el-container>
折叠按钮:
<span class="theme-icon jr-mix-fold-button" @click="changeFold">
<i class="icon-fold-btn-bg-1"></i>
<i class="icon-add23" :class="{'icon-add24': fold}"></i>
</span>
组件行为(script):
data() {
return {
fold: false, // 折叠按钮,默认false,表展开
}
},
computed: {
asideWidth() { // 折叠后el-aside组件宽度,默认展开,页面宽度占比25%
return this.fold ? '0' : '25%'
}
},
methods: {
changeFold() {
this.fold = !this.fold;
}
},

配图:

// ----- end  -

// ----- 20190326 @ziChin update -

表单筛选样式(table页面上方的筛选组合)

标签嵌套:
el-row.jr-form-filter
> el-form[label-width="100px" size="small" label-position="right"]
> el-col[:xs="12" :sm="8" :md="6"]
> el-form-item[:label="$t('filter.industry') + ':'"]
> el-input || el-select
jr-vue.css样式:
 // 表单筛选样式:table页面上方的筛选组合
.jr-form-filter { // 表单筛选样式
white-space: nowrap;
@border-color: #C0C5C8;
@border-inner-color: #E5E7E8;
.el-form-item {
border: 1px solid @border-color;
margin-left: -1px;
border-left-color: @border-inner-color;
input {
background-color: transparent;
&,
&:hover,
&:focus {
border-color: transparent;
}
}
.el-input.is-focus input {
border-color: transparent;
}
}
.el-col:first-child {
.el-form-item {
border-left-color: @border-color;
}
}
}

vue文件写法:

<el-row class="jr-form-filter">
<el-form status-icon ref="editForm" label-width="100px" size="small" label-position="right">
<el-col :xs="12" :sm="8" :md="6">
<el-form-item :label="$t('filter.industry') + ':'">
<el-input
type="text"
:value="currentIndustry.industryCnname"
placeholder="请选择行业"
:readonly="false"
clearable
@focus="handleOpenSelectInudstry"
@clear="clearSelectIndustry"
></el-input>
</el-form-item>
</el-col> <el-col :xs="12" :sm="8" :md="6">
<el-form-item :label="$t('filter.rounds') + ':'">
<el-select
v-model="currentRounds"
@change="search(0)"
placeholder="请选择"
>
<el-option v-for="item in rounds" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
</el-col> <el-col :xs="12" :sm="8" :md="6">
<el-form-item :label="$t('filter.location') + ':'">
<el-input
type="text"
:value="currentLocation.name"
placeholder="请选择地区"
:readonly="false"
@focus="handleOpenSelectArea"
clearable
@clear="clearArea"
></el-input>
</el-form-item>
</el-col> <el-col :xs="12" :sm="8" :md="6">
<el-form-item :label="$t('filter.status') + ':'">
<el-select
v-model="currentPoolStatus"
@change="search(0)"
placeholder="请选择">
<el-option
v-for="item in poolStatus"
:key="item.itemCode"
:label="systemLang == 'cn'? item.itemNameCn : item.itemNameEn"
:value="item.itemCode"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
栗子图片:

// ----- end  -

// ----- 20190318 @ziChin update -

header标签内搜索搜索框样式

vue文件写法:
<el-row :gutter="10" style="margin-bottom: 20px">
<el-col :span="12">
<el-input
:placeholder="this.$t('pleaseInput')"
@keyup.native.enter="search"
@blur.native="search"
v-model="keyword"
size="small"
prefix-icon="el-icon-search"
></el-input>
</el-col>
<el-col :span="6">
<el-button @click="search" size="small" type="primary">{{$t("search")}}</el-button>
</el-col>
<el-col :span="6">
<span class="el-icon-group">
<el-tooltip class="item" effect="dark" :content="$t('add')" placement="bottom">
<i class="jr-icon-plus" @click="startAdd"></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="$t('del')" placement="bottom">
<i class="jr-icon-delete" @click="deleteAll"></i>
</el-tooltip>
</span>
</el-col>
</el-row>
栗子配图:

// ----- end  -

// ----- 20190318 @ziChin update -

公司4:JrVue主题定制-2的更多相关文章

  1. 公司4:JrVue主题定制

    JrVue是我们基于element重新封装的一套组件库;  具体组件使用方法可以mnote->研发小组查看; 这里我们定制了一套主题色, 具体变动如下: 1.主题色变动: mfront有蓝.紫. ...

  2. 提升组件库通用能力 - NutUI 在线主题定制功能探索

    开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 AP ...

  3. 车载导航应用中基于Sketch UI主题定制方案的实现

    1.导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件等) 其实,针对不同的主题定制实 ...

  4. Visual Studio中的主题定制变得更加容易

    有时Visual Studio的默认主题是不够的.幸运的是,我们刚刚重新设计了创建和导入自定义主题的过程. 导入主题的唯一方法之一是下载旧的Color Theme Editor扩展.如果你足够勇敢地创 ...

  5. elementUI——主题定制

    需求: 设计三套主题色+部分图标更换: 实现方式汇总: 1.传统做法,生成多套css主题包,切换link引入路径切换href实现,参考网站:http://jui.org/: <link id=& ...

  6. 公司6:JrVue重用布局

    JrVue是我们基于element重新封装的一套组件库;  为了提高开发效率, 方便对代码的统一管理和维护,  我们提供了一些统一的页面布局, 以及项目常用的中小型模块 我在master新拉一个分支J ...

  7. 标准产品+定制开发:专注打造企业OA、智慧政务云平台——山东森普软件,交付率最高的技术型软件公司

    一.公司简介山东森普信息技术有限公司(以下简称森普软件)是一家专门致力于移动互联网产品.企业管理软件定制开发的技术型企业.公司总部设在全国五大软件园之一的济南齐鲁软件园.森普SimPro是由Simpl ...

  8. wordpress 主题开发

    https://yusi123.com/3205.html https://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tut ...

  9. 决定如何开发你的WordPress主题框架

    在本系列教程的第一部分,我介绍了不同类型的主题框架并解释了它们是如何工作的. 在你开始建立你的主题框架之前,你需要考虑它是如何工作的,以及它将会被用来做什么,这样你才能从一开始就找到最合适的开发途径. ...

随机推荐

  1. BNUOJ 3278 Candies

    Candies Time Limit: 1500ms Memory Limit: 131072KB This problem will be judged on PKU. Original ID: 3 ...

  2. [NOIP2007] 提高组 洛谷P1099 树网的核

    题目描述 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边到有正整数的权,我们称T为树网(treebetwork),其中V,E分别表示结点与边的集合,W表示各边长度的集合,并 ...

  3. 【HDOJ6118】度度熊的交易计划(费用流)

    题意: 度度熊参与了喵哈哈村的商业大会,但是这次商业大会遇到了一个难题: 喵哈哈村以及周围的村庄可以看做是一共由n个片区,m条公路组成的地区. 由于生产能力的区别,第i个片区能够花费a[i]元生产1个 ...

  4. Linux下汇编语言学习笔记54 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  5. UVA 1025_A Spy in the Metro

    [题意](小紫书)一个人从站台1出发,乘车要在时刻T到达站台n,为使在站台等车时间最短,她可以选择乘坐两个方向的列车,并在客车停靠站的时候换车. [分析]每次停站下车时,她都有三种选择,1.原地不动 ...

  6. javascript 閉包

    這兩種寫法都是可以的. 第一種: function a(){ var m=[]; for(var i=1; i<10; i++){ (function(i){ function b(){ con ...

  7. Java实现二叉排序树的插入、查找、删除

    import java.util.Random; /** * 二叉排序树(又称二叉查找树) * (1)能够是一颗空树 * (2)若左子树不空,则左子树上全部的结点的值均小于她的根节点的值 * (3)若 ...

  8. Struts2 整合jQuery实现Ajax功能(1)

    技术领域非常多东西流行,自然有流行的道理.这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明白个概念: jQuery是什么:是使用javascript语言开发的,用 ...

  9. S5P4418裸机开发系列教程--源代码下载

    S5P4418裸机系列教程之stdio S5P4418裸机系列教程之shell命令行 S5P4418裸机系列教程之串口回显 S5P4418裸机系列教程之复位測试 S5P4418裸机系列教程之led跑马 ...

  10. union关键字及大小端模式

    1. union 关键字 union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在 union 中所有的数据成员共用一个空间,同一时间只能储存其中一个数据成员,所有 ...