Vue.jsでiOSのネイティブピッカーのようなものを実装する「vue-smooth-picker」

by kabanoki

HTML

<div id="app">
<smooth-picker ref="smoothPicker" :data="data" :change="dataChange"></smooth-picker>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/smooth-picker.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

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

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const SmoothPicker = window['SmoothPicker'].default; 
Vue.use(SmoothPicker);
new Vue({
  el: '#app',
  data: {
    data: [
      {
        currentIndex: 0,
        flex: 3,
        list: [
          'Plan A - free', 'Plan B - $50', 'Plan C - $100'
        ],
        onClick: this.clickOnPlan,
        textAlign: 'center',
        className: 'row-group'
      },
      {
        divider: true,
        flex: 1,
        text: 'product',
        textAlign: 'center',
        className: 'divider'
      },
      {
        currentIndex: 2,
        flex: 3,
        list: [
          '1 * A item', '2 * A items', '3 * A items', '4 * A items', '5 * A items'
        ],
        onClick: this.clickOnProduct,
        textAlign: 'center',
        className: 'item-group'
      }
    ]
  },
  methods: {
    dataChange: function(gIndex, iIndex){
      console.log('change');
      console.log(gIndex, iIndex);
    }
  }
});