<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <GoodsList @click="onClick"/> <GoodsDetail01 v-show= "active === 'GoodsDetail01'" /> <GoodsDetail02 v-show= "active === 'GoodsDetail02'" /> </div> </template> <script> import GoodsList from './components/goodsList.vue'; import GoodsDetail01 from './components/goodsDetail01.vue'; import GoodsDetail02 from './components/goodsDetail02.vue'; // import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data(){ return{ active: 'GoodsList' }; }, methods:{ onClick(name){ this.name = name; } }, components: { // HelloWorld, GoodsList, GoodsDetail01, GoodsDetail02 } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>这是vue.app,如何实现点击跳转
时间: 2023-06-17 11:07:42 浏览: 196
你可以在 `GoodsList` 组件中定义一个 `click` 事件,并通过 `$emit` 方法将要跳转的组件名称传递给父组件 `App`。然后在 `App` 组件中定义一个 `onClick` 方法,用于接收子组件传递过来的组件名称,并将其赋值给 `active` 属性,用于控制显示哪个组件。具体实现可以参考下面的代码:
```html
<template>
<div>
<div class="goods" v-for="item in goodsList" :key="item.id" @click="goToDetail(item)">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
name: 'GoodsList',
data() {
return {
goodsList: [
{ id: 1, name: '商品1' },
{ id: 2, name: '商品2' },
{ id: 3, name: '商品3' },
],
};
},
methods: {
goToDetail(item) {
this.$emit('click', item.id === 1 ? 'GoodsDetail01' : 'GoodsDetail02');
}
}
};
</script>
```
```html
<template>
<div id="app">
<GoodsList @click="onClick"/>
<GoodsDetail01 v-show="active === 'GoodsDetail01'" />
<GoodsDetail02 v-show="active === 'GoodsDetail02'" />
</div>
</template>
<script>
import GoodsList from './components/GoodsList.vue';
import GoodsDetail01 from './components/GoodsDetail01.vue';
import GoodsDetail02 from './components/GoodsDetail02.vue';
export default {
name: 'App',
data() {
return {
active: 'GoodsList',
};
},
methods: {
onClick(name) {
this.active = name;
},
},
components: {
GoodsList,
GoodsDetail01,
GoodsDetail02,
},
};
</script>
```
阅读全文
相关推荐















将以下代码修改为响应式布局修改页面分辨率时布局仍然保持原样,不出现滚动条<template>
XX公司
XX云综合管理平台
<el-row :gutter="20">
<el-col v-for="(app, index) in apps" :key="index" :xs="24" :sm="12" :md="6" :lg="6">
{{ app.name }}
{{ app.name }}
</el-col>
</el-row>
</template>
<script>
export default {
name: "Home",
data() {
return {
hoverIndex: -1,
apps: [{
name: '智慧应用',
icon: 'el-icon-cpu',
url: 'index'
},
{
name: '运行监测',
icon: 'el-icon-monitor',
url: ''
},
{
name: 'AI仿真',
icon: 'el-icon-data-analysis',
url: ''
},
{
name: '数据中台',
icon: 'el-icon-data-board',
url: ''
}
],
redirect: undefined,
devicePixelRatio: null,
contentStyle: {}
}
},
methods: {
goIndex() {
this.$router.replace({
path: "Index"
})
}
}
}
</script>
<style scoped>
.energy-platform {
box-sizing: border-box;
padding: 8rem 10rem;
width: 100%;
/* height: 100vh; */
min-height: 100vh;
background-image: url('../assets/image/bg.png');
/* 背景图片设置 */
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
filter: brightness(1);
}
.header {
text-align: left;
font-style: italic;
color: #fff;
font-size: 40px;
}
.company-name {
margin-bottom: 30px;
}
.company-name,
.platform-name {
text-align: left;
font-weight: bold;
margin-bottom: 20px;
color: #fff;
}
.gradient-bar {
height: 4px;
background: linear-gradient(to right, #29b0dd, #2aaed9, #ffffff);
width: 260px;
margin-bottom: 90px;
}
.app-container {
margin: 0 auto;
}
.app-card {
height: 260px;
width: 80%;
background: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.img-item2 {
width: 100%;
}
.app-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15);
}
.app-icon {
font-size: 50px;
color: #333;
margin-bottom: 40px;
transition: all 0.3s ease;
}
.app-card:hover .app-icon {
color: #fff;
}
.app-title {
font-size: 22px;
font-weight: bold;
color: #333;
transition: all 0.3s ease;
}
.app-card:hover .app-title {
color: #000;
}
/* 响应式调整 */
@media (max-width: 768px) {
.company-name {
font-size: 40px;
}
.platform-name {
font-size: 20px;
}
.app-card {
height: 120px;
width: 100%;
}
.app-icon {
font-size: 30px;
margin-bottom: 10px;
}
.app-title {
font-size: 16px;
}
.gradient-bar {
margin-bottom: 40px;
}
}
/* 响应式调整 */
@media (max-width: 1366px) {
.energy-platform {
padding: 150px 100px;
}
.app-card {
width: 90%;
}
}
/* 响应式调整 */
@media (max-width: 1024px) {
.energy-platform {
padding: 150px 200px;
}
.app-card {
width: 100%;
}
}
</style>


