design-ui 大屏设计

添加相关依赖库

"vue-ruler-tool": "^1.2.4",
"@smallwei/avue": "^2.8.23",
"vuedraggable": "^2.24.1",

初始化

npm install

运行

npm run dev

打包成组件

npm run build

组件引入使用方法

import DesignUI from 'design-ui';
import 'design-ui/dist/main.css'
Vue.use(DesignUI);

Designer组件

<Designer :data ="data" @saveClick='saveClick' @viewClick='viewScreenClick' :widgetTools="widgetTools">    
  <template v-slot:widgets="slotProps">
      <component  :is="slotProps.type" :value="slotProps.value" :style="slotProps.sizeStyle" />
  </template>
</Designer>

参数说明

saveClick: (data)=>{};  保存按钮回调

viewClick: (data)=>{};  阅览按钮回调

widgetTools: Array 组件列表 
例： 
	widgetTools：[
      {
          code: 'none',
          label: '测试',
          children:[
            {
              code: 'customWidget',
              label: '自定义组件',
            }
          ]
        }
      ]

Viewer组件

<Viewer :data="data">     
  <template v-slot:widgets="slotProps">
      <component  :is="slotProps.type" :value="slotProps.value" :ispreview="slotProps.ispreview" :style="slotProps.sizeStyle" />
  </template>
</Viewer>

参数说明

data: Object ，数据格式为Designer组件保存按钮回调或阅览按钮回调的数据

完整示例

<template>
  <Designer :data ="data" @saveClick='saveClick' @viewClick='viewScreenClick' :widgetTools="widgetTools">    
     <template v-slot:widgets="slotProps">
          <component  :is="slotProps.type" :value="slotProps.value" :style="slotProps.sizeStyle" />
      </template>
  </Designer>
</template>

<script>

import Designer from 'components/designer/index';
import testWidget from './test.vue'
export default {
  name: "DesignerPage",
  components:{
    Designer,
    testWidget
  },
  data() {
    return {
      widgetTools:[
      {
          code: 'none',
          label: '测试',
          children:[
            {
              code: 'testWidget',
              label: '测试组件',
            }
          ]
        }
      ]
    };
  },
  methods: {
    //保存
    saveClick(screenData){
      console.log('saveClick screenData:',screenData)
    },
    //阅览
    viewScreenClick(screenData){
      console.log('saveClick viewScreenClick:',screenData)
    }
  }
};
</script>
<style scoped lang="scss">
</style>

效果展示