Vue Smart Widget 使用教程

Vue Smart Widget 使用教程

项目介绍

Vue Smart Widget 是一个灵活且可扩展的内容容器组件，适用于 Vue.js 2.x 和 3.x 版本。它包括标题和正文部分，支持拖拽和调整大小，可以轻松集成到任何 Vue 项目中，提升用户体验。

项目快速启动

安装依赖

首先，你需要安装 vue-smart-widget 依赖。根据你的 Vue 版本选择合适的命令：

• Vue 2.x:

  npm install vue-smart-widget
  

• Vue 3.x:

  npm install vue-smart-widget@next
  

引入组件

接下来，在你的 Vue 项目中引入并使用 vue-smart-widget 组件。

Vue 2.x

全局引入：

import Vue from 'vue';
import VueSmartWidget from 'vue-smart-widget';

Vue.use(VueSmartWidget);

局部引入：

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

export default {
  components: {
    SmartWidget
  }
};

Vue 3.x

全局引入：

import { createApp } from 'vue';
import App from './App.vue';
import VueSmartWidget from 'vue-smart-widget';

const app = createApp(App);
app.use(VueSmartWidget);
app.mount('#app');

局部引入：

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

export default {
  components: {
    SmartWidget
  }
};

使用示例

在你的模板中使用 SmartWidget 组件：

<template>
  <div>
    <SmartWidget title="我的小部件">
      <div>这里是小部件的内容</div>
    </SmartWidget>
  </div>
</template>

应用案例和最佳实践

案例一：动态看板

使用 vue-smart-widget 创建一个动态看板，支持拖拽和调整大小：

<template>
  <div>
    <SmartWidgetGrid :layout="layout">
      <SmartWidget v-for="item in layout" :key="item.i" :title="item.title">
        <div>{{ item.content }}</div>
      </SmartWidget>
    </SmartWidgetGrid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      layout: [
        { i: 'a', x: 0, y: 0, w: 2, h: 2, title: '部件A', content: '内容A' },
        { i: 'b', x: 2, y: 0, w: 2, h: 2, title: '部件B', content: '内容B' },
        { i: 'c', x: 4, y: 0, w: 2, h: 2, title: '部件C', content: '内容C' }
      ]
    };
  }
};
</script>

案例二：可配置内容

通过后端数据动态渲染部件内容，提高代码复用性：

<template>
  <div>
    <SmartWidgetGrid :layout="layout">
      <SmartWidget v-for="item in layout" :key="item.i" :title="item.title">
        <div v-html="item.content"></div>
      </SmartWidget>
    </SmartWidgetGrid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      layout: []
    };
  },
  created() {
    // 假设从后端获取数据
    this.layout = [
      { i: 'a', x: 0, y: 0, w: 2, h: 2, title: '部件A', content: '<p>内容A</p>' },
      { i: 'b', x: 2, y: 0, w: 2, h: 2, title: '部件B', content: '<p>内容B</p>' }