CardWrapper.vue

<template>
	<div class="home-cell">
		<div class="cell-header">
			<div class="cell-header_title">
				<i></i>
				<span>{{title}}</span>
			</div>
			<div>
				<span v-if="isShowSetting" class="el-icon-setting" title="设置" @click="handleSetting"></span>
				<span v-if="isShowRefresh" ref="spanChild" class="el-icon-refresh" title="刷新" @click="handleRefresh"></span>
				<!-- <el-popover
					placement="top-start"
					width="200"
					trigger="hover"
				>
					<div>
						<div style="font-size: 12px;margin-bottom: 10px;">调整卡片宽度</div>
						<el-slider v-model="value" :step="10" show-stops @change="handleChange">
						</el-slider>
					</div>
					<span slot="reference" class="el-icon-s-operation" title="调整" style="margin-left: 5px;"></span>
				</el-popover> -->
			</div>
		</div>
		<div class="line"></div>
		<div class="cell-content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "默认标题"
    },
    isShowSetting: {
      type: Boolean,
      default: false
    },
    isShowRefresh: {
      type: Boolean,
      default: false
    },
    componentName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      value: 20
    };
  },
  methods: {
    handleSetting() {
      this.$emit("setting");
    },
    handleRefresh() {
      this.$emit("refresh");
    },
    // handleChange(val) {
    //   // 滑块不可小于20%
    //   if (val <= 20) {
    //     this.value = 20;
    //   } else {
    //     this.value = val;
    //   }
    //   this.$emit("adjust", {
    //     value: this.value,
    //     componentName: this.componentName
    //   });
    // }
  }
};
</script>

<style scoped lang="less">
.home-cell {
  background-color: #ffffff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
	padding: 10px 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.cell-header {
  // margin: 10px 20px;
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
	// border-bottom: 2px solid #f7f7f7;
}

.line {
	height: 1px;
	margin-top: 2px;
	background: #E4E4E4;
}

.cell-header_title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  i {
    height: 14px;
    width: 3px;
    background-image: linear-gradient(#4CB4FF, #6F52ED);
    display: inline-block;
    border-radius: 8px;
  }
  span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		width: 80px;
		height: 25px;
		overflow-wrap: break-word;
		color: rgba(24, 31, 44, 1);
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 25px;
		margin-left: 8px;
  }
}
.cell-header [class^="el-icon-"] {
  font-weight: bold;
  cursor: pointer;
  color: #8e8e8e;
  /* color: #95979b; */
}
.cell-header .el-icon-more {
  color: #95979b;
}
.cell-header [class^="el-icon-"]:hover {
  color: #000;
}
.cell-header /deep/ .el-icon-more {
  transform: rotate(90deg);
}
.cell-content {
	width: 100%;
  height: calc(100% - 25px);
  overflow: auto;
}
</style>