Q-Card 自适应卡片

用于布局 Main 主界面自适应布局，不会造成页面一直往下拖动。

基础用法

支持设置 height ( Number / String )、width ( Number / String )。

测试

<template>
  <Q-Card :height="100" :width="'100px'">测试</Q-Card>
</template>

Expand Copy Copy

属性透传

提示

支持 v-bind="$attrs" 和 v-on="$listeners" 透传。

支持全局设置标题 QUiVue2.QCard.props.showTitle.default = process.env.VUE_APP_SHOW_TITLE === 'true'

Q-Card基于El-Card (opens new window) 封装，所以你可以传入El-Card (opens new window)的所有属性和事件。

注意： body-style 只能适用于盒子高度，不是整个卡片高度。

测试

<template>
  <Q-Card :height="200"
          header="事件列表"
          shadow="hover"
          body-style="background: #eee">测试
  </Q-Card>
</template>

Expand Copy Copy

带标题和按钮

卡片名称

<template>
  <Q-Card :height="150" shadow="never">
    <div slot="header">
      <span>卡片名称</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
  </Q-Card>
</template>

Expand Copy Copy

自适应高度

获取浏览器窗口高度，当浏览器高度改变则会进行相应改变。

TIP

   // 获取高度
getCardHeight(value)
{
    this.tableHeight = value
        - (this.$refs.queryForm?.$el?.clientHeight || 0)
        - (this.$refs.btn?.$el?.clientHeight || 0)
        - 75
}

卡片名称

测试

<template>
  <Q-Card @getHeight="getHeight" ref="card">
    <div slot="header">
      <span>卡片名称</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    测试
  </Q-Card>
</template>

<script>
  export default {
    methods: {
      getHeight(height) {
        // 添加自己逻辑
        console.log("getHeight==>", height)
        /**
         *  this.tableHeight = value - this.$refs.queryForm?.$el?.clientHeight
         - this.$refs.btn?.$el?.clientHeight - 75 - (this.$refs.card?.$slots.header ? 60 : 0)
         */
      }
    }
  }
</script>

Expand Copy Copy

Attributes

WARNING

isClass 为 true

/* is-card true*/
.app-container-m10 {
    margin: 10px;
    border-radius: 10px;
}

/* is-card false*/
.app-container-p20 {
    padding: 20px;
}

titleProps 配置

titleProps:{
    icon:$route.meta.icon, 
    title:$route.meta.title
}

属性名	说明	类型	可选值	默认值
width	卡片宽度	String / Number	—	—
height	卡片高度	String / Number	—	—
mustHeight	卡片去除高度	Number	—	105
extraHeight	滚动条去除高度	Number	—	20
isClass	布局样式	Boolean	true / false	true
isCard	是否卡片布局	Boolean	true / false	true
isScroll	是否内容滚动	Boolean	true / false	false
showTitle	显示QTitle	Boolean	true / false	false
isUse	是否开启自适应高度 (目前无效属性)	Boolean	true / false	false
customStyle	卡片样式	Object	—	—
titleProps	标题配置	Object	—	—

Events

事件名	说明	回调参数	参数说明
getHeight	获取卡片高度的事件	height	高度

Slots

属性名	说明
header	卡片头部
inner	titleProps有时候内部插槽
default	默认