cube-slide嵌套问题,很困扰!!!

Question

App.vue

<template>
  <div id="app">
    <div class="tab-wrapper">
      <tab :tabs="tabs"></tab>
    </div>
  </div>
</template>

<script>
import Home from 'components/home/home'
import Products from 'components/products/products'
import Orders from 'components/orders/orders'
import Tab from 'components/tab/tab'

export default {
  data () {
    return {}
  },
  computed: {
    tabs () {
      return [
        {
          label: '首页',
          component: Home,
          data: {}
        },
        {
          label: '商品',
          component: Products,
          data: {}
        },
        {
          label: '订单',
          component: Orders,
          data: {}
        }
      ]
    }
  },
  created () {

  },
  methods: {

  },
  components: {
    Tab
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #app
    .tab-wrapper
      position: fixed
      bottom: 0
      left: 0
      right: 0
      height: 50px
      background-color: #ccc
</style>

tab.vue

<template>
  <div class="tab">
    <cube-tab-bar
      :useTansition="false"
      :show-slider="false"
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar">
    </cube-tab-bar>
    <div class="slide-wrapper">
      <cube-slide
        :loop=false
        :auto-play=false
        :show-dots=false
        :initial-index="index"
        ref="slide"
        :options="tabSlideOptions"
      >
        <cube-slide-item v-for="(tab,index) in tabs" :key="index">
          <component ref="component" :is="tab.component" :data="tab.data"></component>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'tab',
  props: {
    tabs: {
      type: Array,
      default () {
        return []
      }
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      index: this.initialIndex,
      tabSlideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0,
        direction: 'horizontal'
      }
    }
  },
  computed: {
    selectedLabel: {
      get () {
        return this.tabs[this.index].label
      },
      set (newVal) {
        this.index = this.tabs.findIndex((value) => {
          return value.label === newVal
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"

.tab
  display: flex
  flex-direction: column
  height: 100%
  .slide-wrapper
    position: fixed
    top: 0
    left: 0
    width: 100%
    bottom: 50px
</style>

home.vue

<template>
  <div class="tab">
    <cube-tab-bar
      :useTansition="false"
      :show-slider="false"
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar">
    </cube-tab-bar>
    <div class="slide-wrapper">
      <cube-slide
        :loop=false
        :auto-play=false
        :show-dots=false
        :initial-index="index"
        ref="slide"
        :options="tabSlideOptions"
      >
        <cube-slide-item v-for="(tab,index) in tabs" :key="index">
          <component ref="component" :is="tab.component" :data="tab.data"></component>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'tab',
  props: {
    tabs: {
      type: Array,
      default () {
        return []
      }
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      index: this.initialIndex,
      tabSlideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0,
        direction: 'horizontal'
      }
    }
  },
  computed: {
    selectedLabel: {
      get () {
        return this.tabs[this.index].label
      },
      set (newVal) {
        this.index = this.tabs.findIndex((value) => {
          return value.label === newVal
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"

.tab
  display: flex
  flex-direction: column
  height: 100%
  .slide-wrapper
    position: fixed
    top: 0
    left: 0
    width: 100%
    bottom: 50px
</style>

cslide.vue

<template>
    <cube-slide
      :loop=false
      :auto-play=false
      ref="slide"
      :options="slideOptions"
    >
      <cube-slide-item v-for="(item, index) in slideItems" :key="index">
        <a :href="item.url">
          <img :src="item.image">
        </a>
      </cube-slide-item>
    </cube-slide>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'cslide',
  props: {
    slideItems: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      slideOptions: {
        stopPropagation: true,
        probeType: 3,
        directionLockThreshold: 0,
        direction: 'horizontal'
      }
    }
  },
  methods: {
    changePage (current) {
      console.log('当前轮播图序号为:' + current)
    },
    clickHandler (item, index) {
      console.log(item, index)
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>

package.json

{
  "name": "3213",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "cube-ui": "~1.12.1",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-cube-ui": "^0.2.4",
    "vue-template-compiler": "^2.5.21"
  },
  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  }
}

vue.config.js

const webpack = require('webpack')
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': [
          './src/theme'
        ]
      }
    }
  },
  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: true
    }
  },
  chainWebpack (config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('api', resolve('src/api'))

    config.plugin('context')
      .use(webpack.ContextReplacementPlugin,
        [/moment[/\\]locale$/, /zh-cn/])
  }
}

现在的问题是,只要进入页面,cslide组件就无法做任何操作(不管是点击,还是滚动).关键是,如果我更新了home.vue中的滚动options的配置例如添加一个click: false,页面热更新后,就能正常使用了.
然后,再刷新页面,cslide组件又什么都不能用了.
文档仔细过了3编,
能试验的配置组合都试验过了
无解!!!
还有,如果再多放入一个cube-slide组件的话,直接就是没有任何反应,怎么改配置都没用
请老师帮忙看下,是什么问题?还是cube-slide不支持嵌套?

Answer 1

ustbhuangyi 2019-02-21 16:42:31

请提供一个 GitHub repo，最小化复现你的问题

• 提问者 诺丁山丶 #1

  你好,老师,代码已经上传到github上了,https://github.com/liuyielang/3213.git
  公告栏(cube-slide)是彻底没有反应,
  幻灯片(cube-slide)刚进入页面的时候无反应,修改click:false/true,或者更新了dom操作,又好了,然后,刷新页面又没有反应了.
  烦请老师帮忙看下我的代码那里写的不对,帮更正下,谢谢了.

• ustbhuangyi 回复 提问者 诺丁山丶 #2

  我调试了一下，可能是 cube-ui 里的 slide 组件样式有问题，我反馈给官方了。
  另外，是不能把 node_modules 目录上传到 GitHub 上的，建议你删了再更新一次，可以把你这个例子也给官方。

• 提问者 诺丁山丶 回复 ustbhuangyi #3

  好的,老师,node_modules已经删除了.