Vue 컴포넌트 개발 기술 요약

이번에는 Vue 컴포넌트 개발 스킬에 대한 요약을 가져오겠습니다. Vue 컴포넌트 개발 시 주의사항은 무엇인가요?

머리말

졸업이 가까워지면서 간단한 개인 블로그를 작성했습니다. 프로젝트 주소는 여기를 클릭하여 방문하세요. (그나저나 별표를 요청하세요.) 이 글은 시리즈의 첫 번째 요약입니다. 다음으로 Element의 대화 상자와 팝업 구성 요소의 로우 프로파일 버전을 단계별로 모방해 보겠습니다.

Text

Vue 단일 파일 컴포넌트 개발

vue-cli를 사용하여 프로젝트를 초기화할 때 src/comComponents 폴더에 HelloWorld.vue 파일이 있습니다. 이것이 단일 파일의 기본 개발 모델입니다. 구성 요소.

// 注册
Vue.component('my-component', {
 template: '<p>A custom component!</p>'
})
// 创建根实例
new Vue({
 el: '#example'
})

다음으로 대화 구성 요소 작성을 시작합니다.

Dialog

대상 대화 상자 구성 요소의 기본 스타일은 그림과 같습니다.

대상 스타일에 따라 다음과 같이 결론을 내릴 수 있습니다.

1. dialog 구성 요소에는 표시할 titleprops가 필요합니다. 팝업 창 제목

2. dialog 구성 요소 OK 버튼을 눌렀을 때 OK 이벤트 를 발생시켜야 합니다(즉, 상위 구성 요소에 OK임을 알리기 위해).

3. 마찬가지로, Dialog 구성 요소 취소 이벤트를 내보내야 합니다

4. 대화 상자 구성 요소는 간편한 사용자 정의를 위한 슬롯을 제공해야 합니다. Content

그러면 코딩은 다음과 같습니다.

<template>
 <p class="ta-dialogwrapper">
 <p class="ta-dialog">
  <p class="ta-dialogheader">
  <span>{{ title }}</span>
  <i class="ios-close-empty" @click="handleCancel()"></i>
  </p>
  <p class="ta-dialogbody">
  <slot></slot>
  </p>
  <p class="ta-dialogfooter">
  <button @click="handleCancel()">取消</button>
  <button @click="handleOk()">确定</button>
  </p>
 </p>
 </p>
</template>
<script>
export default {
 name: 'Dialog',
 props: {
 title: {
  type: String,
  default: '标题'
 },
 },
 methods: {
 handleCancel() {
  this.$emit('cancel')
 },
 handleOk() {
  this.$emit('ok')
 },
 },
}
</script>

이렇게 하면 대화 상자 구성 요소의 개발이 완료됩니다. 사용방법은 다음과 같습니다.

<ta-dialog 
 title="弹窗标题" 
 @ok="handleOk" 
 @cancel="handleCancel">
 <p>我是内容</p>
</ta-dialog>

이때 문제가 발견되어 v-if나 v-show를 이용하여 팝업창 표시를 조절하는데, 애니메이션이 나오지 않습니다! ! ! , 매우 뻣뻣해 보입니다. 코치님, 이때 애니메이션을 추가하고 싶습니다. 전환 구성 요소가 작동합니다. CSS와 결합된 Transition 컴포넌트를 사용하면 좋은 효과를 지닌 많은 애니메이션을 만들 수 있습니다. 다음으로 대화 상자 구성 요소의 애니메이션을 강화합니다. 코드는 다음과 같습니다.

<template>
 <transition name="slide-down">
 <p class="ta-dialogwrapper" v-if="isShow">
  // 省略
 </p>
 </transition>
</template>
<script>
export default {
 data() {
 return {
  isShow: true
 }
 },
 methods: {
 handleCancel() {
  this.isShow = false
  this.$emit('cancel')
 },
 handleOk() {
  this.isShow = true
  this.$emit('ok')
 },
 },
}
</script>

전환 구성 요소가 nameprops를 받는 것을 볼 수 있는데 애니메이션을 완성하려면 CSS를 어떻게 작성해야 할까요? 매우 간단한 방법은 두 가지

핵심 클래스(css className) 스타일을 작성하는 것입니다.

