baozhida-hardware-development

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

pnpm install 安装 运行项目：pnpm dev

Recommended Setup

• VS Code + Vue - Official (previously Volar) and disable Vetur

• Use vue-tsc for performing the same type checking from the command line, or for generating d.ts files for SFCs.

组件库分类列表ts文件路径

• baozhida-hardware-development\src\module\classification.ts

  组件存放路径

• baozhida-hardware-development\src\components\widgets

  组件默认样式及布局样式控件基础参数

• ts文件存放路径：baozhida-hardware-development\src\module\index.ts

• 组件基本组成部分

  const example = {
  id: 1, //组件id
  type: 'Text', //组件类型同组件文件名
  name: "文字", //组件名称
  active: false, //拖动组件激活状态默认true
  displayPicture: true, //组件展示是否已图片展示,配合type使用`/src/assets/componentIcon/${type}.png` 否已组件展示
  config: {
      name: '文字', //组件文本
      isActive: false, //组件id
      type: 1, //组件id
      lineNum: null, //行数
      isResizable: true, //禁止缩放
      sticks: ['mr', 'ml'], //可拖动的边界['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl','ml']
      resizable: true, //false禁止调整大小
      aspectRatio: false, //禁止等比例缩放
      fixedWidth: true, //false固定宽度
      fixedHeight: true, //false固定高度
      dataBinding:false, //数据绑定false不需要绑定
  },
  css: {
      top: 0, //初始top
      left: 0, //初始left
      width: 100, //组件宽度
      height: 'auto', //组件高度
      fontSize: 14, //字体大小
      fontWeight: 500, //字体粗细
      textAlign: 'center', //对齐方式
      color: "rgba(61, 61, 61, 1)", //字体颜色
      directionFlag:true, //方向true为横向false为纵向
      distributeFlag:'center', //分布自左向右leftRight、居中center、自右向左rightLeft、平均分布hypodispersion、两端对齐justify
      aligningFlag: 'left',//对齐left、center、right
      intervalFlag: 0, //间隔number类型
      padding: 0, //内间距number类型
      selfAdaption: false,//自适应true开启false关闭
  },
  },
  

• 面板布局功能控制

  const btnConfig = {
  isActive: false,
  name: '功能名称',
  isResizable: true, //禁止缩放
  aspectRatio: false, //禁止等比例缩放
  resizable: true, //禁止调整大小
  fixedWidth: true, //固定宽度
  fixedHeight: true, //固定高度
  }