<click-scroll>  <template slot="content">    <div>      我是實際要展示的內容啊啊啊啊啊……    </div>  </template></click-scroll>

<template> <div class="hui-hui" :id="domId.compID">  <!--向左滑動-->  <div class="hui-drag-left"     :class="{'hui-drag-action': drag.isLeft}"     v-if="drag.isShow"     @click="onClickLeft">  </div>  <!--展示的內容-->  <div :id="domId.containerID"     class="hui-container"     v-show="hasContent"     ref='container'     @mousedown="onMouseDown">   <slot name="content"></slot>  </div>  <div v-show="!hasContent" class="hui-no-data">暫無數據</div>  <!--向右滑動-->  <div class="hui-drag-right"     :class="{'hui-drag-action': drag.isRight}"     v-if="drag.isShow"     @click="onClickRight">  </div> </div></template><script>import store from '@/store'export default { name: 'cards-container', data () {  return {   hasContent: false,   domId: {    compID: `hui-comp-${+new Date()}`,    containerID: `hui-container-${+new Date()}`   },   drag: {    isShow: false,    isLeft: false,    isRight: false   }  } }, methods: {  judgeHasContent () {   this.hasContent = this.$slots.hasOwnProperty('content')  },  judgeDragIsShow () {   const compWidth = this.getCompWidth()   const contextMaxWidth = this.getContextMaxWidth()   if (compWidth >= contextMaxWidth) {    this.drag.isShow = false   } else {    this.drag.isShow = true   }   return this.drag.isShow  },  judgeIsLeft () {   const containerDom = this.getContainerDom()   const contentWidth = this.getContextMaxWidth()   if (!containerDom && !contentWidth) this.drag.isLeft = false   if (containerDom.offsetWidth + containerDom.scrollLeft >= contentWidth) {    this.drag.isLeft = false   } else {    this.drag.isLeft = true   }  },  judgeIsRight () {   const containerDom = this.getContainerDom()   if (!containerDom) this.drag.isRight = false   if (containerDom.scrollLeft === 0) {    this.drag.isRight = false   } else {    this.drag.isRight = true   }  },  getCompDom () {   return document.getElementById(this.domId.compID) || null  },  getCompWidth () {   const compDom = this.getCompDom()   if (!compDom) {    return 0   } else {    return compDom.offsetWidth   }  },  getContainerDom () {   return document.getElementById(this.domId.containerID) || null  },  getContextMaxWidth () {   if (!this.$refs.hasOwnProperty('container')) {    return 0   } else {    const widthArr = []    for(let e of this.$refs['container'].childNodes) {     widthArr.push(e.offsetWidth)    }    return Math.max(...widthArr)   }  },  onMouseDown (e) { // 手動滑動   const containerDom = this.getContainerDom()   if (!containerDom) return   let scrollLeft = containerDom.scrollLeft   const containerLeft = containerDom.offsetLeft   let ev = e || window.event   let offsetLeft = ev.clientX - containerLeft   document.onmousemove = (e) => {    let ev = e || window.event    let nowOffsetLeft = ev.clientX - containerLeft    containerDom.scrollLeft = scrollLeft + (offsetLeft - nowOffsetLeft)    this.judgeIsLeft()    this.judgeIsRight()   }   document.onmouseup = () => {    document.onmousemove = null    document.onmouseup = null   }  },  onClickLeft () { // 向左滑動   if (!this.hasContent && !this.drag.isLeft) return   const containerDom = this.getContainerDom()   if (!containerDom) return   const scrollWidth = containerDom.offsetWidth   containerDom.scrollLeft += scrollWidth   this.judgeIsLeft()   this.judgeIsRight()  },  onClickRight () { // 向右滑動   if (!this.hasContent && !this.drag.isRight) return   const containerDom = this.getContainerDom()   if (!containerDom) return   const scrollWidth = containerDom.offsetWidth   containerDom.scrollLeft -= scrollWidth   this.judgeIsLeft()   this.judgeIsRight()  } }, updated () {  this.$nextTick(() => {   this.judgeHasContent()   const isShow = this.judgeDragIsShow()   if (isShow) {    this.judgeIsLeft()    this.judgeIsRight()   }  }) }, mounted () {  this.judgeHasContent()  const isShow = this.judgeDragIsShow()  if (isShow) {   this.judgeIsLeft()   this.judgeIsRight()  } }}</script>