尝试与VUEJS成为朋友。卡在一些简单的东西上，无法google它。所以我在我的应用程序中使用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
答案 0 :(得分：2)
最简单的方法可能是将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。
答案 1 :(得分：0)
我不熟悉MuseUI。但是，我写了Vue.js training course。在Vue，您的“????”区域是，应该是一个JavaScript表达式。典型的做法是在Vue实例上调用一个方法，然后更新特定元素的属性值。没有更多细节，很难提供具体细节。
底线是，“????”可以是JavaScript表达式。