02.26 组件间传值(controller-view)

最新推荐文章于 2020-02-26 12:08:31 发布

原创最新推荐文章于 2020-02-26 12:08:31 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue 组件通信

vuejs 同时被 2 个专栏收录

39 篇文章

订阅专栏

web前端

16 篇文章

订阅专栏

本文介绍了一个基于Vue.js的游戏应用案例，通过动态加载背景图片、控制按钮显示与隐藏等操作实现了一个简单的互动游戏。游戏根据随机数展示不同结果，并提供再次挑战的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.控制器

<template>
    <div class="hwd-content" v-cloak>
        <div class="bgBox">
            <img :src="bgImg[0].src" class="bgBoxImage">
        </div>
        <img v-show="startTag" src="" class="startArray">
        <div v-show="!flag" @click="startButtonDidClick" class="startEatBtn"></div>
        <v-dumplin :totalScore="knumber" v-on:btn-click="listenClick" v-show="showDumplin"></v-dumplin>
    </div>
</template>

<script>

    import Dumplin from '../../components/002/hwddumplings.vue'
    export default {
        data:function () {
            return {
                bgImg:[
                    {src:require('../../assets/002/01@2x.png')},
                    {src:require('../../assets/002/01@2x.png')},
                    {src:require('./400k.gif')},
                    ],
                btnImg:[
                    {src:require('../../assets/002/02@2x.png')},
                    {src:require('../../assets/002/02@2x.png')}
                ],
                isClicked:false,//控制按钮位置
                startTag:true,
                Number:0,
                flag:false,
                showDumplin:false,
                knumber:1000
            }
        },

        mounted:function () {
         var flag =  window.localStorage.getItem('token');
        },
        methods:{
            //开始按钮点击
            startButtonDidClick:function () {

                var num =  Math.ceil(Math.random() * 8);
                this.knumber = num;
                var self=this;
                self.flag = true;

                this.Number++;
                this.bgImg[0] = this.bgImg[2];
                this.startTag=false;
                this.isClicked = true;
                setTimeout(function () {
                    self.isClicked = false;
                },100)
                setTimeout(function () {
                    self.bgImg[0] = self.bgImg[1];
                    self.showDumplin=true;
                },6000)
            },

            listenClick:function (ID) {
                var type = parseInt(ID);
               if (type == 1){
                   this.flag=false;
                  this.showDumplin = false;
                   window.localStorage.setItem('token',0);
               }else {
                   this.showDumplin = false;
                   window.localStorage.setItem('token',1);
                   this.startButtonDidClick();
               }
            }
        },
        components: {
            'v-dumplin': Dumplin
        }

    }
</script>

<style>
    body{
        background: white;
    }
    .hwd-content{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .bgBoxImage{
      position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

    }
    .startButton{
        position: absolute;
        border: none;
        width: 100px;
        height: 100px;
        left: 50%;
        margin-left: -40px;
        bottom: 60px;
    }

    .startEatBtn{
        position: absolute;
        border: none;
        width: 100%;
        height: 150px;
        left: 0;
        background: transparent;
        bottom: 0;
    }
    .startArray{
        position: absolute;
        border: none;
        width: 50px;
        height: 50px;
        left: 50px;
        bottom: 120px;
    }
</style>

2.视图

<template>
    <div class="dum-result-view" @click="cardDidClick">
        <img :src="bgModel.src" class="bg-box-image">
        <div class="close-btn"  @click="closeDidClick">关闭</div>
        <div class="another-btn"  @click="anotherDidClick">再来一次</div>
    </div>

</template>

<script>
    export default {
        data:function () {
            return {
                bgModel:{src:require('../../assets/jiaozhi/hwd-hair.png')},
                bgImges:[
                    {},
                    {src:require('../../assets/jiaozhi/hwd-hair.png')},
                    {src:require('../../assets/jiaozhi/hwd-chicken.png')},
                    {src:require('../../assets/jiaozhi/hwd-durex.png')},
                    {src:require('../../assets/jiaozhi/hwd-jinzg.png')},
                    {src:require('../../assets/jiaozhi/hwd-lajiao.png')},
                    {src:require('../../assets/jiaozhi/hwd-money.png')},
                    {src:require('../../assets/jiaozhi/hwd-no.png')},
                    {src:require('../../assets/jiaozhi/hwd-no01.png')},
                ],
                number:0
            }
        },
        created:function () {
            var num =  Math.ceil(Math.random() * 8);
            var number = parseInt(num);
            this.bgModel = this.bgImges[number];

        },
        props: {
            totalScore: {
                type:Number
            },
            result: {
                type:Object,
                default:{}
            }
        },

        methods:{
            closeDidClick:function () {
                this.$emit('btn-click',1);
            },
            anotherDidClick:function () {

                this.$emit('btn-click',2);
            },
            randomNum:function (ID) {
            }
        },

        //监测数据变化
        watch:{
            totalScore:function (val, oldVal) {
                this.randomNum(val)
            },
            deep:true
        }
    }
</script>

<style>
    /*底部的答题结果显示*/
    .dum-result-view{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
    }
    .bg-box-image{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .close-btn{
        position: absolute;
        right: 0;
        top: 100px;
        width: 200px;
        height: 200px;
    }
    .another-btn{
       position: absolute;
        position: absolute;
        left: 0;
        bottom: 100px;
        width: 400px;
        height: 200px;
    }
</style>