oms之_____基于element-ui封装容器组件Portlet 及其运用

src/components/Portlet.vue

直接上代码：

<style lang="scss">.portlet {.el-card__header {padding-top: 5px;padding-bottom: 5px;}.header {line-height: 40px;.title-text {font-size: 16px;}}}
</style>
<template><el-card class="portlet"><div v-if="title || $slots.tools || $slots.header" slot="header" class="clearfix header"><slot name="header"><div class="pull-left title-text"><span>{{ title }}</span></div></slot><div v-if="$slots.tools" class="pull-right"><slot name="tools"></slot></div></div><slot></slot></el-card>
</template>
<script>
export default {name: 'BasePortlet',props: {title: {type: String,default: ''}}
}
</script>

运用举例：

<template><div class="row"><div class="col-xs-12">
<Portlet title="结算方式"><el-button slot="tools" @click.prevent="submit" type="primary">{{ isClearEditing ? '保存' : '修改' }}</el-button><el-form v-if="isClearEditing" class="el-form-col" inline :model="model" label-position="right" ref="elForm"label-width="100px"><el-row></el-row></el-form><el-form v-if="!isClearEditing" inline label-position="left"> </el-form>
</Portlet></div></div>
</template>

oms之_____基于element-ui封装容器组件Portlet 及其运用相关推荐

基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
vue2 - 基于Element UI实现上传Excel表单数据功能
一.项目场景批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据二.实现功能展示点击导入excel ...
axure element ui素材_【Axure分享】基于Element UI的Axure Web组件
有一段时间没做过产品原型了,前一阵有一个web产品需要做原型,正好在搞前端,于是顺便把Element UI移植到Axure上,基本上实现了大部分的功能组件,部分过于繁琐的组件未实现. 自己觉得蛮满意的 ...

oms之_____基于element-ui封装容器组件Portlet 及其运用

oms之_____基于element-ui封装容器组件Portlet 及其运用相关推荐

最新文章

热门文章