vue.js - 悬停时更改自定义属性 || VUEJS

Question

尝试与VUEJS成为 friend 。卡在一些简单的东西上，无法用谷歌搜索。所以我在我的应用程序中使用 MuseUi 框架。好吧，我想做一件简单的事情，在悬停时更改每个特定元素的属性值

 <mu-paper :zDepth="1" v-on:mouseover=" ???? " class="searchBox">

例如，我需要在元素悬停时将 zDepth 更改为 3。我怎样才能做到这一点？

完整代码片段

<template>
<div>
    <div class="column is-one-quarter">
        <mu-paper :zDepth="paperHover" v-on:mouseover="changePaper" class="searchBox">
            <mu-text-field fullWidth="true" :hintText="searchHint" v-model="query" class="demo-radio"/><br/>
                <mu-radio label="Name" name="group" nativeValue="1" v-model="selected" class="demo-radio"/>
                <mu-radio label="Manager" name="group" nativeValue="2" v-model="selected" class="demo-radio"/>
                <mu-radio label="Department" name="group" nativeValue="3" v-model="selected" class="demo-radio"/>
                <mu-radio label="Stage" name="group" nativeValue="4" v-model="selected" class="demo-radio"/>
                <mu-radio label="Deadline" name="group" nativeValue="5" v-model="selected" class="demo-radio"/>
                <mu-radio label="Start Date" name="group" nativeValue="6" v-model="selected" class="demo-radio"/>
        </mu-paper>
    </div>
    <div class="column is-one-column">
        <mu-float-button icon="add" v-on:click="openModal"/>
    </div>
    <div class="column">
        <draggable v-model="projects" @start="drag=true" @end="drag=false">
            <transition-group name="list-complete staggered-fade" tad="ul" :css="false" :before-enter="beforeEnter" :enter="enter" :leave="leave">
                <li v-for="(project, index) in projectsComputed"  :key="project.name" :data-index="index" class="column is-one-third list-complete-item">
                    <mu-paper :zDepth="3">
                        <mu-icon-button icon="delete" class="delete-button"></mu-icon-button>
                        <article class="media">
                            <div class="media-content">
                                <div class="content">
                                    <div class="project-name has-text-centered">
                                        <span>{{project.name}}</span>
                                    </div>
                                    <mu-badge :content="project.stage.name" primary slot="right"/>
                                    <!--<div class="project-status has-text-centered">-->
                                        <!--<span>{{project.stage.name}}</span>-->
                                    <!--</div>-->
                                    <div class="project-desc-list has-text left">
                                        <span>Manager: </span> <span>{{project.manager.name}}</span>
                                    </div>
                                    <div class="project-desc-list has-text left">
                                        <span>Department: </span> <span>{{project.department.name}}</span>
                                    </div>
                                    <div class="project-desc-list has-text left">
                                        <span>Start Date: </span> <span>{{project.started_from}}</span>
                                    </div>
                                    <div class="project-desc-list has-text left">
                                        <span>Dealine: </span> <span>{{project.deadline}}</span>
                                    </div>
                                    <p class="project-description">
                                        {{project.description}}
                                    </p>
                                </div>
                            </div>
                        </article>
                    </mu-paper>
                </li>
            </transition-group>
        </draggable>
    </div>
    <div id="modal-ter"  :class="[isActive ? activeClass : '', modal]">
        <div class="modal-background" v-on:click="openModal"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Add New Project</p>
                <button v-on:click="openModal" class="delete"></button>
            </header>
            <section class="modal-card-body">
                <div class="column is-one-third">
                    <div class="field">
                        <label class="label">Project Name</label>
                        <p class="control">
                            <input class="input" v-model="newProject.name" type="text" placeholder="Text input">
                        </p>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="field">
                        <label class="label">Project Description</label>
                        <p class="control">
                            <input class="input" v-model="newProject.description" type="text" placeholder="Text input">
                        </p>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="field">
                        <label class="label">Start Date</label>
                        <p class="control">
                            <input class="input" v-model="newProject.started_from" type="text" placeholder="Text input">
                        </p>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="field">
                        <label class="label">Deadline</label>
                        <p class="control">
                            <input class="input" v-model="newProject.deadline" type="text" placeholder="Text input">
                        </p>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="field">
                        <label class="label">Manager</label>
                        <p class="control">
                            <input class="input" v-model="newProject.manager.name" type="text" placeholder="Text input">
                        </p>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="field">
                        <label class="label">Department</label>
                        <p class="control">
                            <input class="input" v-model="newProject.department.name" type="text" placeholder="Text input">
                        </p>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="field">
                        <label class="label">Stage</label>
                        <p class="control">
                            <input class="input" type="text" v-model="newProject.stage.name" placeholder="Text input">
                        </p>
                    </div>
                </div>
            </section>
            <footer class="modal-card-foot">
                <a v-on:click="createProject" class="button is-success">Save changes</a>
                <a class="button">Cancel</a>
            </footer>
        </div>
    </div>
