个回答

• Sam

  2018-10-29 10:47:47

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

  0

• 番茄炒蛋不放糖_

  2018-10-30 15:18:58

  

  bookAvailable  ！！兄dei

  0

• 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>

  
  

  0