Vue는 시각적 드래그 앤 드롭 사용자 정의 양식을 구현합니다(코드 예)

이 기사의 내용은 Vue의 시각적 드래그 앤 드롭 사용자 정의 양식(코드 예제) 구현에 대한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

예제와 같이 시각적 드래그 앤 드롭 양식 기능을 구현하세요. 전체 페이지는 왼쪽, 가운데, 오른쪽 3개의 열로 나누어져 있으며, 왼쪽 열에 있는 컴포넌트 라이브러리의 컴포넌트(컴포넌트)가 중앙 영역으로 드래그 앤 드롭하면 배열 데이터가 vuex에 저장되며, 하나를 드래그한 후 푸시됩니다. 컴포넌트를 클릭하면 해당 속성이 오른쪽 열에 표시됩니다. 실제로는 vuex에 저장된 데이터에서 데이터 반복 속성을 찾는 것입니다.

왼쪽, 가운데, 오른쪽 3개의 열, 왼쪽과 오른쪽 고정, 가운데 적응형 레이아웃

먼저 레이아웃 측면에서 왼쪽과 오른쪽은 늘릴 수 있고 가운데는 적응형 레이아웃입니다.

여백을 사용하여 가운데 열을 열어 레이아웃을 완성하세요.

브라우저 창을 동적으로 확대하여 효과를 확인하세요.

템플릿을 동적으로 표시하세요.

예를 들어 문자열 button이 전달되면 이를 문자열 레이블 대신 구성 요소로 표시하는 방법입니다.

핵심 사항: js 및 vue 확장 사용

새 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 실행 시 상태를 직접 수정하지 않도록 주의하세요

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.freezeObject.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);
}

이 기사는 여기서 끝났습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의

JavaScript Tutorial Video

칼럼을 주목하세요!

위 내용은 Vue는 시각적 드래그 앤 드롭 사용자 정의 양식을 구현합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!