【匠心打造】从0打造uniapp 可视化拖拽设计 c_o 第三篇

已于 2023-01-08 19:55:16 修改
阅读量2k 收藏 3
点赞数 2
分类专栏： uniapp 在线设计 文章标签： uni-app
于 2023-01-06 13:42:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhf214111967/article/details/128577334
版权

先放第三天的成果，大致布局如下。实时预览还未做。-_-

是一个比较简单的布局实现

上、左、中、右

设计思路：

先拖动布局，从左边拖动到右边。所有控件都在右边布局控件里面，控件的宽度和高度可自适应拖动.中间1显示布局(padding,margin 设计模式不生效，中2预览模式生效)，中间2显示实时输入地址栏的预览（还未实现）

右侧根据中1 的点击控件的属性进行显示.

放出左侧1的代码用json针对json实现

<template>
  <view class="main_drag">
    <view class="main_drag"> </view>
    <view class="top">
      <u-row customStyle="height:100%;display:flex;">
        <u-col class="top_left" span="4"> 1 </u-col>
        <u-col class="top_center" span="4">
          <view style="width: 100px">
            <u-button
              text="预览"
              type="warning"
              icon="play-right"
              color="linear-gradient(to right, rgb(60, 156, 255), rgb(162 208 255))"
            ></u-button>
          </view>
        </u-col>
        <u-col class="top_center" span="4"> 3 </u-col>
      </u-row>
    </view>
    <view class="left">
      <view class="left_top">
        <u-subsection
          :list="tab_list"
          @change="tabClick"
          mode="subsection"
          :current="tab_current"
        ></u-subsection>
      </view>

      <view style="height: 30px"></view>
      <view v-if="left_list[tab_current]">
        <u-collapse
          v-if="tab_current == '0'"
          :value="left_select"
          :border="false"
        >
          <u-collapse-item title="基础容器" name="0" :border="true">
            <u-row customStyle="margin-bottom: 10px">
              <u-col span="12">
                <left />
              </u-col>
            </u-row>
          </u-collapse-item>
        </u-collapse>

        <view
          v-for="(parent, parent_index) in left_list[tab_current]"
          :key="parent_index"
        >
          <view class="tab_class" v-if="parent.type == 'tab'">
            <u-tabs
              :activeStyle="{ color: 'rgb(60, 156, 255)', 'font-weight': 900 }"
              :list="parent.datas"
              :current="parent.current"
              @click="tabChange(parent, $event)"
            ></u-tabs>
          </view>
          <view
            v-if="parent.datas[parent.current].children"
            v-for="(item, left_index) in parent.datas[parent.current].children"
            :key="left_index"
          >
            <u-collapse :value="left_select" :key="left_index" :border="false">
              <u-collapse-item
                :title="item.title"
                :name="left_index"
                :border="true"
              >
                <view slot="title" style="display: flex">
                  <u-icon
                    v-if="
                      item.title_config && item.title_config.icon_type == 'icon'
                    "
                    size="18"
                    :name="item.title_config.icon_url"
                    class="left_title"
                  ></u-icon>

                  <image
                    v-if="
                      item.title_config &&
                      item.title_config.icon_type == 'image'
                    "
                    :src="item.title_config.icon_url"
                    mode="scaleToFill"
                    style="height: 25px; width: 25px"
                  />
                  <text
                    v-if="item.title_config"
                    class="left_title"
                    :style="{
                      'font-size': item.title_config.size + 'px',
                      color: item.title_config.color,
                    }"
                    >{{ item.title }}</text
                  >
                </view>
                <u-row
                  v-for="(elements, elements_index) in $common.groupingArray(
                    item.items,
                    3
                  )"
                  :key="elements_index"
                  customStyle="margin-bottom: 10px"
                >
                  <u-col
                    span="4"
                    v-for="(element, element_index) in elements"
                    :key="elements_index + '_' + element_index"
                  >
                    <genitem v-if="element.group" :items="[element.group]" />
                  </u-col>
                </u-row>
              </u-collapse-item>
            </u-collapse>
          </view>
          <view v-if="!parent.datas[parent.current].children">
            <u-empty mode="list" icon="/static/empty.png" />
          </view>
        </view>
      </view>
      <view v-if="!left_list[tab_current]">
        <u-empty mode="list" icon="/static/empty.png"> </u-empty>
      </view>
    </view>
    <view class="center">
      <view @click="mobileClick">
        <center />
      </view>
    </view>
    <view class="right">
      {{ right_current }}
    </view>
  </view>