.slide-down-enter-active {
 animation: dialog-enter ease .3s;
}
.slide-down-leave-active {
 animation: dialog-leave ease .5s;
}
@keyframes dialog-enter {
 from {
 opacity: 0;
 transform: translateY(-20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
@keyframes dialog-leave {
 from {
 opacity: 1;
 transform: translateY(0);
 }
 to {
 opacity: 0;
 transform: translateY(-20px);
 }
}

전환 구성 요소의 이름이 슬라이드다운되어 있다는 점에 유의하세요. 애니메이션은 슬라이드다운-입력-활성 및 슬라이드다운-나가기-활성입니다.

대화 상자를 캡슐화하여 MessageBox 만들기

Element의 MessageBox는 다음과 같이 사용됩니다.

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
}).then(() => {
 this.$message({
 type: 'success',
 message: '删除成功!'
 });
}).catch(() => {
 this.$message({
 type: 'info',
 message: '已取消删除'
 });   
});

이 코드를 봤을 때 정말 마법 같은 느낌이 들었습니다. 너무 마법 같은 느낌이었습니다(세 번 연속 놀라움). 자세히 살펴보면 이 구성 요소는 실제로 캡슐화된 대화 상자입니다.

다음으로 이러한 구성 요소도 캡슐화하겠습니다. 먼저 생각을 정리해 보겠습니다.

1. Element의 사용 방법은 $confirm입니다. 이것은 단지 Vue의 프로토타입에 걸어두는 문제가 아닌가요?

2. Element는 확인을 의미하고, catch는 취소를 의미합니다. 그리고 약속이면 충분해요

생각을 정리한 후 코딩을 시작했습니다.

import Vue from 'vue'
import MessgaeBox from './src/index'
const Ctur = Vue.extend(MessgaeBox)
let instance = null
const callback = action => {
 if (action === 'confirm') {
 if (instance.showInput) {
  instance.resolve({ value: instance.inputValue, action })
 } else {
  instance.resolve(action)
 }
 } else {
 instance.reject(action)
 }
 instance = null
}
const showMessageBox = (tip, title, opts) => new Promise((resolve, reject) => {
 const propsData = { tip, title, ...opts }
 instance = new Ctur({ propsData }).$mount()
 instance.reject = reject
 instance.resolve = resolve
 instance.callback = callback
 document.body.appendChild(instance.$el)
})
const confirm = (tip, title, opts) => showMessageBox(tip, title, opts)
Vue.prototype.$confirm = confirm

이 시점에서 어떻게 콜백할지 궁금하실 겁니다. 사실 저는 캡슐화된 대화 상자를 작성하고

그 안에 이름을 붙였습니다. 코드에는 두 가지 A 메소드가 있습니다:

onCancel() {
 this.visible = false
 this.callback && (this.callback.call(this, 'cancel'))
},
onConfirm() {
 this.visible = false
 this.callback && (this.callback.call(this, 'confirm'))
},

예, 확인 및 취소 시 콜백하는 것입니다. Vue.extend에 대해서도 이야기하고 싶습니다.

저는 새 MessageBox를 직접 사용하지 않고 새 Ctur를 사용합니다. 예를 들면 다음과 같습니다.

instance = new Ctur({ propsData }).$mount()

At 이번에는 페이지가 실제로 아직 MessageBox가 없으므로 다음을 실행해야 합니다.

document.body.appendChild(instance.$el)

이 작업을 직접 수행하면 MessageBox가 열릴 때 애니메이션이 없지만 닫힐 때 애니메이션이 있음을 알 수 있습니다. . 해결책도 매우 간단합니다.

appendChild를 사용할 때 보이지 않게 유지한 다음 다음과 같은 코드를 사용하세요.

Vue.nextTick(() => instance.visible = true)

이렇게 하면 애니메이션이 됩니다.

Summary

1. 전환과 CSS를 통해 좋은 애니메이션을 구현해보세요. 그중에서 전환 구성 요소의 이름은 CSS 작성을 위한 두 가지 주요 클래스, 즉 [name]-enter-active 및 [name]-leave-active

   를 결정합니다.

2. Vue.extend를 통해 컴포넌트의 constructor를 상속받은 다음(정확하게 말하면 이렇게만 하겠습니다.) 이 생성자를 통해 관련 속성을 커스터마이징할 수 있습니다. (사용 시나리오: js가 컴포넌트를 호출함)

3. js 컴포넌트를 호출할 때 컴포넌트의 애니메이션 효과를 유지하려면 먼저 document.body.appendChild를 사용한 다음 Vue.nextTick(()을 사용할 수 있습니다. =>instance.visible = true)

이것이 바로 간단한 Vue 컴포넌트 개발 내용을 요약한 것입니다. 제가 작성한 관련 코드는 https://github.com/mvpzx/elapse/에 있습니다. tree/master/be/src/comComponents

이 기사의 사례와 기타 내용을 읽으신 후 방법을 마스터하셨다고 믿습니다. 얼마나 흥미롭습니까? PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 도서:

Vue 렌더링 및 플러그인 로딩 작업 순서

Node.js 크롤링 Douban 데이터 예제

위 내용은 Vue 컴포넌트 개발 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!