cc-element-components/comment/index.es.js

该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历

import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createVNode, renderSlot, createElementVNode, normalizeStyle, createElementBlock, toDisplayString, createCommentVNode } 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 = {
  key: 0,
  class: "cc-comment-author"
};
const _hoisted_2 = {
  key: 2,
  class: "cc-comment-datetime"
};
const _hoisted_3 = { key: 0 };
const _hoisted_4 = { style: { "margin-top": "20px" } };
const _sfc_main = /* @__PURE__ */ defineComponent({
  props: {
    author: null,
    avatar: null,
    content: null,
    datetime: null,
    align: { default: "left" }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      const _component_el_avatar = resolveComponent("el-avatar");
      const _component_el_col = resolveComponent("el-col");
      const _component_el_row = resolveComponent("el-row");
      return openBlock(), createBlock(_component_el_row, null, {
        default: withCtx(() => [
          createVNode(_component_el_col, {
            span: 2,
            style: { "margin-right": "20px" }
          }, {
            default: withCtx(() => [
              __props.avatar ? (openBlock(), createBlock(_component_el_avatar, {
                key: 0,
                src: __props.avatar
              }, null, 8, ["src"])) : renderSlot(_ctx.$slots, "avatar", { key: 1 }, void 0, true)
            ]),
            _: 3
          }),
          createVNode(_component_el_col, { span: 20 }, {
            default: withCtx(() => [
              createElementVNode("div", {
                style: normalizeStyle([{ "display": "flex" }, { justifyContent: __props.align === "left" ? "flex-start" : __props.author ? "space-between" : "flex-end" }])
              }, [
                __props.author ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.author), 1)) : renderSlot(_ctx.$slots, "author", {
                  key: 1,
                  class: "cc-comment-author"
                }, void 0, true),
                __props.datetime ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.datetime), 1)) : renderSlot(_ctx.$slots, "datetime", {
                  key: 3,
                  class: "cc-comment-datetime"
                }, void 0, true)
              ], 4),
              createElementVNode("div", null, [
                __props.content ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.content), 1)) : renderSlot(_ctx.$slots, "content", { key: 1 }, void 0, true)
              ]),
              _ctx.$slots.action ? (openBlock(), createElementBlock("div", {
                key: 0,
                class: "cc-comment-action",
                style: normalizeStyle([{ "display": "flex" }, { justifyContent: __props.align === "left" ? "flex-start" : "flex-end" }])
              }, [
                renderSlot(_ctx.$slots, "action", {}, void 0, true)
              ], 4)) : createCommentVNode("v-if", true),
              createElementVNode("div", _hoisted_4, [
                _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : createCommentVNode("v-if", true)
              ])
            ]),
            _: 3
          })
        ]),
        _: 3
      });
    };
  }
});
var comment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7947e55c"]]);
var index = {
  install(app) {
    app.component("cc-comment", comment);
  }
};
export { index as default };