</div>
</template>
<style scoped>
    .demo-radio {
        min-width: 8em;
    }
    .searchBox {
        padding: 2em;
    }
    .project-status {
        position: absolute;
        top: 0.3em;
        left: 0.3em;
        background-color: #ffdb57;
        padding: 0.2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border-radius: 0.3em;
    }
    .project-name {
        font-weight: 900;
    }
    .project-description {
        margin-top: 0.5em;
        padding-top: 1em;
        border-top: 1px solid lightgrey;
    }
    .project-desc-list span:first-of-type{
        font-weight: 900;
    }
    .box {
        position: relative;
    }
    .project-name {
        text-align: center;
    }
    .delete-button {
        background-color: rgba(255, 8, 8, 0.4);
        transition: all .25s ease-in;
        float: right;
        position: absolute;
        right: 0.3em;
        top: 0.3em;
    }

    .delete-button:hover, .delete-button:focus{
        background-color: rgba(255, 0, 0, 0.68);
    }

    .column{
        display: inline-block;
        padding: 1em;
    }

    .list-complete-item {
        transition: all 1s;
    }

    .list-complete-enter, .list-complete-leave-active {
        opacity: 0;
    }
</style>
<script >
    export default {
        data(){
            return {
                loading: false,
                isActive: false,
                paperHover: 3,
                modal: 'modal',
                searchHint: 'Search by ...',
                activeClass: 'is-active',
                query: "",
                selected: "",
                projects: [],
                newProject: {
                    name: '',
                    description: '',
                    started_from: '',
                    deadline: '',
                    manager: {
                        name: ''
                    },
                    department: {
                        name: ''
                    },
                    stage: {
                        name: ''
                    }
                },
            }
        },
        options: {
            segmentShowStroke: false
        },
        mounted() {
            this.getData();
        },
        computed: {
            projectsComputed: function () {
               var vm = this;
               if(this.selected == '1' || this.selected == ""){
                   this.searchHint = "Search by Name";
                   return this.projects.filter(function (project) {
                       return project.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                   })
               }else if(this.selected == '2'){
                   this.searchHint = "Search by Manager";
                   return this.projects.filter(function (project) {
                       return project.manager.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                   })
               }else if(this.selected == '3'){
                   this.searchHint = "Search by Department";
                   return this.projects.filter(function (project) {
                       return project.department.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                   })
               }else if(this.selected == '4'){
                   this.searchHint = "Search by Stage";
                   return this.projects.filter(function (project) {
                       return project.stage.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                   })
               }else if(this.selected == '5'){
                   this.searchHint = "Search by Deadline";
                   return this.projects.filter(function (project) {
                       return project.deadline.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                   })
               }else if(this.selected == '6'){
                   this.searchHint = "Search by Start Date";
                   return this.projects.filter(function (project) {
                       return project.started_from.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                   })
               }

            }
        },
        methods: {
            changePaper: function () {
              this.paperHover = 6 ;
            },
            beforeEnter: function (el) {
                el.style.opacity = 0
                el.style.height = 0
            },
            enter: function (el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function () {
                    Velocity(
                        el,
                        { opacity: 1, height: '1.6em' },
                        { complete: done }
                    )
                }, delay)
            },
            leave: function (el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function () {
                    Velocity(
                        el,
                        { opacity: 0, height: 0 },
                        { complete: done }
                    )
                }, delay)
            },
            getData() {
                this.loading = true;
                axios.get('/project/').then(({data}) => this.projects = data).then(() => this.loading = false)
            },
            openModal: function(){
                if(this.isActive){
                    this.isActive = false;
                }else {
                    this.isActive = true;
                }
            },
            createProject() {
                axios.post('project/store', this.newProject)
            }
        }
    }
</script>
enter code here

Answer 1

最简单的方法可能是将 mu-paper 组件包装在另一个可以封装悬停行为的组件中。

// MuPaperHover.vue

<template>
  <mu-paper :z-depth="zDepth" @mouseenter.native="zDepth = 3" @mouseleave.native="zDepth = 1">
    <slot/>
  </mu-paper>
</template>

<script>
  export default {
    data() {
      return {
        zDepth: 1,
      };
    },
  };
</script>

然后您可以使用 mu-paper-hover 代替 mu-paper。