简介

基于vue可视化拖拽编辑,页面生成工具。提升前端开发效率,可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。

安装教程

  • npm install:安装 node_modules 模块
  • npm run serve:运行
  • npm run build:打包
  • npm update:用于更新包到基于规范范围的最新版本

注:在新版本的npm中,默认情况下,npm install遇到冲突的peerDependencies时将失败。可使用:npm install --legacy-peer-deps

使用教程

自定义组件

创建组件

进入 src/components/componentscom 创建组件(这里以custommodule为实例)

创建组件设置

进入src/components/rightslider 创建组件设置 (这里以custommodulestyle为实例)

添加页面基础组件

进入 src/components/sliderassembly/index.vue 添加数据

实例字段注解

{
  text: '自定义模块',                // 组件简称
  type: 'demo',                     // 组件唯一值
  icon: 'icon-zidingyimokuai',      // 组件图标
  name: 'custommodule'              // 组件里的name
}

创建组件初始化数据

进入src/utils/componentProperties.js 添加组件初始化数据

实例字段注解

{
  component: 'custommodule',        // 手机组件的name
  text: '自定义模块',                // 组件文字描述
  type: 'demo',                     // 组件唯一值
  active: true,                     // 是否选中
  style: 'custommodulestyle',       // 组件设置的name
  setStyle: {                       // 组件动态数据
    text: '自定义模块',
    demo:'自定义内容',
    img:'https://img2.baidu.com/it/u=1905875968,4289754134&fm=26&fmt=auto&gp=0.jpg'
  }
}
版权声明:
1、本网站名称:帝企吧
2、本站永久网址:https://www.diqiba.com
3、本网站的文章部分内容可能来源于网络及作者投稿,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
7、本站所有资源来源于互联网,仅用于学习及参考使用,切勿用于商业用途,如产生法律纠纷本站概不负责! 8、资源除标明原创外均来自网络转载,版权归原作者所有,若侵犯到您权益请联系我们删除,我们将及时处理! 9、若您需使用非免费的软件或服务,请购买正版授权并合法使用!