去哪儿App Vue 2.X —— 开发笔记（七）

在日常开发中，我们往往需要在项目中加入一些基础动画，以提升用户体验。本文将介绍如何在去哪儿App Vue 2.X项目中加入渐隐渐现的动画，并封装为组件供后续复用。

渐隐渐现的动画组件封装

1. 创建组件

在项目中创建一个名为FadeAnimation.vue的组件文件：

<template>
  <transition name="fade-animation">
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation'
};
</script>

2. 编写动画样式

在main.js文件中，引入FadeAnimation.vue组件并定义其动画样式：

import FadeAnimation from './components/FadeAnimation.vue';

Vue.component('FadeAnimation', FadeAnimation);

Vue.config.globalProperties.$fadeAnimation = {
  name: 'fade-animation',
  mode: 'out-in',
  css: false,
  leave: true,
  enterActiveClass: 'fade-enter-active',
  leaveActiveClass: 'fade-leave-active'
};

Slot组件的应用

1. 插入外部组件

在需要添加动画效果的组件中，可以使用<slot>标签将外部组件插入进来：

<template>
  <div>
    <FadeAnimation>
      <my-component></my-component>
    </FadeAnimation>
  </div>
</template>

2. 传递动画参数

在<FadeAnimation>组件中，可以通过传递props参数来控制动画效果：

<template>
  <transition name="fade-animation" :mode="fadeMode" :leave="fadeLeave">
    <slot></slot>
  </transition>
</template>

<script>
export default {
  props: {
    fadeMode: {
      type: String,
      default: 'out-in'
    },
    fadeLeave: {
      type: Boolean,
      default: true
    }
  }
};
</script>

Vue项目的接口联调

前后端联调

在Vue项目中进行接口联调时，需要考虑前后端通信的方式。

1. 本地服务器

如果后端服务器在本地，可以使用以下方法：

axios.get('http://localhost:3000/api/user')
  .then(res => {
    console.log(res.data);
  });

2. 跨域代理

如果后端服务器不在本地，需要使用跨域代理工具，如CORS（跨域资源共享）或JSONP（JSON with padding），才能进行跨域请求。

// 使用CORS
const proxy = 'https://cors-anywhere.herokuapp.com/';
axios.get(proxy + 'http://example.com/api/user')
  .then(res => {
    console.log(res.data);
  });