Vue.js项目实战-多语种网站（租车）

电玩女神 2021-11-02 09:32 190阅读 0赞

**首先来看一下网站效果，想写这个项目的读者可以自行下载哦，地址：[https://github.com/Stray-Kite/Car][https_github.com_Stray-Kite_Car]：**

**![1257995-20190806192451240-537017018.png][]**

![1257995-20190806192515127-1810058637.png][]

![1257995-20190806192551269-504547483.png][]

![1257995-20190806192619357-762936254.png][]

在这个项目中，我们主要是为了学习语种切换，也就是右上角的 中文/English 功能的实现。

首先看一下模拟的后台数据src/config/modules/lang.js 文件中:

![1257995-20190806193136827-152684747.png][]![1257995-20190806193156273-1937382907.png][]

关键代码：

![1257995-20190806193532054-1964448264.png][]

1 export default {
      2   name: 'Homepage',
      3   components: {
      4     ScrollNumber
      5   },
      6   data () {
      7     return {
      8       lang: 'chinese',
      9       pageIndex: 0,
     10       stepIndex: 0
     11     }
     12   },
     13   ......其余代码 44   methods: {
     45     addClass (el, _class) {
         177     //切换语言
    178     toggleLang (lang) {
    179       this.lang = lang
    180       // this.animatePage()
    181     }
    182   },
    183   //以下几个computed是获取config文件夹里的数据
    184   computed: {
    185     langs () {
    186       return config.langs[this.lang]  //主要靠这里切换，这个切换的本质其实就是使用了另一套英文的数据（换了一套后台数据）
    187     },
    188     ......其余代码198   }
    199 }

最后给大家一波儿带注解的代码，方便理解：

Homepage.vue(CSS我就不给啦，因为这东西看着学一下就好):

1 <template>
      2   <div class="container">
      3 
      4 
      5     <div class="rc-header">
      6       
      7       <div class="rc-header-right">
      8         <a href="#" :class="{'is-active': this.lang === 'chinese'}" @click="toggleLang('chinese')">中文</a> /
      9         <a href="#" :class="{'is-active': this.lang === 'english'}" @click="toggleLang('english')">English</a>
     10       </div>
     11      
     12       <div class="rc-header-left">
     13         <img class="rc-logo" :src="media.LOGO_PATH">
     14         <img class="rc-slogan" :src="media.SLOGAN_PATH">
     15       </div>
     16     </div>
     17 
     18     
     19     <div class="swiper-container rc-body">
     20       <div class="swiper-wrapper">
     21 
     22         
     23         <div class="swiper-slide">
     24           <div class="rc-page rc-page01">
     25             
     26             <div class="rc-galaxy">
     27               <div class="rc-bg rc-layer-bg" ref="plbo"
     28                           :style="{backgroundImage: 'url(' + common.GALAXY_LAYER_BG + ')', top: layerEdge, bottom: layerEdge, left: layerEdge, right: layerEdge}">
     29             </div>
     30               <div class="rc-bg rc-layer-top" ref="plto"
     31                    :style="{backgroundImage: 'url(' + common.GALAXY_LAYER_TOP + ')'}">
     32               </div>
     33             </div>
     34 
     35             <div class="rc-content-wrapper">
     36               
     37               <div class="rc-text-wrapper" ref="ptwo"
     38                    :style="{visibility: pageIndex === 0 ? 'visible' : 'hidden'}" >
     39                 <h2>{
        {langs.PAGE_ONE_SLOGAN}}</h2>
     40                 
     41                 <scroll-number :size="isMobile ? 18 : 24" ref="psno">
     42                   <span slot="suffix" style="color: #c3c3c3;">{
        {langs.PAGE_ONE_SUB_SLOGAN}}</span>
     43                 </scroll-number>
     44               </div>
     45               <button class="btn btn-success btn-try"
     46                       :style="{visibility: pageIndex === 0 ? 'visible' : 'hidden'}"
     47                       ref="pbro">{
        {langs.TRY_LABEL}}</button>
     48             </div>
     49 
     50             
     51             <img :src="common.GALAXY_REAL_TOP" v-show="false">
     52             <img :src="common.GALAXY_REAL_BG" v-show="false">
     53           </div>
     54         </div>
     55 
     56         
     57         <div class="swiper-slide">
     58           <div class="rc-page rc-page02">
     59             <div class="rc-content-wrapper">
     60               <div
     61                 class="rc-text-wrapper"
     62                 :style="{visibility: pageIndex === 1 ? 'visible' : 'hidden'}"
     63                 ref="ptwt">
     64                 <h2>{
        {langs.PAGE_TWO_SLOGAN}}</h2>
     65               </div>
     66               <div class="rc-step-wrapper">
     67                 <div class="rc-step-stage">
     68                   <div class="swiper-container rc-step-container">
     69                     <div class="swiper-wrapper">
     70                       <div
     71                         v-for="(step, index) in langs.STEPS_PROFILE"
     72                         :key="index"
     73                         class="swiper-slide rc-step">
     74                         <div class="rc-step-content">
     75                           <h2 class="rc-step-title">{
        {langs.STEP_LABEL}} {
        {index + 1}}</h2>
     76                           <p class="rc-step-profile">{
        {step}}</p>
     77                           <button
     78                             class="btn"
     79                             ref="pbdt"
     80                             v-if="index === 0">{
        {langs.DOWNLOAD_LABEL}}</button>
     81                           <button
     82                             class="btn"
     83                             ref="pbat"
     84                             v-if="index === 1">{
        {langs.AUTH_LABEL}}</button>
     85                         </div>
     86                       </div>
     87                     </div>
     88                     <div class="swiper-scrollbar"></div>
     89                     <div class="swiper-button-next" v-if="!isMobile"></div>
     90                     <div class="swiper-button-prev" v-if="!isMobile"></div>
     91                   </div>
     92                 </div>
     93                 
     94                 <div class="rc-step-scene" v-if="!isMobile">
     95                   <div
     96                     :style="{backgroundImage: 'url(' + media.STEPS_ACTOR_PATH[stepIndex] + ')'}"
     97                     class="rc-bg rc-step-actor"></div>
     98                 </div>
     99               </div>
    100             </div>
    101           </div>
    102         </div>
    103 
    104         
    105         <div class="swiper-slide">
    106           <div class="rc-page rc-page03">
    107             <div class="rc-content-wrapper">
    108               <div
    109                 class="rc-text-wrapper"
    110                 :style="{visibility: pageIndex === 2 ? 'visible' : 'hidden'}"
    111                 ref="ptwth">
    112                 <h2>{
        {langs.PAGE_THREE_SLOGAN}}</h2>
    113               </div>
    114               <div class="rc-cars-gallery">
    115                 <div
    116                   v-for="(car, index) in langs.CARS_PROFILE"
    117                   :key="index"
    118                   class="rc-car">
    119                   <div class="rc-car-card" :title="langs.CARS_TOOLTIP">
    120                     <div class="rc-car-media">
    121                       <div
    122                         :style="{backgroundImage: 'url(' + common.CARS_PATH[index] + ')'}"
    123                         class="rc-bg rc-bg-scale rc-car-snapshot"></div>
    124                     </div>
    125                     <div class="rc-car-profile">
    126                       <h4>{
        {car.NAME}}</h4>
    127                       <div>{
        {langs.OWNER_LABEL}}: {
        {car.OWNER}}</div>
    128                       <div>{
        {langs.DATE_LABEL}}: {
        {car.DATE}}</div>
    129                     </div>
    130                   </div>
    131                 </div>
    132               </div>
    133             </div>
    134           </div>
    135         </div>
    136 
    137         
    138         <div class="swiper-slide">
    139           <div class="rc-page rc-page04">
    140             <div
    141               class="rc-text-wrapper"
    142               :style="{visibility: pageIndex === 3 ? 'visible' : 'hidden'}"
    143               ref="ptwf">
    144               <h2>{
        {langs.PAGE_FOUR_SLOGAN}}</h2>
    145             </div>
    146             <div class="rc-content-wrapper">
    147               <div class="rc-bg rc-drive-stage">
    148                 <div
    149                   :style="{backgroundImage: 'url(' + common.DRIVE_STAGE_ACTOR + ')'}"
    150                   class="rc-bg rc-actor-car" ref="pdcf"></div>
    151               </div>
    152             </div>
    153           </div>
    154         </div>
    155       </div>
    156       <div class="swiper-pagination" v-show="!isMobile"></div>
    157     </div>
    158   </div>
    159 </template>
    160 
    161 <script>
    162   /* eslint-disable */
    163   import Swiper from 'swiper'
    164   import 'swiper/dist/css/swiper.min.css'
    165   import 'animate.css/animate.min.css'
    166   import config from '../config'
    167   import ScrollNumber from '@/widgets/ScrollNumber.vue'
    168   export default {
    169     name: 'Homepage',
    170     components: {
    171       ScrollNumber
    172     },
    173     data () {
    174       return {
    175         lang: 'chinese',
    176         pageIndex: 0,
    177         stepIndex: 0
    178       }
    179     },
    180     beforeCreate () {
    181       /**
    182        * 旋转星空
    183        *  step 3: 计算可视区域对角线, 根据对角线长度撑开容器
    184        */
    185       let w = document.body.clientWidth
    186       let h = document.body.clientHeight
    187       this.layerEdge = 'calc(50% - ' + Math.ceil(Math.sqrt(w * w + h * h) / 2) + 'px)'
    188     },
    189     mounted () {
    190       this.$nextTick(function () {
    191         let _self = this
    192         /* eslint-disable no-new */
    193         new Swiper('.rc-body', {
    194           speed: 800,
    195           direction: 'vertical',
    196           paginationClickable: true,
    197           mousewheel: true,
    198           pagination: {
    199             el: '.swiper-pagination'
    200           },
    201           on: {
    202             slideChangeTransitionEnd () {
    203               _self.pageIndex = this.activeIndex
    204               _self.animatePage()
    205             }
    206           }
    207         })
    208         this.initPage()
    209       })
    210     },
    211     methods: {
    212       addClass (el, _class) {
    213         let elClassArr = el.className.split(' ') //用单个空格分割
    214         let classArr = _class.split(' ')         //同上
    215         classArr.forEach(item => {
    216           // 如果elClassArr中没有这个元素（类型），那么添加进去
    217           if (elClassArr.indexOf(item) === -1) {
    218             elClassArr.push(String(item))
    219           }
    220         })
    221         //添加完后本属性后面要有一个空格隔开
    222         el.className = elClassArr.join(' ')
    223         return el
    224       },
    225       removeClass (el, _class) {
    226         let elClassArr = el.className.split(' ')
    227         let classArr = _class.split(' ')
    228         classArr.forEach(item => {
    229           let index = elClassArr.indexOf(item)
    230           if (index > -1) {
    231             elClassArr.splice(index, 1)
    232           }
    233         })
    234         el.className = elClassArr.join(' ')
    235         return el
    236       },
    237       bindAnimation (el, x) {
    238         let _self = this
    239         // 监听动画结束事件
    240         let events = [
    241           'webkitAnimationEnd',
    242           'mozAnimationEnd',
    243           'MSAnimationEnd',
    244           'oanimationend',
    245           'animationend'
    246         ]
    247         _self.addClass(el, x + ' animated')
    248         events.forEach(event => {
    249           let func = function () {
    250             events.forEach(item => {
    251               el.removeEventListener(item, func)
    252             })
    253             _self.removeClass(el, x + ' animated')
    254           }
    255           //增加事件监听，如果时间结束，那么再利用fun函数移除监听的事件和添加进来的新类（class属性）
    256           el.addEventListener(event, func)
    257         })
    258       },
    259       initPage01 () {
    260         setTimeout(() => {
    261           /**
    262            * 旋转星空
    263            *  step 4: 采用真实图片替换代理图片
    264            */
    265           this.$refs.plto.style.backgroundImage = 'url(' + this.common.GALAXY_REAL_TOP + ')'
    266           this.$refs.plbo.style.backgroundImage = 'url(' + this.common.GALAXY_REAL_BG + ')'
    267         }, 2000)
    268         this.animatePage01() //动画效果(数字上升)
    269       },
    270       //第二页
    271       initPage02 () {
    272         let _self = this
    273         let pbdt = this.$refs.pbdt[0]
    274         let pbat = this.$refs.pbat[0]
    275         let bindAnimation = this.bindAnimation
    276         new Swiper('.rc-step-container', {
    277           speed: 600,
    278           scrollbar: {
    279             el: '.swiper-scrollbar',
    280             draggable: true
    281           },
    282           navigation: {
    283             nextEl: '.swiper-button-next',
    284             prevEl: '.swiper-button-prev'
    285           },
    286           on: {
    287             slideChangeTransitionEnd () {
    288               if (this.activeIndex === 0) {
    289                 bindAnimation(pbdt, 'tada')
    290               } else if (this.activeIndex === 1) {
    291                 bindAnimation(pbat, 'tada')
    292               }
    293               _self.stepIndex = this.activeIndex
    294             }
    295           }
    296         })
    297       },
    298       initPage03 () {},
    299       initPage04 () {},
    300 
    301       //初始化四个界面方法
    302       initPage () {
    303         this.initPage01()
    304         this.initPage02()
    305         this.initPage03()
    306         this.initPage04()
    307       },
    308 
    309       animatePage01 () {
    310         this.bindAnimation(this.$refs.ptwo, 'fadeIn')
    311         this.bindAnimation(this.$refs.pbro, 'fadeIn')
    312         this.$refs.psno.$emit('start')
    313       },
    314       animatePage02 () {
    315         this.bindAnimation(this.$refs.ptwt, 'fadeInDown')
    316       },
    317       animatePage03 () {
    318         this.bindAnimation(this.$refs.ptwth, 'flipInY')
    319       },
    320       animatePage04 () {
    321         this.bindAnimation(this.$refs.ptwf, 'jackInTheBox')
    322         setTimeout(() => {
    323           this.bindAnimation(this.$refs.pdcf, 'rc-arrive')
    324         }, 600)
    325       },
    326       // QA: 函数本是对象
    327       animatePage (index) {
    328         [
    329           this.animatePage01,
    330           this.animatePage02,
    331           this.animatePage03,
    332           this.animatePage04
    333         ][index || this.pageIndex]()
    334       },
    335       //切换语言
    336       toggleLang (lang) {
    337         this.lang = lang
    338         // this.animatePage()
    339       }
    340     },
    341     //以下几个computed是获取config文件夹里的数据
    342     computed: {
    343       langs () {
    344         return config.langs[this.lang]
    345       },
    346       media () {
    347         return config.media[this.lang]
    348       },
    349       common () {
    350         return config.common
    351       },
    352       // 判断移动端，无需记住，会用就好，返回值为bool值
    353       isMobile () {
    354         return 这个就不给了，这个直接用就好了355       }
    356     }
    357   }
    358 </script>
    359 
    360 <style scoped>
    361 </style>

widgets/ScrollNumber.vue（数字增长）:

1 <template>
     2   <div class="scroll-number" :style="{fontSize: size + 'px'}">
     3     <slot name="prefix"></slot>
     4     <span class="number">{
        {value}}</span>
     5     <slot name="suffix"></slot>
     6   </div>
     7 </template>
     8 
     9 <script>
    10 import TWEEN from 'tween.js'
    11 export default {
    12   name: 'ScrollNumber',
    13   data () {
    14     return {
    15       value: 0,
    16       animation: null
    17     }
    18   },
    19   props: {
    20     total: {
    21       type: Number,
    22       default: 15374
    23     },
    24     size: {
    25       type: Number,
    26       default: 24
    27     }
    28   },
    29   mounted () {
    30     this.$nextTick(function () {
    31       const animate = function (time) {
    32         requestAnimationFrame(animate)
    33         TWEEN.update(time)
    34       }
    35       requestAnimationFrame(animate)
    36       let _self = this
    37       // 增长起始值，从0开始
    38       let surface = {value: 0}
    39       // 增加从0增长到total动画1600为时间
    40       this.animation = new TWEEN.Tween(surface).to({value: _self.total}, 1600)
    41       this.animation.easing(TWEEN.Easing.Exponential.Out).onUpdate(() => {
    42         _self.value = Math.floor(surface.value)
    43       })
    44       // 监听父组件通讯事件
    45       this.$on('start', () => {
    46         surface.value = 0
    47         this.animation.start()
    48       })
    49     })
    50   }
    51 }
    52 </script>
    53 
    54 <style scoped>
    55   .number {
         
    56     display: inline-block;
    57     min-width: 40px;
    58     color: orangered;
    59     text-align: center;
    60     font-weight: 600;
    61   }
    62 </style>

注：其中TWEEN的用法我找到了一篇比较不错的文章，地址：[https://www.jianshu.com/p/164538a89939][https_www.jianshu.com_p_164538a89939]

转载于:https://www.cnblogs.com/Trojan00/p/11311544.html

[https_github.com_Stray-Kite_Car]: https://github.com/Stray-Kite/Car
[1257995-20190806192451240-537017018.png]: /images/20211101/3dec7456f31e440e8d38346c61ea0d95.png
[1257995-20190806192515127-1810058637.png]: /images/20211101/7c39039bea9e46d29005b5d985257857.png
[1257995-20190806192551269-504547483.png]: /images/20211101/2b305df520d645f38e846d86ec476a38.png
[1257995-20190806192619357-762936254.png]: /images/20211101/57e7751a62c7469eaeadc34f8e44044b.png
[1257995-20190806193136827-152684747.png]: https://img2018.cnblogs.com/blog/1257995/201908/1257995-20190806193136827-152684747.png
[1257995-20190806193156273-1937382907.png]: /images/20211101/e4d259aef37c4817995ca813ae851775.png
[1257995-20190806193532054-1964448264.png]: /images/20211101/5388cfbb88b5457da11529d8c6ab858f.png
[https_www.jianshu.com_p_164538a89939]: https://www.jianshu.com/p/164538a89939