vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
44 lines (43 loc) • 1.48 kB
JavaScript
import { defineComponent as w, useTemplateRef as y, createElementBlock as s, openBlock as a, normalizeStyle as r, unref as e, createElementVNode as l, Fragment as E, renderList as _, normalizeClass as b, toDisplayString as g } from "vue";
import { useWheelPicker as I } from "./hook/useWheelPicker.mjs";
const z = /* @__PURE__ */ w({
name: "WheelPicker",
__name: "index",
props: {
modelValue: {},
list: {},
width: { default: 80 },
itemHeight: { default: 30 },
label: { default: "label" },
value: { default: "value" },
theme: { default: "var(--app-theme)" }
},
emits: ["update:modelValue"],
setup(o, { emit: n }) {
const d = o, c = n, i = y("wheelEl"), { styles: u, selectedIndex: p, flattenedItems: f, listStyles: h, getItemLabel: k } = I(d, i, c);
return (S, m) => (a(), s("div", {
ref_key: "wheelEl",
ref: i,
class: "app-wheel-picker",
style: r(e(u))
}, [
m[0] || (m[0] = l("div", { class: "wheel-mask" }, [
l("div", { class: "wheel-mask-top" }),
l("div", { class: "wheel-mask-middle" }),
l("div", { class: "wheel-mask-bottom" })
], -1)),
l("div", {
class: "wheel-list",
style: r(e(h))
}, [
(a(!0), s(E, null, _(e(f), (v, t) => (a(), s("div", {
key: t,
class: b(["wheel-item", { "is-active": t === e(p) && t !== 0 }])
}, g(e(k)(v)), 3))), 128))
], 4)
], 4));
}
});
export {
z as default
};