uv-ui
Version:
基于vue3的移动端组件库
106 lines (105 loc) • 3.3 kB
JavaScript
import { ref as f, computed as I, watch as b, openBlock as h, createElementBlock as y, createElementVNode as H, normalizeStyle as N, unref as O, Fragment as C, renderList as E, toDisplayString as M } from "vue";
import { useThrottle as R } from "../../hooks/useThrottle.js";
import "../../hooks/useCountDown.js";
import "./picker-column.vue_vue_type_style_index_0_lang.js";
const $ = {
name: "UvPickerColumn"
}, F = /* @__PURE__ */ Object.assign($, {
props: {
list: {
type: Array,
default: () => []
},
keyName: {
type: [String, Number],
default: "value"
},
labelName: {
type: [String, Number],
default: "label"
},
value: {
type: [String, Number],
default: ""
},
columnsType: {
type: String
}
},
emits: ["change", "first-open"],
setup(v, { emit: s }) {
const l = v, a = f(null), S = I(() => typeof a.value == "number" ? {
transform: `translate(-50%, ${a.value}px)`
} : {
transform: "translate(-50%, -18px)"
}), t = f(0), m = ["gray", "#ccc", "#ddd", "#eee"], g = [0.96, 0.9, 0.88, 0.84];
function T(e) {
let u = "#000", n = 1;
const o = m.length - 1;
if (e > t.value) {
const r = e - t.value > o ? o : e - t.value - 1;
u = m[r], n = g[r];
} else if (e < t.value) {
const r = t.value - e > o ? o : t.value - e - 1;
u = m[r], n = g[r];
}
return { color: u, transform: `scale(${n})` };
}
function d() {
return l.list[t.value] || (t.value = l.list.length - 1, c(t.value)), l.list[t.value][l.keyName];
}
const p = f(""), c = (e) => {
a.value = -36 * e - 18;
};
b(() => l.list, (e) => {
l.columnsType === "cascade" ? (t.value = 0, c(0), s("first-open", e[0][l.keyName])) : (p.value = d(), s("first-open", p.value));
}, {
immediate: !0
}), b(() => l.value, (e) => {
if (e && e !== p.value) {
const u = l.list.findIndex((n) => n[l.keyName] === e);
u > -1 && (t.value = u, c(u), s("first-open", e));
}
}, {
immediate: !0
});
let k = null;
function Y(e) {
const u = a.value || -18;
k = e.touches[0].clientY - u;
}
function _(e) {
B(e);
}
function x() {
setTimeout(() => {
c(t.value);
}, 100);
}
const i = f(null), B = R((e) => {
a.value = e.touches[0].clientY - k, a.value > 36 ? a.value = 36 : a.value < -i.value.offsetHeight - 36 && (a.value = -i.value.offsetHeight - 36), t.value = Math.abs(Math.ceil(a.value / 36)), t.value <= 0 || a.value > 0 ? t.value = 0 : (t.value > l.list.length - 1 || a.value < -i.value.offsetHeight - 18) && (t.value = l.list.length - 1), s("change", d());
}, 20);
return (e, u) => (h(), y("div", {
class: "uv-picker-column",
onTouchstart: Y,
onTouchmove: _,
onTouchend: x
}, [
H("ul", {
class: "uv-picker-content-box",
ref_key: "pickerBoxRef",
ref: i,
style: N(O(S))
}, [
(h(!0), y(C, null, E(v.list, (n, o) => (h(), y("li", {
class: "uv-picker-content-item",
key: o,
style: N(T(o))
}, M(n[v.labelName]), 5))), 128))
], 4)
], 32));
}
});
export {
F as default
};