【匠心打造】从0打造uniapp 可视化拖拽设计 c_o 第三篇
先拖动布局，从左边拖动到右边。所有控件都在右边布局控件里面，控件的宽度和高度可自适应拖动.中间1显示布局(padding,margin 设计模式不生效，中2预览模式生效)，中间2显示实时输入地址栏的预览（还未实现）其中，中1的嵌套布局是难点，攻克中。中2的也陆续在实现。期待免费 c_o 生成器，加油ing..-_-放出左侧1的代码用json针对json实现。右侧根据中1 的点击控件的属性进行显示.
·
先放第三天的成果，大致布局如下。实时预览还未做。-_-
是一个比较简单的布局实现
上、左、中、右
设计思路：
先拖动布局，从左边拖动到右边。所有控件都在右边布局控件里面，控件的宽度和高度可自适应拖动.中间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..-_-
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)