</template>
<script>
import left from "./left";
import center from "./center";

export default {
  components: {
    left,
    center,
  },
  data() {
    return {
      tab_list: ["基础组件", "实用模板", "成品页面"],
      tab_current: 0,
      left_select: ["0", "1", "2", "3"],
      left_list: [
        [
          {
            type: "tab",
            current: 0,
            datas: [
              {
                name: "基础",
                children: [
                  {
                    title: "布局容器",
                    title_config: {},
                    items: [
                      {
                        group: {
                          id: 1,
                          name: "图标",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uicon",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 4,
                          name: "图片",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uimage",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 2,
                          name: "按钮",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "ubutton",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 3,
                          name: "文本",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "utext",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 4,
                          name: "cell单元格",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "ucell",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 5,
                          name: "徽标数",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "ubadge",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "Tag标签",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "utag",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                    ],
                  },
                ],
              },
              { name: "表单" ,children: [
                  {
                    title: "基础控件",
                    title_config: {},
                    items: [
                      {
                        group: {
                          id: 1,
                          name: "日历",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "ucalendar",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 4,
                          name: "键盘",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "ukeyboard",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 2,
                          name: "下拉组件",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uselect",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 3,
                          name: "日期",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "udate",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 4,
                          name: "评分",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "urate",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 5,
                          name: "搜索",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "usearch",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "步进器",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "unumberbox",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "上传",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uupload",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "文本框",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uinput",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "文本域",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "utextarea",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "多选框",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "ucheckbox",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "单选框",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uradio",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "switch切换",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uswitch",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "进度条",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "uslider",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                      {
                        group: {
                          id: 6,
                          name: "朋友圈相册",
                          icon_type: "icon",
                          icon_url: "setting",
                          componentName: "ualbum",
                          iStyle: {},
                          iClass: [],
                        },
                      },
                    ],
                  },
                ], },

              
              { name: "数据",
              },
              { name: "反馈" },
              { name: "布局" },
              { name: "导航" },
              { name: "其他" },
            ],
          },
        ],
      ],
      tab_bar_current: 0,
    };
  },
  onLoad() {
    this.init();
  },
  computed: {
    right_current() {
      var item = this.$store.state.current;

      return item;
    },
  },
  methods: {
    tabChange(item, event) {
      item.current = event.index;
    },
    getNewList() {
      let a = this.tolList;
      console.log(a);
    },
    init() {},
    tabClick(e) {
      this.tab_current = e;
      console.log(e);
    },
    tabBarClick(e) {
      this.tab_bar_current = e;
    },
    mobileClick() {
      console.log("全局点击");
    },
    componentClick(item) {
      console.log(item);
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  height: 100%;
  width: 100%;
  background: #f1f1f1;
  overflow: hidden;
}
.main_drag {
  display: flex;
  flex-direction: row;
  height: 99%;
  padding: 80px 0 0 0;

  background-color: #e9eef3;
  background-image: linear-gradient(
      45deg,
      #f5f5f5 25%,
      transparent 0,
      transparent 75%,
      #f5f5f5 0
    ),
    linear-gradient(
      45deg,
      #f5f5f5 25%,
      transparent 0,
      transparent 75%,
      #f5f5f5 0
    );
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.top {
  height: 70px;
  width: 100%;
  z-index: 2;
  top: 0px;
  box-shadow: 0 1px 4px 0px #00000038;
  background: rgb(255, 255, 255);
  position: fixed;
}
.left {
  width: 350px;
  margin: -20px 0 0 0px;
  background: #fff;
  box-shadow: 0 12px 10px 0px #00000038;
  height: 100%;
  padding: 20px 20px 20px 20px;
  overflow: auto;
}

.left::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}

.left::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.left::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

.center {
  margin: -90px auto 0 17%;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-items: center;
  justify-content: center;
}
.right {
  margin: -10px 0 0 0;
  width: 405px;
  background: #fff;
  border: 1px solid #dcdee2;
  box-shadow: 0 0px 15px 0px #00000026;
}
.bottom_class {
  position: fixed;
  border-top: 1px solid #ddd;
  width: 380px;
  bottom: 7.3%;
  margin: 0 0 0 1px;
}
// .edit_mobile {
//   border: 1px solid #ddd;
//   width: 380px;
//   height: 750px;
//   background: #fff;
//   padding:100px 0 0 0;
// }

.left /deep/ .u-cell__body {
  font-weight: 900;
  border-bottom: 1px solid #f1f1f1;
}
.left /deep/ .u-collapse-item__content {
  overflow: auto;
}
.center_run_item {
  border: 1px dashed #ddd;
}
.left_top {
  position: fixed;
  width: 19%;
  z-index: 999;
  background: #fff;
}
.top_left {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center !important;
  justify-content: flex-start !important;
}
.top_center {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center !important; //适合单行显示的组件，垂直居中
  justify-content: center !important; //水平居中
}
.tab_class {
  display: flex;
  justify-content: center;
}
.left_title {
  margin: 0 5px 0 0;
}

</style>

其中，中1的嵌套布局是难点，攻克中。中2的也陆续在实现。

期待免费 c_o 生成器，加油ing..-_-

下一篇：【匠心打造】从0打造uniapp 可视化拖拽设计 c_o 第四篇_我只是一个coder的博客-CSDN博客 

我只是一个coder
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
工作313:uni-状态不同选择
歌谣的博客
01-19 355
<template> <view class=""> <u-subsection :list="list" :current="current" mode="button" :animation="true" bg-color="white" button-color="white" @change="cheange"></u-subsection> <view class="wrap"> <view v-if="cur
【匠心打造】从0打造uniapp 可视化拖拽设计 c_o 第八篇
lhf214111967的专栏
01-21 288
春节加更一篇，目前实现，组件优先选择风格，根据风格，系统自带去匹配属性，属性再可进行更改的操作模式。根据每个组件去赋值设置常用风格，是一件十分费时费力的事情。因为 记属性是一个比较费事，费时的功夫。此时改为优先选择风格图片。
uniapp 实现拖拽功能
m0_48557659的博客
03-17 4708
客户要求；微信客服功能悬浮，并且可以在页面进行，拖拽移动
DIYGW UniApp可视化设计工具：从设计到发布的一站式解决方案
最新发布
chenchuang0128的博客
05-17 1335
它不仅能满足设计师的设计需求，还能一键将设计原型转化为可运行的代码，实现了设计与开发的无缝对接。DIYGW UniApp可视化设计工具作为一款集设计、编码、预览、发布于一体的前端开发利器，极大地提高了开发效率和用户体验。未来，随着前端技术的不断发展，DIYGW UniApp可视化设计工具将会继续优化和完善功能，为开发者提供更加高效、便捷的开发体验。同时，支持样式的复制和粘贴，提高设计效率。提高开发效率：通过一键转码功能，将设计原型快速转化为可运行的代码，减少了设计师与开发者之间的沟通成本。
可视化拖拽式小程序源码系统 带完整的安装代码包以及搭建教程
codeji的博客
03-07 496
2.界面可定制：用户可以通过简单的拖拽操作调整组件的位置和大小，同时支持自定义组件的样式和属性，实现个性化的界面设计。4.响应式设计：系统采用响应式设计，可以自动适应不同尺寸的屏幕和设备，确保小程序在不同平台上都能保持良好的显示效果。1.组件丰富：系统提供了丰富的组件库，包括轮播图、导航栏、表单、列表等常用组件，用户可以根据需求自由组合。5.快速部署：系统提供完整的安装代码包和搭建教程，用户只需按照步骤操作，即可快速搭建起自己的小程序平台。源码下载地址：春哥技术博客或帮企商城获取。
可视化uniapp2.0如何设计复杂的布局
weixin_38344204的博客
03-30 1409
可视化uniapp2.0如何设计复杂的布局
3.DIY可视化-拖拽设计1天搞定主流小程序-前后分离框架运行
MRS的博客
06-10 605
话不多说,直接实操。
匠心精作C++从0到1入门编程-学习编程不再难资料、笔记
04-11
匠心精作C++从0到1入门编程-学习编程不再难资料、笔记，和匠心精作C++从0到1入门编程-学习编程不再难视频配套。
匠心精作C++从0到1入门编程---机房预约系统
08-11
《匠心精作C++从0到1入门编程---机房预约系统》是一个旨在帮助初学者掌握C++编程语言并实际应用到机房预约系统开发的学习资料。这份资源纠正了官方文档中的错误，确保了程序能够顺利编译和运行，对于初学者来说是一...
匠心精作C++从0到1入门编程-学习编程不再难第2阶段实战-通讯录管理系统 源码
05-10
这个系统是“匠心精作C++从0到1入门编程-学习编程不再难”系列教程的第二阶段实战项目，旨在帮助初学者通过实践提升C++编程技能。 C++是一种强大的、面向对象的编程语言，广泛应用于系统软件、游戏开发、应用程序、...
【讲义】匠心精作C++从0到1入门编程-学习编程不再难.zip
09-18
《匠心精作C++从0到1入门编程》是一份专为初学者设计的C++学习资源包，旨在帮助新手逐步掌握编程基础，降低学习难度。这个资源包包含多个阶段的学习资料，覆盖了C++语言的各个方面，从环境搭建到实战项目的完成。...
VueLayout基于UI组件的Vue可视化布局生成vue代码的工具
08-12
Vue-Layout 基于UI组件的Vue可视化布局、生成.vue代码的工具
Cms拖拽实现拖拽生成页面
07-25
从左面拖拽组件库，拖拽后内容更改为自定义内容，右面排版自由选择，这仅是简易版提供思路，不在迷茫
黑马程序员匠心之作 C++教程_第7阶段-C++实战项目机房预约讲义.rar
03-19
《黑马程序员匠心之作 C++教程_第7阶段-C++实战项目机房预约讲义》是为C++初学者量身定制的一份详细教学资源。这份讲义深入浅出地介绍了C++编程语言，并通过实际的机房预约系统项目，帮助学习者将理论知识与实践相...
15.1.DIY可视化-拖拽设计1天搞定主流小程序-搜索文章过滤显示
MRS的博客
06-12 131
话不多说,直接实操。
【匠心打造】从0打造uniapp 可视化拖拽设计 c_o 第四篇
lhf214111967的专栏
01-07 654
将会在左侧的所有控件，进行预设模板。左侧按钮右上角会显示数字。对应默认预设的模板，当然用户也可以在右侧改动。已将uview2所有组件全部集成到系统，且按照自己的理解将控件进行分门别类。与刚开始设计的一样，左1控件，中1开发模式，中2实时预览模式，.忙了几天了，先看效果。
uniapp+vue move-view 拖拽滑动效果组件
WangYan的博客
01-05 2119
uniapp自身提供了movable-area/movable-view标签实现拖拽滑动效果，但是实际开发中发现，此标签跟滚动效果有冲突，会影响内部列表的滚动效果，基于此，所以单独封装了两种模式的滑动组件。
uni-app开发小程序可视化之uchart
槿柊的博客
07-09 2231
前言 一般有数据的地方就有可视化，小程序开发过程中碰到了可视化问题，uniapp中有两种方案，uchars或者echars，本想使用echars，官网一直都打不开，发现uchars也挺好使！ ##老规矩 一图胜千言 0 下载就不用说！上地址： https://ext.dcloud.net.cn/plugin?id=271 1 导入 没有像官方文档写的直接使用HBX导入，主要是先搞清楚哪几个文件在作用。 也可以按官方文档直接如图所示导入。 2 配置 ###使用配置工具修改并完成uchars的配置工作：
uniapp实现图片的放大缩小可拖拽
热门推荐
哆来A梦没有口袋的博客
06-30 1万+
官网地址：https://uniapp.dcloud.io/component/movable-view?id=movable-view 实现放大缩小主要依赖 - movable-view
c++ 第1阶段c++ 匠心之作 从0到1入门
07-01
总的来说，第1阶段c 匠心之作从0到1入门是一个系统化的学习计划，旨在帮助学习者从零开始学习C语言编程。通过这个项目，学习者将建立起对编程的基本理解和技能，并能够编写一些简单但有意义的小项目。这个项目不仅有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值