집 > 기사 > 웹 프론트엔드 > Vue 컴포넌트 개발 기술은 무엇입니까?

Vue 컴포넌트 개발 기술은 무엇입니까?

php中世界最好的语言원래의: 2018-04-12 11:46:251669검색

이번에는 Vue 컴포넌트 개발 스킬과 Vue 컴포넌트 개발 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

Vue 단일 파일 구성 요소 개발

vue-cli를 사용하여 프로젝트를 초기화하면 src/comComponents 폴더에 HelloWorld.vue 파일이 있습니다. 이는 단일 파일 컴포넌트의 기본 개발 모드입니다.

rreee

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

대화

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

대상 스타일에 따라 다음과 같이 요약할 수 있습니다.

대화 상자 구성 요소에는 팝업 창 제목을 나타내기 위한 titleprops가 필요합니다.
대화 상자 구성 요소는 확인 버튼을 눌렀을 때 확인 이벤트를 발생시켜야 합니다(즉, 확인되었음을 상위 구성 요소에 알려야 합니다)
마찬가지로 , 대화 상자 구성 요소는 취소 이벤트를 발생시켜야 합니다
대화 상자 구성 요소는 사용자 정의 콘텐츠를 용이하게 하기 위해 슬롯을 제공해야 합니다

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

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

이로써 Dialog 컴포넌트 개발이 완료되었습니다.

<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>

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

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

전환 구성 요소가 nameprop을 받는 것을 볼 수 있는데 애니메이션을 완성하기 위해 CSS를 작성하는 방법은 무엇입니까? 매우 간단한 방법은 두 가지
key 클래스(css className) 스타일을 작성하는 것입니다.

<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>

좋은 애니메이션 효과를 개발하는 것은 매우 간단합니다. 전환 구성 요소의 이름은 슬라이드 다운이고 작성된 애니메이션의 주요 클래스 이름은 슬라이드 다운-엔터-액티브 및 슬라이드 다운-나가기-액티브입니다.

대화 상자를 캡슐화하고 MessageBox를 만듭니다

Element의 MessageBox 사용법은 다음과 같습니다.

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

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

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

Element의 사용법은 this.$confirm입니다. 그냥 Vue의 프로토타입에 걸어두기만 하면 되는 문제 아닌가요?
Element는 확인을 의미하고, catch는 취소를 의미하며, promise로 충분합니다

생각을 정리하고 코딩을 시작했습니다:

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

이 시점에서 어떻게 다시 호출할지 궁금할 것입니다. 사실 저는 캡슐화된 대화 상자를 작성하고 이름을 MessageBox로 지정했습니다.

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

그렇죠, 확인 및 취소시 콜백이 수행됩니다. 또한 코드에 MessageBox를 도입하는 Vue.extend에 대해서도 이야기하고 싶습니다.

저는 new MessageBox를 직접 사용하지 않고 new Ctur를 사용합니다. 왜냐하면 이것은 데이터(props뿐만 아니라)를 정의할 수 있기 때문입니다. 예를 들면:

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

현재 페이지에는 실제로 MessageBox가 없습니다. 다음을 실행해야 합니다.

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

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

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

document.body.appendChild(instance.$el)

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

요약

전환과 CSS를 통해 멋진 애니메이션을 구현해 보세요. 그중에서 전환 구성 요소의 이름은 CSS 작성을 위한 두 가지 주요 클래스인 [name]-enter-active 및 [name]-leave-active를 결정합니다.
constructor 상속( 어떻게 적절하다고 말할지 모르겠어요. 먼저 이렇게 말해 보겠습니다. 그런 다음 이 생성자를 통해 구성 요소의 관련 속성을 사용자 정의할 수 있습니다(사용 시나리오: js가 구성 요소를 호출합니다)

이때 제가 작성한 관련 코드는

https://github.com/mvpzx/elapse/tree/master/be/src/comComponents에 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!