{"_id":"@cannonx/design-ui","_rev":"1-11333632868ec63a9d49b7f5207e7306","name":"@cannonx/design-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cannonx/design-ui","description":"大屏设计组件","version":"1.0.0","versionDoc":"发布beta命令  npm publish --tag=beta","author":{"name":"design"},"scripts":{"dev":"webpack-dev-server --progress --config build/webpack.config.dev.js","start":"npm run dev","prod":"webpack --config build/webpack.config.prod.js","build":"npm run prod","lint":"eslint --ext .js,.vue src","lint:fix":"eslint --ext .js,.vue src --fix","test:unit":"jest --config test/jest.config.js","test":"npm run lint && npm run test:unit","test:debug":"node --inspect node_modules/.bin/jest --runInBand --config test/jest.config.js","pack":"npm run prod && npm pack","init":"npm install"},"keywords":["design","bigscreen"],"private":false,"main":"./dist/design-ui.js","dependencies":{"vue-ruler-tool":"^1.2.4","@smallwei/avue":"^2.8.23","element-ui":"^2.15.3","vue-router":"^3.1.5","vuex":"^3.6.2"},"devDependencies":{"@babel/core":"^7.8.4","@babel/preset-env":"^7.8.4","@testing-library/vue":"^4.1.0","@vue/test-utils":"^1.0.0-beta.31","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.3","babel-jest":"^25.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","css-loader":"^3.4.2","eslint":"^6.8.0","eslint-config-standard":"^14.1.0","eslint-loader":"^3.0.3","eslint-plugin-import":"^2.20.1","eslint-plugin-node":"^11.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.1","eslint-plugin-vue":"^6.1.2","glob":"^7.1.7","html-webpack-plugin":"^3.2.0","jest":"^25.1.0","jest-serializer-vue":"^2.0.2","lodash.template":"^4.5.0","mini-css-extract-plugin":"^0.9.0","node-sass":"^4.14.1","sass":"^1.26.3","sass-loader":"^7.0.3","style-loader":"^1.1.3","stylus":"^0.54.7","stylus-loader":"^3.0.2","uglify-es":"^3.3.9","url-loader":"^3.0.0","vue-jest":"^3.0.5","vue-loader":"^15.8.3","vue-server-renderer":"^2.6.11","vue-style-loader":"^4.1.2","vue-template-compiler":"^2.6.11","webpack":"^4.41.5","webpack-bundle-analyzer":"^4.4.2","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2","webpack-merge":"^4.2.2","webpack-theme-color-replacer":"^1.3.7"},"gitHead":"ffb235ca782726bb0fabc1102374cc1a43da12e3","_id":"@cannonx/design-ui@1.0.0","_nodeVersion":"12.14.1","_npmVersion":"8.3.0","dist":{"integrity":"sha512-yC549ZecBXumklYSqIsyxci/8MeQrIPZavn+PmPQhGLqXiYZOq6phez9nANZnU9xm53GZEqMLE2YLsQRjIWi7Q==","shasum":"77c8b5887f625bb8f1ed3cf39d3fac4d2d441a58","tarball":"https://registry.npmjs.org/@cannonx/design-ui/-/design-ui-1.0.0.tgz","fileCount":5,"unpackedSize":145285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxd1UCRA9TVsSAnZWagAAD54P/3n2pcUUzjKJ37juLlTo\nL6MT7TzEK+NcBHW7QtfE6ajDQvTOiuC6Jl9kKmlGsPSzwaijGjmR+eWd/kHZ\nPmODtmB7pwImjc0I2GfK25fZ09miCLO3Ug3tPhnzwcZgIuG4QiVRv0bnxY4/\nyMtIIyp9j3gzLzP2bkN9FSbvaDzqP/DRo9fu8KQSvraoU2gyencqRR0CYzkV\n3gogKJUqYC1FmG7T09M2GxHrAf3DLF1yy/3yapkhXe9fBR3kVRldowrwhPui\nOAR8kQWJusLrq0ZCBC1j+ZOhWwSFLot2yMqtz6bXVM/Y6tB7xWmyotUbDnFW\n8a4UHU/ztS77uffb54kJvs4YAyXCa79n1iFbtOUQXuXDYWR72RD0GVu1queb\nFMV6YlKBY0fXJE2sicGF0hBflhdlWSJecZ3e3VYAKY1KNvPRje4WRd0pkoRW\n0UzfKY7UzUmg0UmEXvpOgbsWykMCJEy/zx9UHOoPYZ4q+49faQosrEruNu74\nehQYMraJ/T9pw94w68VVMLH488DLRI46s8+/TpI4aU4rxFBMW33iRqoGsNc7\nhYR2PBtNhENI6Fd5dKHUPJXLwmRNaksft8/11gYVaDm8Tw1qAai2qsRAeuj8\n/0g9uOYXc3hhh8Da66UKg4T0nPrQIReMmmAIOGgTFugbGjNSf/fafAfMXrHG\nPe7c\r\n=0fgV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAyQZmlty4WDSsS8vI6uwwFYmGiBfFsHo74zpkkw0EhAiBgjN5oacCJ7U7He2ORICOPF5+F3XWiIwCg6jinwCAmDw=="}]},"_npmUser":{"name":"cannon_x","email":"905133827@qq.com"},"directories":{},"maintainers":[{"name":"cannon_x","email":"905133827@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-ui_1.0.0_1640357203838_0.7236251344195728"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-24T14:46:43.791Z","1.0.0":"2021-12-24T14:46:44.007Z","modified":"2022-04-04T21:38:44.637Z"},"maintainers":[{"name":"cannon_x","email":"905133827@qq.com"}],"description":"大屏设计组件","keywords":["design","bigscreen"],"author":{"name":"design"},"readme":"# design-ui 大屏设计\n\n### 添加相关依赖库\n```\n\"vue-ruler-tool\": \"^1.2.4\",\n\"@smallwei/avue\": \"^2.8.23\",\n\"vuedraggable\": \"^2.24.1\",\n```\n### 初始化\n```\nnpm install\n```\n\n### 运行\n```\nnpm run dev\n```\n\n### 打包成组件\n```\nnpm run build\n```\n\n\n### 组件引入使用方法\n```\nimport DesignUI from 'design-ui';\nimport 'design-ui/dist/main.css'\nVue.use(DesignUI);\n```\n\n#### Designer组件\n\n```\n<Designer :data =\"data\" @saveClick='saveClick' @viewClick='viewScreenClick' :widgetTools=\"widgetTools\">    \n  <template v-slot:widgets=\"slotProps\">\n      <component  :is=\"slotProps.type\" :value=\"slotProps.value\" :style=\"slotProps.sizeStyle\" />\n  </template>\n</Designer>\n```\n##### 参数说明\n```\nsaveClick: (data)=>{};  保存按钮回调\n```\n```\nviewClick: (data)=>{};  阅览按钮回调\n```\n```\nwidgetTools: Array 组件列表 \n例： \n\twidgetTools：[\n      {\n          code: 'none',\n          label: '测试',\n          children:[\n            {\n              code: 'customWidget',\n              label: '自定义组件',\n            }\n          ]\n        }\n      ]\n```\n\n#### Viewer组件\n```\n<Viewer :data=\"data\">     \n  <template v-slot:widgets=\"slotProps\">\n      <component  :is=\"slotProps.type\" :value=\"slotProps.value\" :ispreview=\"slotProps.ispreview\" :style=\"slotProps.sizeStyle\" />\n  </template>\n</Viewer>\n```\n##### 参数说明\n```\ndata: Object ，数据格式为Designer组件保存按钮回调或阅览按钮回调的数据\n```\n\n\n#### 完整示例\n```\n<template>\n  <Designer :data =\"data\" @saveClick='saveClick' @viewClick='viewScreenClick' :widgetTools=\"widgetTools\">    \n     <template v-slot:widgets=\"slotProps\">\n          <component  :is=\"slotProps.type\" :value=\"slotProps.value\" :style=\"slotProps.sizeStyle\" />\n      </template>\n  </Designer>\n</template>\n\n<script>\n\nimport Designer from 'components/designer/index';\nimport testWidget from './test.vue'\nexport default {\n  name: \"DesignerPage\",\n  components:{\n    Designer,\n    testWidget\n  },\n  data() {\n    return {\n      widgetTools:[\n      {\n          code: 'none',\n          label: '测试',\n          children:[\n            {\n              code: 'testWidget',\n              label: '测试组件',\n            }\n          ]\n        }\n      ]\n    };\n  },\n  methods: {\n    //保存\n    saveClick(screenData){\n      console.log('saveClick screenData:',screenData)\n    },\n    //阅览\n    viewScreenClick(screenData){\n      console.log('saveClick viewScreenClick:',screenData)\n    }\n  }\n};\n</script>\n<style scoped lang=\"scss\">\n</style>\n```\n\n#### 效果展示\n![designer](https://gitee.com/cannon_x/design-ui/raw/master/doc/designer.png)\n\n![viewer](https://gitee.com/cannon_x/design-ui/raw/master/doc/viewer.png)","readmeFilename":"README.md"}