操作栏中操作过多变为下拉框

封装插件

<template>
  <div class="as-more-operate" v-if="$slots.default">
    <el-popover
      placement="bottom"
      ref="morePopover"
      popper-class="more-popover"
      :visible-arrow="false"
      trigger="hover">
      <slot/>
    </el-popover>
    <el-button type="text" v-popover:morePopover>{{title}}<i class="el-icon-arrow-down el-icon--right" style="margin-left: 2px;"></i></el-button>
  </div>
</template>

<script>
  export default {
    name: 'as-more-operate',
    props: {
      title: {
        type: String,
        default: '更多'
      }
    }
  }
</script>

<style lang="less">
  .as-more-operate {
    display: inline-block;
    margin-left: 1px;
  }
  .more-popover {
    width: 80px;
    min-width: 0;
    padding: 0;
    border-radius: initial;
    box-shadow: initial;
    .el-button {
      width: 100%;
      margin-left: 0;
      padding: 10px 0;
      &:hover {
        background-color: #ecf5ff;
      }
    }
  }
</style>

 

引入使用

import AsMoreOperate from '../../components/as-more-operate'

components: {
    AsMoreOperate
  },

            <as-more-operate>
　　　　　　　　　　<el-button></el-button> 
　　　　　　　　　　<el-button></el-button>
　　　　　　　　　　......

　　　　　　  </as-more-operate>

 

 

 

 

 

 
posted @ 2022-08-18 13:34  快了星球  阅读(33)  评论(0)    收藏  举报