vue组件开发

1.vue库、插件查找：awesome-vue

2.在webpack中 通过js 引入图片，要使用  require('url')

data () {
    return {
      invTime: 2000,
      slides: [
        {
          src: require('../assets/slideShow/pic1.jpg'),
          title: 'xxx1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: 'xxx2',
          href: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: 'xxx3',
          href: 'http://xxx.xxx.com'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: 'xxx4',
          href: 'detail/forecast'
        }
      ]
    }
}

 

3.动画（transition元素，定义name属性）

<template>
    <div >
      <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
      <transition name="drop">
        <div class="dialog-content" v-if="isShow">
          <p class="dialog-close" @click="closeMyself">x</p>
          <slot>empty</slot>
        </div>
      </transition>
    </div>
</template>

<style scoped>
.drop-enter-active{
  /* 动画效果的切换在0.5s内完成 */
  transition:all .5s ease;
}
.drop-leave-active{
  transition:all .3s ease;
}
.drop-enter{
  /* 实现从上方落下 ，开始位置为-500*/
  transform: translateY(-500px);
}
.drop-leave-to{
  /* 实现向上收回 ，结束位置为-500*/
  transform: translateY(-500px);
}