请问navigatino和bookAvailable未定义哪里报错了
请问navigatino和bookAvailable未定义哪里报错了，都是照着码的，
3 回答
// 这是MenuBar.vue的源码
<template>
<div class="menu-bar">
<!-- 底部菜单栏 -->
<transition name="slide-up">
<div class="menu-wrapper" :class="{'hide-box-shadow': ifSettingShow || !ifTitleAndMenuShow}" v-show="ifTitleAndMenuShow">
<div class="icon-wrapper">
<span class="icon-menu icon" @click="showSetting(3)"></span>
</div>
<div class="icon-wrapper">
<span class="icon-progress icon" @click="showSetting(2)"></span>
</div>
<div class="icon-wrapper">
<span class="icon-bright icon" @click="showSetting(1)"></span>
</div>
<div class="icon-wrapper">
<span class="icon-a icon" @click="showSetting(0)">A</span>
</div>
</div>
</transition>
<transition name="slide-up">
<div class="setting-wrapper" v-show="ifSettingShow">
<div class="setting-font-size" v-if="showTag === 0">
<div class="preview" :style="{fontSize: fontSizeList[0].fontSize + 'px'}">A</div>
<div class="select">
<div class="select-wrapper" v-for="(item, index) in fontSizeList" :key="index" @click="setFontSize(item.fontSize)">
<div class="line"></div>
<div class="point-wrapper">
<div class="point" v-show="defaultFontSize === item.fontSize">
<div class="small-point"></div>
</div>
</div>
<div class="line"></div>
</div>
</div>
<div class="preview" :style="{fontSize: fontSizeList[fontSizeList.length - 1].fontSize + 'px'}">A</div>
</div>
<div class="setting-theme" v-else-if="showTag === 1">
<div class="setting-theme-item" v-for="(item, index) in themeList" :key="index" @click="setTheme(index)">
<div class="preview" :style="{background: item.style.body.background}" :class="{'no-border': item.style.body.background !== '#fff'}"></div>
<div class="text" :class="{'selected': index === defaultTheme}">{{ item.name }}</div>
</div>
</div>
<div class="setting-progress" v-else-if="showTag === 2">
<div class="progress-wrapper">
<input class="progress" type="range"
max="100"
min="0"
step="1"
@change="onProgressChange($event.target.value)"
@input="onProgressInput($event.target.value)"
:value="progress"
:disabled="!bookAvailable"
ref="progress" />
</div>
<div class="text-wrapper">
<span>{{ bookAvailable ? progress + '%' : '加载中...' }}</span>
</div>
</div>
</div>
</transition>
<content-view :ifShowContent="ifShowContent"
v-show="ifShowContent"
:navigation="navigation"
:bookAvailable="bookAvailable"
@jumpTo="jumpTo"></content-view>
<transition name="fade">
<div class="content-mask" v-show="ifShowContent" @click="hideContent"></div>
</transition>
</div>
</template>
<script type="text/ecmascript-6">
import ContentView from '@/components/Content'
export default {
components: {
ContentView
},
props: {
ifTitleAndMenuShow: {
type: Boolean,
default: false
},
fontSizeList: Array,
defaultFontSize: Number,
themeList: Array,
defaultTheme: Number,
bookAuailable: {
type: Boolean,
default: false
},
navigation: Object
},
data() {
return {
ifSettingShow: false,
showTag: 0,
progress: 0,
ifShowContent: false
}
},
methods: {
hideContent() {
this.ifShowContent = false
},
jumpTo(target) {
this.$emit('jumpTo', target)
},
// 拖动进度条时触发事件
onProgressInput(progress) {
this.progress = progress
this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
},
// 进度条松开后触发事件，根据进度条数值跳转到指定位置
onProgressChange(progress) {
this.$emit('onProgressChange', progress)
},
setTheme(index) {
this.$emit('setTheme', index)
},
setFontSize(fontSize) {
this.$emit('setFontSize', fontSize)
},
showSetting(tag) {
this.showTag = tag
if (this.showTag === 3) {
this.ifSettingShow = false
this.ifShowContent = true
} else {
this.ifSettingShow = true
}
},
hideSetting() {
this.ifSettingShow = false
}
}
}
</script>
举报
0/150
提交
取消
