mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
64 lines (63 loc) • 2.06 kB
JavaScript
import { defineComponent as b, useModel as p, openBlock as m, createElementBlock as f, createElementVNode as s, normalizeStyle as n, unref as e, withModifiers as c, renderSlot as T, mergeModels as y } from "vue";
import { useHandler as V } from "./hooks.js";
const $ = ["data-disabled"], k = {
key: 0,
class: "round"
}, S = /* @__PURE__ */ b({
name: "MeSlider",
__name: "index",
props: /* @__PURE__ */ y({
max: { default: 100 },
min: { default: 0 },
styles: { default: () => ({
height: "",
radius: "",
lineBgc: ""
}) },
disabled: { type: Boolean, default: !1 },
isBtn: { type: Boolean, default: !1 }
}, {
modelValue: { default: 0 },
modelModifiers: {}
}),
emits: /* @__PURE__ */ y(["start", "move", "end"], ["update:modelValue"]),
setup(l, { emit: g }) {
const h = g, B = l, v = p(l, "modelValue"), { currentValue: d, onTouchstart: a, onTouchmove: i, onTouchend: r, onMousedown: u } = V({ props: B, emit: h, modelValue: v });
return (M, t) => (m(), f("div", {
class: "me-slider",
"data-disabled": l.disabled
}, [
s("p", {
class: "line",
style: n(`height:${l.styles.height};border-radius:${l.styles.radius};`)
}, [
s("span", {
style: n(`background:${l.styles.lineBgc};transform:translateX(-${e(d)}%);`)
}, null, 4)
], 4),
s("div", {
class: "drag",
style: n(`left:${100 - e(d)}%;`),
onTouchstart: t[0] || (t[0] = c(
//@ts-ignore
(...o) => e(a) && e(a)(...o),
["prevent"]
)),
onTouchmove: t[1] || (t[1] = //@ts-ignore
(...o) => e(i) && e(i)(...o)),
onTouchend: t[2] || (t[2] = //@ts-ignore
(...o) => e(r) && e(r)(...o)),
onMousedown: t[3] || (t[3] = c(
//@ts-ignore
(...o) => e(u) && e(u)(...o),
["prevent"]
))
}, [
l.isBtn ? T(M.$slots, "default", { key: 1 }) : (m(), f("span", k))
], 36)
], 8, $));
}
});
export {
S as default
};