<template> <!--用的element-ui--> <el-container> <el-aside> <Draggable :options="dragOption"> <div v-for="(dragList,index) in dragData" :type="dragList.type" :key="dragList.type"> <div> <i></i> <span>{{ list.title }}</span> </div> </div> </Draggable> <el-aside> <el-main> <section> <div> <span></span> <span></span> </div> <!--页面view区 --> <Sort></Sort> <div> <button>RS</button> </div> </section> </el-main> <el-aside> <!--组件编辑区域--> <BaseEdit></BaseEdit> </el-aside> </el-container> </template> <script> import DragApi from "@/dragapi/dragapi.js"; import Draggable from "vuedraggable"; import Sort from "@/view/Sort"; import BaseEdit from "@/view/BaseEdit"; export default { name: 'app', data(){ return{ dragData: {}, dragOption: { group: { name: 'components', //这个很重要，其他的与之能产生关联的拖拽框就靠这name 一定要一致 pull: 'clone', put: false }, sort: false //默然为true。这里我们只需要他拖拽，无需能拖动排序 } } }, components: { Draggable, Sort, BaseEdit }, created(){ //侧边栏拖拽列表数据 //这里我只写了组件的数据进来，布局的暂时没放 this.dragData = DragApi.configList[1].content; } } </script>
-> 来看看sort view视图区域组件
<template> <Draggable :options="sortOption" @sort="onSort" @add="onAdd"> <!-- ui组件 --> <!--这里不懂的人，可以去vue官网看看动态组件--> <div v-for="(appUi,index) in sortApi" //循环组件 :is="appUi.component" //根据存在的组件渲染出来 :content="appUi.content" :oStyle="appUi.style" :editPartShow="appUi.editPartShow" :aIndex="index" //组件想要点击生效，只需要@click.native就行了 @click.native="getIndex(index)" //key值一定要给出来，不然相同组件的排序可能会不成功 :key="appUi.content.code"> </div> </Draggable> </template> <script> //利用vuex 辅助函数来操作vuexjs中的数据 import { mapState,mapMutations } from 'vuex'; //拖拽插件引入 import Draggable from 'vuedraggable'; //各个组件引入 import Carousel from "@/components/Carousel.vue"; import Btn from "@/components/Btn.vue"; export default { name: 'Sort', components: { Draggable,Btn,Carousel }, data(){ return { sortOption: { group: { name: 'components', //前面说的name,在这里就起了作用，不一样，是不能放入的 pull: true, put: true }, sort: true, animation: 300 //给了个动画，看起来舒服些 } } }, computed:{ ...mapState(['editIndex','sortApi']), }, watch:{ sortApi:{ handler(newVal,oldVal){ window.sessionStorage.setItem('localData',JSON.stringify(newVal)); }, deep: true } }, methods:{ ...mapMutations(['sortCp','addCp','setStyle','setCommon']), onSort(res){ //排序产生的事件 if(res.from === res.to){ this.sortCp(res); } }, onAdd(res){//组件增加产生的事件 this.addCp(res); }, getIndex(index){ this.setCommon({index: index,flag: true}); } } } </script>
-> 再来看看编辑组件
<template> <transition> <div v-if="sortApi.length > 0 && editShow === true"> //组件特有编辑 <el-tabs v-model="activeName"> <el-tab-pane label="组件设置"> <div v-for="(appUi,index) in sortApi" :is="appUi.component+'Edit'" :content="appUi.content" :oStyle="appUi.style" :editPartShow="appUi.editPartShow" :aIndex="index" :currentIndex="editIndex" :key="appUi.content.code"> </div> </el-tab-pane> <el-tab-pane label="样式设置"> //公共样式编辑 <el-collapse v-model="colorPicker.name" accordion> <el-collapse-item :title="colorPicker.type" :name="colorPicker.type"> <el-form ref="form" :model="colorPicker" size="mini"> <el-form-item v-for="(item,index) in colorPicker.content" :label="item.title" :key="item.style"> <el-color-picker //在element-ui框架中，有很多@change @active-change事件，直接写事件发现不能传入参数， //当然，办法总比问题多，我们换成一下这种写法就行了，他的默然参数写在前面 //这里颜色拾取器 返回的是实时的颜色值 //我这里主要想传一个对应的style @active-change=" (value) => setStyle(value,item.style)" v-model="sortApi[editIndex].style[item.style]" show-alpha> </el-color-picker> <span :style="{color: sortApi[editIndex].style[item.style]}"> {{ sortApi[editIndex].style[item.style] }} </span> </el-form-item> </el-form> </el-collapse-item> </el-collapse> </el-tab-pane> </el-tabs> </div> </transition> </template> <script> import { mapState,mapMutations } from 'vuex'; //这里我将组建特有的编辑栏，写成了一个组件，为什么不写在相应的组件一起了？ //这里必须说明一下，主要是我没有想到方法，让他在同一组件内分离出来，单独将dom结构放在编辑栏这里，如果有大神知道 //还望不吝赐教 import BtnEdit from "@/components/BtnEdit.vue"; export default{ name: 'BaseEdit', components: { BtnEdit }, data(){ return{ colorPicker: { type: '颜色设置', name: 'Picker', content:[ { title: '背景颜色', style: 'background' }, { title: '字体颜色', style: 'color' } ] }, activeName: 'first' } }, computed:{ ...mapState(['editIndex','sortApi','editShow']) }, methods:{ setStyle(value,style){ //根据上面传入的style属性，实时改变现有的值 this.$set(this.sortApi[this.editIndex].style,style,value); } } } </script>
-> 选出一个组件来看看里面是怎么配置的