devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

可视化elementUI一键生成代码，拖拽自动布局_前端拖拽自动生成代码

作者：菜鸟追梦旅行 | 2024-04-26 09:39:10

赞

踩

前端拖拽自动生成代码

 

体验地址：https://we7.diyhey.com/admin/tabledataicon-default.png?t=N7T8https://we7.diyhey.com/admin/tabledata

1.可视化网页设计布局，前端拖拽自动布局，一键拖拽网页整体结构，以下容器快速拖拽到设计页面，

2.可视化拖拽表格，快速自定义设计

 

 3.表单一键直接拖拽

 快速查看到代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  7.     <title>可视化PC端网页设计</title>
  8.     <link rel="stylesheet" href="./colorui/main.css">
  9.     <link rel="stylesheet" href="./colorui/icon.css">
  10.     <link rel="stylesheet" href="./colorui/animation.css">
  11.     <link rel="stylesheet" href="./css/swiper.css">
  12.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  13.  
  14.     <script src="./js/swiper.js"></script>
  15.     <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
  16.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  17. </head>
  18.  
  19. <body>
  20.  
  21.  
  22.     <div id="app">
  23.         <div class="pageconfig">
  24.             <!--vuetop-->
  25.  
  26.             <!--表单form0的布局样式-->
  27.             <el-form ref="form" label-position="" :model="form68001" class=" commoncss68001   ">
  28.                 <!--表单输入框0的布局样式-->
  29.                 <div class="  commoncss66380   ">
  30.                     <el-form-item label="活动标题">
  31.                         <el-input clearable v-model="elinput66380" type="" prefix-icon="" size="large" placeholder="请输入提示信息"></el-input>
  32.                     </el-form-item>
  33.                 </div>
  34.                 <!--表单单选1的布局样式-->
  35.                 <div class="  commoncss94930   ">
  36.                     <el-form-item label="特殊资源">
  37.                         <el-radio-group v-model="radio94930">
  38.                             <el-radio v-for="(item,index) in label94930List" :key="index" :label="item.value">{{ item.name }}</el-radio>
  39.                         </el-radio-group>
  40.                     </el-form-item>
  41.                 </div>
  42.                 <!--表单Switch开关2的布局样式-->
  43.                 <div class="  commoncss64718   ">
  44.                     <el-form-item label="即时配送">
  45.                         <el-switch v-model="elinput64718" active-color="" inactive-color="" active-text="" inactive-text="">
  46.                         </el-switch>
  47.                     </el-form-item>
  48.                 </div>
  49.                 <!--表单输入框3的布局样式-->
  50.                 <div class="  commoncss91867   ">
  51.                     <el-form-item label="活动描述">
  52.                         <el-input clearable v-model="elinput91867" type="textarea" prefix-icon="" size="large" placeholder="请输入描述"></el-input>
  53.                     </el-form-item>
  54.                 </div>
  55.                 <!--表单复选4的布局样式-->
  56.                 <div class="  commoncss39534   ">
  57.                     <el-form-item label="活动性质">
  58.                         <el-checkbox-group v-model="checkbox39534">
  59.                             <el-checkbox v-for="(item,index) in label39534List" :key="index" :label="item.value">{{ item.name }}</el-checkbox>
  60.                         </el-checkbox-group>
  61.                     </el-form-item>
  62.                 </div>
  63.                 <!--Row/col栅格分栏布局5的布局样式-->
  64.                 <div class="  commoncss25805   ">
  65.                     <el-row type="flex" justify="start" :gutter="0">
  66.                         <el-col :span="4">
  67.                             <!--按钮0的布局样式-->
  68.                             <div class="  commoncss2422   ">
  69.                                 <el-button icon="" type="primary" size="small">提交</el-button>
  70.                             </div>
  71.                         </el-col>
  72.                         <el-col :span="4">
  73.                             <!--按钮0的布局样式-->
  74.                             <div class="  commoncss17292   ">
  75.                                 <el-button icon="" type="info" size="small">重置</el-button>
  76.                             </div>
  77.                         </el-col>
  78.                     </el-row>
  79.                 </div>
  80.             </el-form>
  81.  
  82.  
  83.             <!--vuebottom-->
  84.  
  85.         </div>
  86.     </div>
  87.  
  88.     <script>
  89.         new Vue({
  90.             el: '#app',
  91.             data: {
  92.                 elinput66380: '',
  93.                 /**single**/
  94.                 radio94930: 0,
  95.                 /**single**/
  96.                 elinput64718: 2,
  97.                 /**single**/
  98.                 elinput91867: '',
  99.                 /**single**/
  100.                 checkbox39534: [],
  101.                 /**single**/
  102.                 form68001: {},
  103.                 /**single**/
  104.  
  105.                 label94930List: [{
  106.                     "name": "线上品牌商赞助",
  107.                     "choose": "0",
  108.                     "value": "2"
  109.                 }, {
  110.                     "name": "线下场地免费",
  111.                     "choose": "0",
  112.                     "value": "3"
  113.                 }],
  114.                 /**vuejs**/
  115.                 label39534List: [{
  116.                     "name": "美食\/餐厅线上活动",
  117.                     "choose": "1",
  118.                     "value": "1"
  119.                 }, {
  120.                     "name": "地推活动",
  121.                     "choose": "0",
  122.                     "value": "2"
  123.                 }, {
  124.                     "name": "线下主题活动",
  125.                     "choose": "0",
  126.                     "value": "3"
  127.                 }],
  128.                 /**vuejs**/
  129.  
  130.  
  131.                 optionData: {}
  132.             },
  133.             mounted() {
  134.  
  135.             },
  136.             methods: {
  137.                 /**
  138.                  *          $vuetag = "";
  139.                  *          $vuecss = "";
  140.                  *          $vuejs = "";
  141.                  *
  142.                  */
  143.  
  144.                 handleChange64718(e) {
  145.  
  146.                     this.elinput64718 = e
  147.                 },
  148.                 handleChange25805(e) {
  149.  
  150.                     this.elinput25805 = e
  151.                 },
  152.             }
  153.         });
  154.     </script>
  155.  
  156.  
  157. </body>
  158. <style type="text/css">
  159.     body {
  160.         margin: 0px;
  161.         padding: 0px;
  162.         background-color: #F8F9FB;
  163.     }
  164.  
  165.  
  166.     /**本页全局配置的代码**/
  167.     .pageconfig {
  168.         width: 100%;
  169.         height: 100vh;
  170.         overflow: hidden;
  171.         overflow-y: scroll;
  172.         background-color: ;
  173.         background-image: url();
  174.         background-position: ;
  175.         background-repeat: ;
  176.         background-size: ;
  177.     }
  178.  
  179.     /**pagedomcss**/
  180.  
  181.  
  182.  
  183.     /**本页表单form0的css代码**/
  184.     .commoncss68001 {
  185.         width: 100%;
  186.         background-color: #ffffff !important;
  187.         padding-top: 5px !important;
  188.         padding-bottom: 5px !important;
  189.         padding-left: 5px !important;
  190.         padding-right: 5px !important;
  191.     }
  192.  
  193.     /**vuecss**/
  194.  
  195.     /**本页表单输入框0的css代码**/
  196.     .commoncss66380 {
  197.         width: 100%;
  198.     }
  199.  
  200.     /**vuecss**/
  201.  
  202.     /**本页表单单选1的css代码**/
  203.     .commoncss94930 {
  204.         width: 100%;
  205.     }
  206.  
  207.     /**vuecss**/
  208.  
  209.     /**本页表单Switch开关2的css代码**/
  210.     .commoncss64718 {}
  211.  
  212.     /**vuecss**/
  213.  
  214.     /**本页表单输入框3的css代码**/
  215.     .commoncss91867 {
  216.         width: 100%;
  217.     }
  218.  
  219.     /**vuecss**/
  220.  
  221.     /**本页表单复选4的css代码**/
  222.     .commoncss39534 {
  223.         width: 100%;
  224.     }
  225.  
  226.     /**vuecss**/
  227.  
  228.     /**本页按钮0的css代码**/
  229.     .commoncss2422 {}
  230.  
  231.     /**vuecss**/
  232.  
  233.     /**本页按钮0的css代码**/
  234.     .commoncss17292 {}
  235.  
  236.     /**vuecss**/
  237.  
  238.     /**本页Row/col栅格分栏布局5的css代码**/
  239.     .commoncss25805 {}
  240.  
  241.     /**vuecss**/
  242. </style>
  243.  
  244. </html>

4.可视化自定义强大栅格系统

 5.一个不错的elementUI代码生成器，欢迎大家使用,可视化拖拽自动布局

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/490254
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号