cc-element-components
Version:
该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历
178 lines (177 loc) • 6.51 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, unref, renderSlot } from "vue";
var index_vue_vue_type_style_index_0_scoped_true_lang = "";
var _export_sfc = (sfc, props) => {
for (const [key, val] of props) {
sfc[key] = val;
}
return sfc;
};
const _hoisted_1 = { class: "cc-split-container-right" };
const _sfc_main = /* @__PURE__ */ defineComponent({
props: {
direction: { default: "horizontal" },
size: { default: 0 },
min: { default: 0 },
max: { default: 1 }
},
emits: ["update:size", "move-start", "moving", "move-end"],
setup(__props, { emit: emits }) {
const props = __props;
const value = ref(props.size);
const container = ref(null);
const moving = ref(false);
const triggerStyle = computed(() => {
if (props.direction === "horizontal") {
return {
width: "6px",
height: "100%"
};
} else {
return {
width: "100%",
height: "6px"
};
}
});
const triggerBarStyle = computed(() => {
if (props.direction === "horizontal") {
return {
width: "4px",
height: "1px",
marginTop: "3px"
};
} else {
return {
height: "6px",
width: "1px",
marginRight: "3px"
};
}
});
const flexBasis = computed(() => `calc(${value.value * 100}% - 3px)`);
const mousedown = () => {
moving.value = true;
document.addEventListener("mousemove", mousemove);
document.addEventListener("mouseup", mouseup);
emits("move-start");
};
const mousemove = (e) => {
if (!moving.value)
return;
if (props.direction === "horizontal") {
let width = container.value.getBoundingClientRect().width;
let left = container.value.getBoundingClientRect().left;
value.value = (e.pageX - left) / width;
if (value.value <= props.min)
value.value = props.min;
if (value.value >= props.max)
value.value = props.max;
} else {
let height = container.value.getBoundingClientRect().height;
let top = container.value.getBoundingClientRect().top;
value.value = (e.pageY - top) / height;
if (value.value <= props.min)
value.value = props.min;
if (value.value >= props.max)
value.value = props.max;
}
emits("moving");
emits("update:size", value.value);
};
const mouseup = (e) => {
moving.value = false;
document.removeEventListener("mousemove", mousemove);
document.removeEventListener("mouseup", mouseup);
emits("move-end");
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "cc-split-container",
ref: (_value, _refs) => {
_refs["container"] = _value;
container.value = _value;
},
style: normalizeStyle({ flexDirection: __props.direction === "horizontal" ? "row" : "column" })
}, [
createElementVNode("div", {
class: "cc-split-container-left",
style: normalizeStyle({ flexBasis: unref(flexBasis) })
}, [
renderSlot(_ctx.$slots, "left", {}, void 0, true)
], 4),
createElementVNode("div", {
class: "cc-split-container-trigger",
style: normalizeStyle(unref(triggerStyle)),
onMousedown: mousedown
}, [
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper",
style: normalizeStyle(__spreadProps(__spreadValues({}, unref(triggerStyle)), { flexDirection: __props.direction === "horizontal" ? "column" : "row" }))
}, [
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4),
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4),
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4),
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4),
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4),
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4),
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4),
createElementVNode("div", {
class: "cc-split-container-trigger-wrapper-bar",
style: normalizeStyle(unref(triggerBarStyle))
}, null, 4)
], 4)
], 36),
createElementVNode("div", _hoisted_1, [
renderSlot(_ctx.$slots, "right", {}, void 0, true)
])
], 4);
};
}
});
var split = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2780c15c"]]);
var index = {
install(app) {
app.component("cc-split", split);
}
};
export { index as default };