jvs-dynamic-portal-ui

JVS动态首页插件

通过npm安装

npm install jvs-dynamic-portal-ui

全局引入样式

import 'jvs-dynamic-portal-ui/style.css' // 在入口文件中全局引入css样式

全局引入vue-grid-layout插件

import { createApp } from 'vue'
import App from './App.vue'
import VueGridLayout from 'vue-grid-layout' // 入口文件需要引入vue-grid-layout插件并注册
const app = createApp(App)
app.use(VueGridLayout)

组件引入

import { JvsDynamicGrid } from 'jvs-dynamic-portal-ui' // Grid容器
import { JvsDynamicManage } from 'jvs-dynamic-portal-ui' // 组件列表管理页
import { JvsDynamicDesign } from 'jvs-dynamic-portal-ui' // 组件设计页
// 在main.js中引入setJvsUiConfig
import { setJvsUiConfig } from 'jvs-dynamic-portal-ui' // 公共配置参数,用于设置接口参数(headers的token)
const config = {
  reqUrl: '', // 请求服务名，如：jvs-teamwork
  manageUrl: '' // 首页组件管理页面路由，必填  例：'#/setting/component'
}
setJvsUiConfig(config)
// 扩展按钮事件
const expandHandle = (obj: any) => {
  // ...
}

Grid容器组件使用

<template>
  <!-- jvs-动态组件容器, managePermission：组件管理按钮权限，值为true或false. -->
  <jvs-dynamic-grid :managePermission="managePermission" @expandHandle="expandHandle">
    <!-- 渲染自定义组件，使用组件类型作为插槽名称 -->
    <template #YourComponentType="{ item }">
      <!-- 这里放入自定义内容，item为后端返回的组件数据对象 -->
    </template>
  </jvs-dynamic-grid>
</template>

默认页设计

<template>
  <!-- jvs-默认设计页 -->
  <jvs-dynamic-default>
    <!-- 渲染自定义组件，使用组件类型作为插槽名称 -->
    <template #YourComponentType="{ item }">
      <!-- 这里放入自定义内容，item为后端返回的组件数据对象 -->
    </template>
  </jvs-dynamic-default>
</template>

组件设计页使用

<script lang="ts" setup>
interface CustomComponetType {
  type: string,  // 组件类型
  name: string, // 组件名称
  imgSrc: string, // 组件封面图
  x: number, // 组件x轴坐标
  y: number, // 组件y轴坐标
  w: number, // 组件宽度
  h: number, // 组件高度
  mockData: string // JSON字符串
}
const customComponents: CustomComponetType[] = [] // 组件菜单中的自定义组件集合
const queryComponents: string[] = [] // 传入组件类型查询条件，若数组长度大于0，则组件栏只会渲染满足该数组中类型的组件
</script>

<!-- 组件设计页 -->
<template>
  <jvs-dynamic-design :customComponents="customComponents">
    <!-- 渲染自定义组件，使用组件类型作为插槽名称 -->
    <template #YourComponentType="{ item }">
      <!-- 这里放入自定义内容，item为组件对象 -->
    </template>

    <!-- 渲染自定义组件配置项，使用 组件类型-Config 作为插槽名称 -->
    <template #YourComponentType_Config="{ item }">
      <!-- 这里放入自定义配置项，item为组件对象 -->
    </template>
  </jvs-dynamic-design>
</template>

组件列表管理页使用

<!-- 组件列表管理页 -->
<template>
  <jvs-dynamic-manage></jvs-dynamic-manage>
</template>