請問navigatino和bookAvailable未定義哪里報錯了
請問navigatino和bookAvailable未定義哪里報錯了，都是照著碼的，
Zzkung
2018-10-28
3 回答
舉報
0/150
提交
取消
2018-10-29
你好，應(yīng)該是MenuBar組件中沒有定義navigatin和bookAvailable變量，所以引用不到
2018-10-30
bookAvailable? ！！兄dei
2018-10-30
// 這是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)
? ? },
? ? // 拖動進度條時觸發(fā)事件
? ? onProgressInput(progress) {
? ? ? this.progress = progress
? ? ? this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
? ? },
? ? // 進度條松開后觸發(fā)事件，根據(jù)進度條數(shù)值跳轉(zhuǎn)到指定位置
? ? 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>