написать впереди
Я использовал Jquery + Jquery-ui для этого проекта раньше. В то время не было ни эскизного проекта, ни требований к проекту. Просто из-за слова BOSS, чтобы сделать такие вещи, тогда это было... Ok! Признаюсь, я на самом деле привык к этому, это не имеет значения (тоже беспомощный, эй)!!!
В следующий период времени я сделал демку, и БОСС остался очень доволен, так что буду делать потихоньку, где-то два-три месяца, буду только этим заниматься, а потом проект запустится, конечно, из-за продукт Отлично, есть еще некоторые проблемы!
Тем не менее, это может в основном удовлетворить потребности компании.Все, что можно редактировать, можно редактировать.Фон компонента (включая фоновое изображение) цвет границы поле-тени поле отступ ширина высота Выравнивание (шрифт и внутренние элементы компонента ) шрифт border-radius(font-size/font-family) и другие основы могут быть изменены по желанию.Конечно, учитывая, что это может не соответствовать использованию компании, была добавлена функция пользовательского стиля, и ее можно использовать только людьми, которые разбираются во внешнем интерфейсе Ни в коем случае, спрос Никогда не успевайте за изменениями, так что будьте в безопасности. Потому что всем известно, что удовлетворение и изменение требований всегда будет опережать существующие требования.
В дополнение к этим основным изменяемым функциям, уникальные изменяемые функции каждого компонента также в основном завершены, такие как изменение карусельного изображения, метод карусели, контроль за вращением и т. д. Эти функции здесь не представлены.
В том числе и позже, т. к. внутри компонента есть отдельные элементы, которые нельзя модифицировать, была добавлена функция [Модификация привязки].После выбора этой функции в интерфейсе просмотра выберите элемент, который необходимо модифицировать, после чего можно изменить его.Эта функция все еще немного интересна.
Сказав так много, на самом деле из-за спешки, HTML был сохранен в хранилище.Не презирайте его (вы хотите, чтобы лицо 0.0), это также стебель в моем сердце.Недавно я добавил BOSS и поставил еще раз выдвигаю некоторые идеи, их довольно много Кое-что нужно добавить.Поразмыслив, я решил провести рефакторинг проекта.
Учитывая, что vue является отзывчивым и в основном чистым манипулированием данными, я решил использовать vue для перестройки этого проекта.
подготовка к разработке
1,Используйте vue-cli, загрузите настроенные вещи
2,Поскольку операция перетаскивания компонентов происходит посередине, используются vuedraggable и sortablejs.
Установите vuedraggable sortablejs
npm install vuedraggable
npm install sortablejs
В проекте нужно ввести только vuedraggable.При задействовании sortablejs vuedraggable сам будет загружать и вызывать методы в sortablejs.На это не нужно обращать внимание (если хотите знать, можете пойти и посмотреть для себя);
3.Установите vuex, потому что он включает в себя много взаимодействия с данными, многим компонентам нужны некоторые общие данные, не используя vuex для управления, это принесет больше ненужных проблем при разработке;
установить вуекс
npm install --save vuex
4.Поскольку эскиза дизайна нет, я смело использую стороннюю библиотеку пользовательского интерфейса element-ui;
адрес официального сайта element-ui
установить элемент
npm install element-ui
//为什么是element-ui而不是element?因为当时npm上已经有了element包了(我当时还觉得挺有意思的，0.0 好冷啊！！！)
5.Установка Axios, которая будет использоваться позже для взаимодействия с фоновыми данными.
установить аксиомы
npm install --save axios
Вот и все подготовительные работы, давайте посмотрим на реализацию проекта;
начало проекта
1. Конфигурация различных файлов
-> Конфигурация файлов в main.js
-> Конфигурация данных компонента перетаскивания боковой панели
Среди компонентов есть проблема макета, поэтому должны быть компоненты макета, чтобы компоненты можно было разместить в компонентах макета, чтобы быть более гибкими.
-> конфигурация js в управлении состоянием vuexjs
проиллюстрировать:
1, потому что пользователи хотят сохранять после перетаскивания в sessionStorage в режиме реального времени, поэтому чем дольше будет проходить начальное время, когда sessionStroage будет извлекать данные, чтобы предотвратить внезапное обновление страницы, а не сохранение в базе данных, ситуация такова, что все пользователи изменить потерю данных;
2. Позвольте мне объяснить здесь, может считаться, что данные были отправлены, поэтому после того, как пользователь закроет окно, когда они снова войдут, они должны объединить предыдущие данные пользователя, данные в фоновом режиме, и сохранить их в sessionStorage вместе. Я считаю, что это точно.Как вы понимаете, вот любезное напоминание о 0.0;
3. Я временно поместил здесь четыре параметра, которые объяснены на рисунке.Я в основном сделал базовое редактирование в компоненте, который будет повторно отображать данные в компоненте редактирования в соответствии с тем, какой компонент щелкает пользователь, чтобы он мог быть в режиме реального времени Соответствует выбранному компоненту для редактирования;
4. Функция editShow заключается в том, чтобы контролировать, отображается ли компонент редактирования или нет.Когда компонент в основном удаляется, пусть компонент редактирования скрывает его, нажмите на отображение других компонентов;
Это базовые конфигурации, а следующим шагом будет настоящая разработка;
2. Начало разработки проекта
-> Как писать в файле app.vue?
<template>
<!--用的element-ui-->
<el-container>
<el-aside>
<Draggable class="app-aside-drag" :options="dragOption">
<div class="app-aside-list"
v-for="(dragList,index) in dragData"
:type="dragList.type"
:key="dragList.type">
<div class="aside-item-body">
<i class="aside-item-ele"></i>
<span class="aside-item-ele">{{ list.title }}</span>
</div>
</div>
</Draggable>
<el-aside>
<el-main class="app-main">
<section class="app-phone">
<div class="app-phone-header">
<span class="phone-camera"></span>
<span class="phone-ls"></span>
</div>
<!--页面view区 -->
<Sort class="app-phone-body"></Sort>
<div class="app-phone-footer">
<button class="app-phone-menu">RS</button>
</div>
</section>
</el-main>
<el-aside class="app-right">
<!--组件编辑区域-->
<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>
-> Давайте взглянем на компонент области просмотра сортировки
<template>
<Draggable :options="sortOption"
@sort="onSort"
@add="onAdd"
class="app-sort">
<!-- 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 name="slide-right">
<div v-if="sortApi.length > 0 && editShow === true">
//组件特有编辑
<el-tabs v-model="activeName">
<el-tab-pane label="组件设置" name="first">
<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="样式设置" name="second">
//公共样式编辑
<el-collapse v-model="colorPicker.name" class="base-edit" accordion>
<el-collapse-item class="tititt" :title="colorPicker.type" :name="colorPicker.type">
<el-form ref="form" :model="colorPicker" size="mini">
<el-form-item class="cui-inline-reset"
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 class="black-text-shadow"
: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>
-> Выберите компонент, чтобы увидеть, как он настроен
//按钮组件，其实里面很简单
//组件的对应的编辑组件，里面内容和这个也差不多，下面就不写了
<template>
<div class="btn-box ui-sortable" :data-code="content.code">
<el-button class="ui-btn"
:style="oStyle">
{{ content.text }}
</el-button>
//因为每个组件都有删除功能，所以写成了一个组件
<DeleteCp :aIndex="aIndex"></DeleteCp>
</div>
</template>
<script>
import DeleteCp from "@/components/DeleteCp";
export default {
name: 'Btn',
props: { //父组件传入的参数
content: Object,
oStyle: Object,
aIndex: Number
},
components: {
DeleteCp
},
data(){
return{
btnModel: 'btn-model'
}
}
}
</script>
-> Наконец, давайте взглянем на удаление компонентов
<template>
<div class="delete-compontent-box">
<div class="el-icon-delete remove-component" @click.stop="dailogStatu"></div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
:append-to-body="appendToBody"
width="430px">
<div class="el-message-box__content">
<div class="el-message-box__status el-icon-warning"></div>
<div class="el-message-box__message dialog-message">此操作将删除该模块, 是否继续?</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="onRemove(aIndex)" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
name: 'oText',
props: {
aIndex: Number
},
data(){
return{
//这两个参数是弹框的参数
dialogVisible: false,
appendToBody: true
}
},
methods:{
...mapMutations(['deleteCp','setCommon']),
dailogStatu(){
//主要是控制弹窗出来，并且显示该组件对应的编辑栏
this.dialogVisible = true;
this.setCommon({flag: true,index: this.aIndex})
},
onRemove(index){
//点击确定删除对应的组件
let flag = false;
this.deleteCp(index);
this.dialogVisible = false;
this.$message({
message: '该模块已删除 !',
type: 'success'
});
this.setCommon({flag: false,index: 0})
}
}
}
</script>
-> Давайте посмотрим на визуализацию
заключительные замечания
Что ж, я сегодня много писал, и наконец разберемся с идеями:
1, первый компонент расположен слева от тяги.
2. Настройте данные в vuex
3. Конфигурация в app.vue
4. Отредактируйте конфигурацию компонента
5. Передача и зависимость различных данных
На самом деле, каждому проекту нужен четкий маршрут, чтобы его можно было хорошо развить, поэтому мой совет: когда вы получаете проект, не пишите его все сразу, вы должны думать о том, как это сделать и как делать это внезапно.Когда что-то происходит (например, внезапные изменения спроса), это удобно не только для нас самих, но и для тех, кто поддерживает это позже, а также предотвращает ненужные проблемы.
Спасибо за ваше терпеливое чтение.В конце концов, это всего лишь общее введение, и должно быть много недостатков.Если у вас есть какие-либо предложения, пожалуйста, оставьте сообщение для обмена.
Напоследок: Приглашаю всех обратить внимание на мой личный публичный номер:большой интерфейс js, конечно, чтобы вернуть всеобщее внимание, я поместил в него некоторые учебные ресурсы, горячо приветствую всех, кто обращает внимание на внешний обмен, но не ограничивается знаниями о внешнем интерфейсе;
Проект с открытым исходным кодом
Пришло время почтить то, что я сказал ранее, открытый исходный код, конечно, удалить много чего, оставив большой каркас под идеи, приведенные в этой статье, если вы хотите добавить свои функции, вам все равно нужно добавить на основе этой идеи. Проверьте это! Без лишних слов, вот адрес проекта:адрес проекта, если хотите, дайте больше звезд 23333
Оригинал непросто, укажите источник, перепечатанный с оригинальной ссылкой, спасибо!