插件名称 | 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)