功能齐全的Material Design波纹点击动画实现，可轻松用作Vue.js指令。

安装和下载：

# NPM
$ npm i vue3-scroll-picker

如何使用它：

1.导入ScrollPicker组件。

import ScrollPicker from 'vue3-scroll-picker';

2.注册组件。

const app = createApp(App);
app.use(ScrollPicker);
// or
export default {
  components: {
    ScrollPicker,
  },
};

3.将ScrollPicker组件添加到应用程序模板。

<template>
  <scroll-picker  
    :options="options" 
    v-model="selections"
  />
</template>

const myOptions = [
  [
    {
      label: "Option 1-1",
      value: "option11"
    },
    {
      label: "Option 1-2",
      value: "option12"
    },
  ],
  [
    {
      label: "Option 2-1",
      value: "option21"
    },
    {
      label: "B2",
      value: "option21"
    },
  ],
  // ...
];

import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  setup() {
    const state = reactive({
      options: emyOptions,
      selections: ['option21','option22'],
    });
    return {
      ...toRefs(state),
    };
  }
});

3.所有道具。

modelValue: {
  default: [],
  type: Array as PropType<Selection[]>
},
options: {
  default: [],
  type: Array as PropType<Option[][]>
},
activeClass: {
  default: "",
  type: String
},
inactiveClass: {
  default: "",
  type: String
},
activeStyle: {
  default: "",
  type: String
},
inactiveStyle: {
  default: "",
  type: String
}

变更日志：

v0.1.15（04/24/2021）

• 附加轮速

---

官网：https://github.com/HJ29/vue3-scroll-picker

演示：https://www.vue365.cn/code_demo.php?id=3980

GitHub下载：https://github.com/HJ29/vue3-scroll-picker/archive/master.zip