Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When there are only two options, it feels strange #3

Open
yuangu opened this issue Feb 17, 2022 · 3 comments
Open

When there are only two options, it feels strange #3

yuangu opened this issue Feb 17, 2022 · 3 comments

Comments

@yuangu
Copy link

yuangu commented Feb 17, 2022

When there are only two options, it feels strange

@VanishMax
Copy link
Owner

@yuangu Could you please describe the issue in more details?

@yuangu
Copy link
Author

yuangu commented Feb 17, 2022

sorry for my english. here is this code . when options len Less than 8. appear some inverted items.
here this code.

<template>
  <div>
    <Picker :options="years" v-model="currentYear" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import Picker from 'vue-wheel-picker';
  
  function getYears () {
    const currentYear = new Date().getFullYear();
    const years = [];
    
    for (let i = currentYear - 1; i < currentYear + 2; i++) {
      years.push({
        value: i.toString(),
        text: i.toString(),
      });
    }
    
    return years;
  }
  
  export default Vue.extend({
    components: {
      Picker,
    },
    data () {
      const current = (new Date().getFullYear()).toString();
      return {
        years: getYears(),
        currentYear: {
          value: current,
          text: current,
        },
      };
    },
  });
</script>

<style>
  .picker {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    max-width: 80%;
    height: 300px;
    margin: 16px auto 0;
    background-color: #F8F8FA;
    border-radius: 4px;
    
    text-align: center;
    font-size: 18px;
    color: #bbbcc9;
  }
  
  .picker_chosen {
    background-color: #F8F8FA;
    border-top: 1px solid #dddde4;
    border-bottom: 1px solid #dddde4;
    color: #121212;
    font-size: 20px;
  }
</style>

@tepafril
Copy link

I faced the same issue. There is a weird animation when the list items are below 7.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants