我正在使用颜色色板插件here,该插件定义了自定义Vue元素。

我还遵循this example来实现基于JavaScript的滚动条。

我的.vue文件如下:

<script>元素:

export default {
  name: "ProjectTask",
  data: function() {
     return { }
 },
 methods:
    .
    .
    .
    .
  ,
  mounted() {
    const rightBtn = document.querySelector('#right-button');
    const leftBtn = document.querySelector('#left-button');

    rightBtn.addEventListener("click", function(event) {
       const conent = document.querySelector('#content');
       conent.scrollLeft += 300;
       event.preventDefault();
    });

    leftBtn.addEventListener("click", function(event) {
      const conent = document.querySelector('#content');
      conent.scrollLeft -= 300;
      event.preventDefault();
    });
  }
}


<templete>元素:

  <div class="leftScroll" >
     <button id="left-button"> swipe left </button>
  </div>
  <div class="ColorsWraper2 col-lg-8" id="content">
          <swatches v-model="Project.color" :colors="color_picker" shapes="circles" inline></swatches>
  </div>
  <div class="rightScroll">
     <button id="right-button"> swipe right </button>
  </div>


<style>元素:

.ColorsWraper2 {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}


插件的组件应出现在两个按钮之间(向左/向右)。

但是,它对我不起作用!

最佳答案

我假设您的意思是要在按钮之间使色样居中-这是通过使用CSS Flexbox(Can I Use: CSS Flexbox)完成的。

如果您想确切了解我的工作及其原因,请查看以下步骤。否则,请跳到代码示例部分,在其中我对所做的工作进行简要评论。



第1步:激活CSS flexbox


我将<template>中的整个滑块包装在div .scroll-slider中。
接下来,我将其设置为使用flex display: flex并设置flex-direction: row
此步骤的关键部分是设置align-items: center,该键垂直对齐中间的项目(尤其是按钮),并防止按钮填充高度。


步骤2:防止色标溢出(和包裹)。

此步骤分为两个部分。


消除外部包装程序.colors-wrapper上的溢出-这很容易overflow: hidden;。您应该在外部包装器上添加边距和填充,因为这将在调整大小时产生更准确的(所需)结果。
防止内部包装.colors-wrapper-inner溢出。这是我使用您的方法来消除溢出和包装的地方:


.colors-wrapper-inner {
    white-space: nowrap;
    overflow: hidden;
}


步骤3:修正按钮大小。


在这一点上,您可能已经注意到按钮已被压缩-通常看起来很奇怪。幸运的是,简单的解决方法是使用flex-shrink禁用flex-shrink: 0




程式码范例

JSFiddle:https://jsfiddle.net/SamJakob/st45o0kb/

StackOverflow片段:



// This is equvilent to import (using this because JSFiddle doesn't support npm)
Vue.component('swatches', VueSwatches.default);

new Vue({
  name: "ProjectTask",
  el: "#app",
  data() {
    return {
      color: "#1CA085"
    }
  },
  methods: {

    swipeRight: function() {
      const content = document.querySelector('#content');
      content.scrollLeft += 300;
    },

    swipeLeft: function() {
      const content = document.querySelector('#content');
      content.scrollLeft -= 300;
    }

  },
  mounted() {
    const rightBtn = document.querySelector('#right-button');
    const leftBtn = document.querySelector('#left-button');
  }
})

/* General Styles - please ignore */

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}


/* Wrapper styling */

.scroll-slider {
  /* Step 1: Setup a flexbox in the row-direction. */
  display: flex;
  flex-direction: row;
  /* This aligns the elements in the center
      (and prevents the buttons being full height) */
  align-items: center;
}

.colors-wrapper {
  /* Step 2.1: Make sure the swatches wrapper doesn't show any overflow. */
  overflow: hidden;
  /* An extra touch; add some margin around the color swatches. */
  margin: 0 10px;
}


/* Step 2.2: Make sure the inner swatches wrapper doesn't overflow */

.colors-wrapper-inner {
  white-space: nowrap;
  overflow: hidden;
}


/* Step 3: Make the buttons display at their normal size. */

.scroll-button-wrapper {
  /* This means the buttons won't shrink - which is why this works. */
  flex-shrink: 0;
}

<!-- Imports - please ignore -->
<link href="https://unpkg.com/vue-swatches@1.0.2/dist/vue-swatches.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-swatches@1.0.2/dist/vue-swatches.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<!-- This would go inside your <template> element. -->
<div id="app">
  <div class="scroll-slider">

    <div class="scroll-button-wrapper">
      <!-- You can use the '@click' property to bind a method to the click event.  -->
      <button class="scroll-button" id="left-button" @click="swipeLeft"> swipe left </button>
    </div>

    <div class="colors-wrapper">

      <div class="colors-wrapper-inner" id="content">
        <swatches v-model="color" shapes="circles" inline></swatches>
      </div>

    </div>

    <div class="scroll-button-wrapper">
      <button class="scroll-button" id="right-button" @click="swipeRight"> swipe right </button>
    </div>

  </div>
</div>

07-24 09:43
查看更多