@vuux/editor
Version:
Vue Nuxt 富文本编辑器
49 lines (48 loc) • 1.62 kB
JavaScript
import { defineComponent as v, ref as u, createElementBlock as f, openBlock as _, createElementVNode as s, unref as e, normalizeStyle as d } from "vue";
import { useColor as h } from "./hook/useColor.mjs";
const C = { class: "color-picker-canvas" }, k = { class: "color-square" }, E = { class: "hue-bar" }, x = { class: "color-code" }, S = /* @__PURE__ */ v({
__name: "color",
emits: ["update:modelValue", "close"],
setup(y, { emit: p }) {
const m = p, n = u(null), r = u(null), { state: t, handleSave: a, startHueDrag: c, startSquareDrag: i } = h(n, r, m);
return (g, o) => (_(), f("div", C, [
s("div", k, [
s("canvas", {
ref_key: "squareCanvasEl",
ref: n,
width: "200",
height: "200",
onMousedown: o[0] || (o[0] = //@ts-ignore
(...l) => e(i) && e(i)(...l))
}, null, 544),
s("div", {
class: "is-circle",
style: d({ left: `${e(t).circleX}px`, top: `${e(t).circleY}px` })
}, null, 4)
]),
s("div", E, [
s("canvas", {
ref_key: "hueCanvasEl",
ref: r,
width: "200",
height: "10",
onMousedown: o[1] || (o[1] = //@ts-ignore
(...l) => e(c) && e(c)(...l))
}, null, 544),
s("div", {
class: "is-circle",
style: d({ left: `${e(t).hueX}px`, top: "50%" })
}, null, 4)
]),
s("div", x, [
s("p", {
onClick: o[2] || (o[2] = //@ts-ignore
(...l) => e(a) && e(a)(...l))
}, "确认")
])
]));
}
});
export {
S as default
};