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