vue 시각 화 드래그 가능 한 사용자 정의 폼 의 예제 코드 구현

예 를 들 어 시각 화 된 폼 끌 어 다 놓 기 기능 을 실현 합 니 다.전체 페이지 는 왼쪽 가운데,오른쪽 세 칸 으로 나 뉘 어 있 으 며,왼쪽 칸 의 위 젯 라 이브 러 리 의 위 젯(구성 요소)을 key 로 하여 중간 영역 에 끌 어 다 놓 을 때 vuex 에 배열 데 이 터 를 저장 하고,하 나 를 끌 면 push 입 니 다.어떤 구성 요 소 를 클릭 할 때 오른쪽 표시 줄 에 속성 을 표시 합 니 다.사실은 vuex 에 저 장 된 데이터 에서 데이터 교체 속성 을 찾 습 니 다.
왼쪽 중 오른쪽 세 칸 좌우 고정 중간 적응 레이아웃
우선,포석 을 보면 좌우 가 모두 늘 어 날 수 있 고 중간 은 스스로 적응 하 는 포석 이다.
좌우 로 각각 float left 와 float right,중간 표시 줄 은 margin 으로 구 조 를 펼 치면 구 조 를 완성 할 수 있 습 니 다.
동적 크기 조정 브 라 우 저 창 으로 효과 보기
동적 디 스 플레이 템 플 릿
두 번 째 중요 한 점 은 template 를 프로 그래 밍 할 수 있 도록 하 는 것 입 니 다.
예 를 들 어 문자열단추을 보 내 왔 습 니 다.문자열 태그 가 아 닌 구성 요소 로 표시 하 는 방법 은 무엇 입 니까?
관건:js 와 vue extends 사용
새 js

export default Vue.component('CustomTemplate', {
  props: {
    html: String
  },
  render (h) {
   return h(Vue.extend({ //    
     template: `<div class="root-custom-template">${this.html}</div>`,
     data () {
      return {
       current: ''
      }
     },
     methods: {
      doclick (uuid, id) {
       this.current = uuid
       this.$store.commit('EditPanel/changeId', uuid)
      },
      dodragstart (ev) {
       ev.dropEffect = 'move'
      }
     }
  }))
 },
})

드래그 앤 드 롭 작업 과 데이터 조립
글 의 시작 부분 에서 전체 데이터 의 흐름 을 분 석 했 고 그 다음은 vuex 로 이 루어 졌 다.
드래그 앤 드 롭 구성 요 소 는 vuedraggable 을 사용 합 니 다.드래그 앤 드 롭 이 완료 되 었 을 때 MVVM 의 특징 을 감안 하여 화면 변경<=>데이터 가 변경 되 었 습 니 다.vuex 를 조작 할 때 state 를 직접 수정 할 수 없 음 을 주의 하 십시오.

computed: {
  myList: {
    get() {
      return this.$store.state.myList
    },
    set(value) {
      this.$store.commit('updateList', value)
    }
  }
}

전체 데이터 흐름:왼쪽 표시 줄 구성 요소 라 이브 러 리<->중간 표시 줄<->오른쪽 표시 줄 속성 설정,데 이 터 를 잘 제어 하지 못 하면 원본 데이터 가 수 정 될 수 있 습 니 다.보 세 요:

var a = { k: 1 }
var b = a
b.k = 2
console.log(a) // { k: 2 }

이 는 본의 아니 게 데이터 가 수정 되 어 조사 하기 어렵다.오류 가 발생 하지 않도록 Object.freeze 를 사용 하여 대상 을 동결 할 수 있 습 니 다.
Object.freeze

function deepFreeze(obj) {

 //      obj     
 var propNames = Object.getOwnPropertyNames(obj);

 //            
 propNames.forEach(function(name) {
  var prop = obj[name];

  //   prop    ，   
  if (typeof prop == 'object' && prop !== null)
   deepFreeze(prop);
 });

 //     (no-op if already frozen)
 return Object.freeze(obj);
}

demo 프로젝트 github
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.