Vue 3的移动选择器视图 - vue3-scroll-picker

Vue 3的移动选择器视图 - vue3-scroll-picker
插件名称 vue3-scroll-picker
版本号 v0.1.15
发布时间 2021年1月22日
插件作者 HJ29

功能齐全的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)

  • 附加轮速