问答详情
源自:3-11 阅读进度功能实现

请问navigatino和bookAvailable未定义哪里报错了

https://img1.mukewang.com/5bd5ae5700018ffd04890890.jpg

请问navigatino和bookAvailable未定义哪里报错了,都是照着码的,

提问者:Zzkung 2018-10-28 20:42

个回答

  • Sam
    2018-10-29 10:47:47

    你好,应该是MenuBar组件中没有定义navigatin和bookAvailable变量,所以引用不到

  • 番茄炒蛋不放糖_
    2018-10-30 15:18:58

    https://img3.mukewang.com/5bd8059a0001742e19200904.jpg

    bookAvailable  !!兄dei

  • Zzkung
    2018-10-30 10:30:11

    // 这是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>