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

最新推荐文章于 2020-01-19 23:52:56 发布

一波又起

最新推荐文章于 2020-01-19 23:52:56 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js element-ui 文章标签： Portlet

本文链接：https://blog.youkuaiyun.com/qq_37126704/article/details/86528915

Vue.js 同时被 2 个专栏收录

8 篇文章

订阅专栏

element-ui

4 篇文章

订阅专栏

本文详细介绍了如何在oms系统中，利用Element-UI库封装一个名为Portlet的容器组件。通过分享具体的Vue源码，展示了组件的实现过程，并给出了实际运用示例，帮助开发者更好地理解和使用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>