Vue Smart Widget(智能小部件)
made with Vuejs

Vue Smart Widget(智能小部件)是一个灵活可扩展的内容容器组件，包括标题和正文部分。其中正文包括编辑框、内容，页脚。

与grid配合使用，还支持基于vue-grid-layout的可拖动和可调整大小的网格布局。

安装

Npm

npm i vue-smart-widget

Yarn

yarn add vue-smart-widget

用法

导入组件

import VueSmartWidget from 'vue-smart-widget'
Vue.use(VueSmartWidget)

仅使用小部件

import Vue from 'vue'
import { SmartWidget } from 'vue-smart-widget'

Vue.component('SmartWidget', SmartWidget)

HTML

<smart-widget title="Default Widget">
  <p>
    It's default widget.
  </p>
</smart-widget>

与grid一起使用

Script

new Vue({
  data () {
    return {
      layout: [
        { x: 0, y: 0, w: 4, h: 4, i: '0' },
        { x: 4, y: 0, w: 4, h: 4, i: '1' },
        { x: 8, y: 0, w: 4, h: 4, i: '2' }
      ]
    }
  }
})

HTML

<smart-widget-grid :layout="layout">
  <smart-widget slot="0" simple>
    <div class="layout-center">
      <h3>Simple Widget Without Header</h3>
    </div>
  </smart-widget>
  <smart-widget slot="1" title="Default Widget">
    <div class="layout-center">
      <h3>Default Widget With Header</h3>
    </div>
  </smart-widget>
  <smart-widget slot="2" title="Full Screen" fullscreen>
    <div class="layout-center">
      <h3>Make any widget full screen</h3>
    </div>
  </smart-widget>
</smart-widget-grid>

可用的props

// 小部件的唯一标识符
slot: 0,
// 小部件标题
title: String,
// 副标题
subTitle: String,
// 设置 `widget-body__content` 填充样式
padding: { type: [Number, Array], default: () => [12, 20] },
// 切换小部件模式
simple: { type: Boolean, default: false },
// 显示快速Masktoggle加载掩码
loading: { type: Boolean, default: false },
// 切换全屏按钮
fullscreen: { type: Boolean, default: false },
// 切换折叠按钮
collapse: { type: Boolean, default: false },
// 切换刷新按钮
refresh: { type: Boolean, default: false },
// 切换 `widget-body__content` 固定高度
fixedHeight: { type: Boolean, default: false },
// 何时显示卡片阴影
shadow: { type: String, default: 'always' },
// 卡片翻页风格
translateY: { type: Number, default: 0 }

SmartWidget Props

SmartWidget 方法

SmartWidget中的CSS选择器

示例