@kyfe/fms-vue2-components 0.0.14 → 0.0.15

package/src/components/fms-text-more/fms-text-more.vue

@@ -0,0 +1,353 @@
+<template>
+  <div>
+    <div class="fms-text-more"
+         :style="`--expandLine:${expandLine}`">
+      <div ref="content"
+           class="fms-text-more-content"
+           :class="{ expanded: isExpand }"
+           :style="`font-size: ${fontSize}; font-family: ${fontFamily}`"
+           v-html="renderedContent"></div>
+      <div v-if="showExpand || showViewAll"
+           class="fms-text-more-icon"
+           @click="toggleIconClick">
+        <van-icon :name="isExpand || isShowPopup? 'arrow-up' : 'arrow-down'"
+                  size="12"
+                  color="#7158FF" />
+      </div>
+    </div>
+
+    <van-popup v-model="isShowPopup"
+               position="bottom"
+               round
+               close-on-click-overlay
+               :get-container="getContainer"
+               @click-overlay="closePopup">
+      <div class="fms-text-more-popup">
+        <div class="fms-text-more-popup-title">
+          <strong>{{ popupTitle }}</strong>
+          <van-icon name="cross"
+                    color="#9E9CB0"
+                    size="16"
+                    @click="closePopup" />
+        </div>
+        <div class="fms-text-more-popup-content"
+             :style="{ height: popupHeight, fontSize, fontFamily}"
+             v-html="popupContent"></div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import { Icon, Popup } from 'vant'
+
+  const FONT_FAMILY = '-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,STHeiti,Microsoft Yahei,Tahoma,Simsun,sans-serif'
+
+  /**
+   * 转义 HTML 特殊字符，防止 XSS 注入
+   * @param {String} str 原始文本
+   * @returns {String} 转义后的文本
+   */
+  function escapeHtml (str) {
+    return String(str == null ? '' : str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+  }
+
+  /**
+   * 计算文本在指定宽度下渲染的行数
+   * @param {String} text 原始文本（\n 表示换行）
+   * @param {Number} maxWidth 内容区域宽度
+   * @param {String} fontSize 字体大小
+   * @returns {Number} 行数
+   */
+  function getTextLine (text, maxWidth, fontSize = '12px') {
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
+    context.font = `${fontSize} ${FONT_FAMILY}`
+
+    let currentWidth = 0
+    let lines = 1
+    let i = 0
+
+    while (i < text.length) {
+      const char = text[i]
+      if (char === '\n') {
+        // 遇到换行符，增加行数并重置当前行宽
+        lines++
+        currentWidth = 0
+        i++
+        continue
+      }
+      const charWidth = context.measureText(char).width
+      if (currentWidth + charWidth > maxWidth) {
+        lines++
+        currentWidth = charWidth
+      } else {
+        currentWidth += charWidth
+      }
+      i++
+    }
+
+    return lines
+  }
+
+  /**
+   * 创建宽度变化监听器，仅在内容宽度变化时触发回调
+   * @param {Element} el 需要监听的元素
+   * @param {Function} callback 宽度变化回调
+   * @returns {ResizeObserver|null} 监听器实例
+   */
+  function createResizeObserver (el, callback) {
+    if (typeof ResizeObserver === 'undefined' || !el) return null
+    let lastWidth = el.offsetWidth
+    const observer = new ResizeObserver(entries => {
+      const width = entries[0] && entries[0].contentRect && entries[0].contentRect.width
+      if (width && width !== lastWidth) {
+        lastWidth = width
+        callback()
+      }
+    })
+    observer.observe(el)
+    return observer
+  }
+
+  export default {
+    name: 'FmsTextMore',
+    components: {
+      VanIcon: Icon,
+      VanPopup: Popup
+    },
+    props: {
+      // 事由内容，支持 \n 换行
+      content: {
+        type: String,
+        default: ''
+      },
+      // 显示展开行数， 默认 3 行
+      expandLine: {
+        type: Number,
+        default: 3
+      },
+      // 显示查看全文行数，默认6行
+      viewAllLine: {
+        type: Number,
+        default: 6
+      },
+      // 字体大小
+      fontSize: {
+        type: String,
+        default: '12px'
+      },
+      // 字体
+      fontFamily: {
+        type: String,
+        default: FONT_FAMILY
+      },
+      // 弹窗标题
+      popupTitle: {
+        type: String,
+        default: ''
+      },
+    },
+    data () {
+      return {
+        isExpand: false,
+        isShowPopup: false,
+        lineCount: 0,
+        contentWidth: 0,
+        resizeObserver: null,
+      }
+    },
+    computed: {
+      // 规范化换行符（\r\n -> \n），用于行数计算
+      normalizedContent () {
+        return String(this.content || '').replace(/\r\n/g, '\n')
+      },
+      // 内容区展示（转义后换行转为 <br/>）
+      renderedContent () {
+        return escapeHtml(this.normalizedContent).replace(/\n/g, '<br/>')
+      },
+      // 弹窗内容（每个换行拆分为独立段落）
+      popupContent () {
+        return `<p>${escapeHtml(this.normalizedContent).replace(/\n/g, '</p><p>')}</p>`
+      },
+      // 是否显示展开/收起（超过 3 行且不超过 6 行）
+      showExpand () {
+        return this.lineCount > this.expandLine && this.lineCount <= this.viewAllLine
+      },
+      // 是否显示查看全文（超过 6 行）
+      showViewAll () {
+        return this.lineCount > this.viewAllLine
+      },
+      // 弹窗内容区高度
+      popupHeight () {
+        const maxHeight = document.body.clientHeight * 0.7
+        return `${Math.ceil(Math.min(this.lineCount * 24 + 56, maxHeight))}px`
+      }
+    },
+    watch: {
+      content () {
+        this.$nextTick(this.recompute)
+      }
+    },
+    mounted () {
+      this.recompute()
+      window.addEventListener('resize', this.handleResize)
+      this.resizeObserver = createResizeObserver(this.$refs.content, this.handleResize)
+    },
+    beforeDestroy () {
+      window.removeEventListener('resize', this.handleResize)
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
+    },
+    methods: {
+      toggleIconClick () {
+        if (this.showExpand) {
+          this.toggleExpand()
+        }
+        if (this.showViewAll) {
+          this.openPopup()
+        }
+      },
+      /**
+       * 展开 / 收起切换
+       */
+      toggleExpand () {
+        this.isExpand = !this.isExpand
+      },
+      /**
+       * 打开查看全文弹窗
+       */
+      openPopup () {
+        this.isShowPopup = true
+      },
+      /**
+       * 关闭查看全文弹窗
+       */
+      closePopup () {
+        this.isShowPopup = false
+      },
+      /**
+       * 弹窗挂载容器
+       * @returns {Element} 挂载的 DOM 节点
+       */
+      getContainer () {
+        return document.body
+      },
+      /**
+       * 窗口尺寸变化处理：重置状态并重新测量
+       */
+      handleResize () {
+        this.isExpand = false
+        this.isShowPopup = false
+        this.recompute()
+      },
+      /**
+       * 动态获取内容区域真实宽度并计算行数
+       */
+      recompute () {
+        const el = this.$refs.content
+        if (!el) return
+        const width = el.offsetWidth
+        if (!width) {
+          // 组件尚未完成布局（可能被隐藏），延迟到下一帧重试一次
+          if (!this.measureRetried) {
+            this.measureRetried = true
+            this.$nextTick(this.recompute)
+          }
+          return
+        }
+        this.measureRetried = false
+        this.contentWidth = width
+        this.computeLineCount()
+      },
+      /**
+       * 根据内容与宽度计算文本行数
+       */
+      computeLineCount () {
+        this.lineCount = getTextLine(this.normalizedContent, this.contentWidth, this.fontSize)
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .fms-text-more {
+    display: flex;
+
+    .fms-text-more-content {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: var(--expandLine);
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+
+      &.expanded {
+        -webkit-line-clamp: unset;
+      }
+    }
+    .fms-text-more-icon {
+      margin-left: 4px;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  }
+
+  .fms-text-more-expand {
+    margin-top: 12px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    color: #9e9cb0;
+    font-size: 12px;
+    height: 16px;
+    cursor: pointer;
+
+    .van-icon {
+      margin-left: 4px;
+    }
+  }
+
+  .fms-text-more-more {
+    display: flex;
+    margin-top: 12px;
+    color: #9e9cb0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .fms-text-more-more-text {
+      margin-right: 4px;
+    }
+  }
+
+  .fms-text-more-popup {
+    .fms-text-more-popup-title {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 18px;
+      padding: 16px;
+      border-radius: 16px 16px 0 0;
+    }
+
+    .fms-text-more-popup-content {
+      line-height: 24px;
+      font-size: 15px;
+      padding: 0 16px 16px 16px;
+      overflow: auto;
+      color: #18153a;
+      word-break: break-word;
+    }
+  }
+</style>

package/src/components/fms-text-more/index.js

@@ -0,0 +1,7 @@
+import FmsTextMore from './fms-text-more.vue'
+
+FmsTextMore.install = function(Vue) {
+  Vue.component(FmsTextMore.name, FmsTextMore)
+}
+
+export default FmsTextMore

package/src/index.js

@@ -19,6 +19,8 @@ import FmsKsUpload from './components/fms-ks-upload/index'
 import FmsKsPicker from './components/fms-ks-picker/index'
 import FmsKsUploader from './components/fms-ks-uploader/index'
 import FmsApprovalHeader from './components/fms-approval-header/index'
+import FmsMoneySplit from './components/fms-money-split/index'
+import FmsTextMore from './components/fms-text-more/index'
 
 const components = [
   FmsCopyBox,
@@ -40,6 +42,8 @@ const components = [
   FmsKsSearchTipsNew,
   FmsKsPicker,
   FmsApprovalHeader,
+  FmsMoneySplit,
+  FmsTextMore,
 ]
 
 const install = function(Vue) {
@@ -70,6 +74,8 @@ export {
   FmsKsPicker,
   FmsKsUploader,
   FmsApprovalHeader,
+  FmsMoneySplit,
+  FmsTextMore,
 }
 // 全量导出
 export default {

package/dist/fms-ks-picker.766b55f9.js

@@ -1,61 +0,0 @@
-import { n as i } from "./plugin-vue2_normalizer.ed7092a9.js";
-const l = {
-  name: "FmsKsPicker",
-  props: {
-    value: {
-      type: String,
-      default: ""
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    required: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  data() {
-    return {
-      showPicker: !1
-    };
-  },
-  methods: {
-    showPickerFn() {
-      this.showPicker = !0;
-    },
-    onConfirm(s) {
-      const { code: e = "" } = s;
-      this.$emit("input", e, s), this.showPicker = !1;
-    }
-  }
-};
-var t = function() {
-  var e = this, r = e._self._c;
-  return r("div", { staticClass: "pick-box" }, [r("div", { staticClass: "pick-field-box", on: { click: e.showPickerFn } }, [r("ks-field", { attrs: { readonly: "", clickable: "", "input-align": "right", "error-message-align": "right", required: e.required, name: "picker", value: e.value, label: e.label, "right-icon": "arrow", rules: [{ required: e.required, message: `\u8BF7\u9009\u62E9${e.label}` }], placeholder: e.placeholder } })], 1), r("ks-popup", { attrs: { position: "bottom" }, model: { value: e.showPicker, callback: function(o) {
-    e.showPicker = o;
-  }, expression: "showPicker" } }, [r("ks-picker", { attrs: { "show-toolbar": "", columns: e.columns }, on: { confirm: e.onConfirm, cancel: function(o) {
-    e.showPicker = !1;
-  } } })], 1)], 1);
-}, n = [], a = /* @__PURE__ */ i(
-  l,
-  t,
-  n,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const u = a.exports;
-export {
-  u as F
-};