<template>
<group class="items">
高级
</group>
<scroller class="date-content">
<inline-calendar
ref="calendar"
@on-change="onChange"
@on-view-change="onViewChange"
class="inline-calendar-demo"
:end-date="this.endDate"
:show.sync="show"
v-model="value"
:range="range"
:show-last-month="showLastMonth"
:show-next-month="showNextMonth"
:highlight-weekend="highlightWeekend"
:return-six-rows="return6Rows"
:hide-header="hideHeader"
:hide-week-list="hideWeekList"
:replace-text-list="replaceTextList"
:weeks-list="weeksList"
:render-function="buildSlotFn"
:disable-past="disablePast"
:disable-future="disableFuture"
:disable-weekend="disableWeekend">
</inline-calendar>
<group class="items">
<cell class="booklist-wrap">
已预订列表
</cell>
</group>
<group class="items choosetime">
<cell v-for="(event, index) in demoEvents" :key = "index"
primary="content" :title="event.startTime+'-'+event.endTime"
align-items="flex-start" >
{{event.userId}}
{{event.userPhone}}
{{event.title}}
</cell>
</group>
</scroller>
<x-button plain @click.native="goRoom" type="default" style="border-radius:99px;">预订</x-button>
<alert v-model="show" @on-show="onShow" @on-hide="onHide">
{{bookTip}}
确认
</alert>
</template>
<script>
// import Calendar from './base/CCalendar.vue'
import axios from 'axios'
// import $ from "jquery"
import moment from 'moment' // 格式化时间
import { Flexbox, FlexboxItem,Cell,CellBox,Group,Datetime, PopupPicker,Picker,XInput,XButton, InlineCalendar,Radio,Alert } from 'vux'
let selectTime = '' // 选中的时间变量
let selectRoom = '' // 选中的会议室
let selectArea = '' // 选中的地区
export default {
// components: {
// calendar: Calendar
// },
data () {
return {
show: true,
value: '',
listValue: '',
range: false,
showLastMonth: true,
showNextMonth: true,
highlightWeekend: false,
return6Rows: true,
hideHeader: false,
hideWeekList: false,
replaceTextList: {},
replace: false,
changeWeeksList: false,
weeksList: [],
useCustomFn: false,
buildSlotFn: () => '',
disablePast: true,
disableFuture: false,
disableWeekend: false,
showTimeSpace:false,
value3: [],
endDate:'',
startTime: '',
endTime: '',
demoEvents: [],// 预定列表
selectArea: '',// 选中的地区
selectRoom: '',// 选中的会议室
DepartList: [],// 地区列表
MeetingRoomList: [],// 会议室列表
show:false,
bookTip:''//预定失败提示信息
}
},
components: {
Flexbox,
FlexboxItem,
Cell,
CellBox,
Group,
Datetime,
PopupPicker,
Picker,
XInput,
XButton,
InlineCalendar,
Radio,
Alert
},
beforeMount (to,from, next){
window.com.setTitle('预订会议室')
},
computed: {
sporsorTitle: {
get () {
return this.$store.state.form.sporsorTitle
},
set (val) {
this.$store.dispatch('FORM_SporsorTitle',val)
}
},
sporsorType: {
get () {
return this.$store.state.form.sporsorType
},
set (val) {
this.$store.dispatch('FORM_SporsorType',val)
}
},
conferRoomId: {
get () {
return this.$store.state.form.conferRoomId
},
set (val) {
this.$store.dispatch('FORM_ConferRoomId',val)
}
},
flagUpSporsor: {
get () {
return this.$store.state.form.flagUpSporsor
},
set (val) {
this.$store.dispatch('FORM_FlagUpSporsor',val)
}
},
sporsorId: {
get () {
return this.$store.state.form.sporsorId
},
set (val) {
this.$store.dispatch('FORM_SporsorId',val)
}
}
},
watch: {
replace (val) {
this.replaceTextList = val ? {
'TODAY': '今'
} : {}
},
useCustomFn (val) {
this.buildSlotFn = val ? (line, index, data) => {
return /8/.test(data.date) ? '' : ''
} : () => ''
},
changeWeeksList (val) {
this.weeksList = val ? ['日', '一', '二', '三', '四', '五', '六 '] : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
},
methods: {
onHide () {
this.show=false;
},
onShow () {
this.show=true;
},
//会议地点改变
changePicker() {
var urlPath = ''
if(this.value != '') {
urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+this.value
} else {
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD')
urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+nowDate
}
// console.log('urlPath:'+urlPath)
axios.get(urlPath).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({
userId:temp.data[i].userId,
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm'),
userPhone:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取列表失败'
this.show = true;
// app.toast("获取列表失败!")
}
});
},
onViewChange (val, count) {
// alert('on view change:'+val + ',' + count)
},
onChange (val) {
selectTime = val
if(this.value3[1] != undefined) {
// console.log('url:' + config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime)
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({
userId:temp.data[i].userId,
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm'),
userPhone:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取列表失败'
this.show = true;
// app.toast("获取列表失败!")
}
});
}
},
chooseDepartment (paramkey) { // 根据地区编号获取会议室列表
selectArea = paramkey
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomListByAreaId?areaId='+paramkey).then((data) => {
var temp = data.data
if(temp.code === '0') {
this.MeetingRoomList = temp.data
} else {
this.bookTip = '获取会议室列表失败'
this.show = true;
// app.toast('获取会议室列表!')
}
});
},
chooseBookingRoom (eventroomId) { //根据会议室编号和选定日期获取预定列表
selectRoom = eventroomId
if(selectTime === '') {// 选定了会议室,没选定日期
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD')
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+eventroomId+'&orderDate='+nowDate).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
// var ss = ''
// if(temp.data[i].stateShow == '1') {
// ss = '进行中'
// } else if(temp.data[i].stateShow == '2') {
// ss = '正常'
// }
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({userName:temp.data[i].userName,
userPhone:temp.data[i].userPhone,
// stateShow:ss,// 状态
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm')
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取会议室列表失败'
this.show = true;
// app.toast('获取会议室失败!')
}
});
} else {// 选定了会议室,选定日期
// alert("value: " + obj.value + ',selectTime:' + selectTime)
}
},
//跳转到会议室预定
goRoom () {
var choice_time = ''
if(this.value != '') {
var dateObj = new Date()
choice_time = this.value + ' ' + dateObj.getHours()
} else {
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD HH')
choice_time = nowDate
}
var timeString = moment(window.com.convertDateFromStrings(choice_time + ':00:00')).format('YYYY-MM-DD HH:mm')
if(this.value3.length != 0) {
this.$router.push({path:'bookingRoom',query:{roomId:this.value3[1],conferenceRoomId:this.$route.query.conferenceRoomId,timeStart:timeString,timeEnd:timeString}})
} else {
this.bookTip = '请点击选择会议室'
this.show = true;
// app.toast('请选择会议室!')
}
},
//跳到高级搜索
goSearchPage: function() {
this.$router.push({path:'conferenceRoomSearch'})
}
},
mounted () {
let dq=new Date();
let dqtime=dq.getFullYear()+'-'+(dq.getMonth()+2)+'-'+dq.getDate();
this.endDate=dqtime;
if(window.localStorage.getItem('userId') != null && window.localStorage.getItem('userId') != undefined) {
// 获取地区和会议室名称数据
// console.log('url:'+config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList')
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList').then((data) => {
var temp = data.data
if(temp.code === '0') {
this.DepartList = temp.data
} else {
this.bookTip = '获取地区列表失败'
this.show = true;
// app.toast('获取地区列表失败!')
}
});
} else {
window.location.href = "http://dwz.cn/1IooUbPb"
}
}
}
</script>
<style lang="less" src="./booking.less"></style> 这块代码我需要优化一个功能点,即如9:00-18:00之间会议室有空闲时间的就在日期底部显示一个小绿点


