Merge pull request #40 from CurryPaste/main

组件更新

Author: phpjavac

example/.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/docs
 
 
 # local env files

example/package-lock.json

@@ -5,25 +5,36 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:self": "npm run build:ellipsis",
+    "build:cropper": "vue-cli-service build --target lib --name vueCropper ./src/components/UploadImg.vue",
+    "build:ellipsis": "vue-cli-service build --target lib --name ellipsis ./src/components/EllipsisFun.vue",
+    "build:fluctuation": "vue-cli-service build --target lib --name vueFluctuation ./src/components/Fluctuation.vue",
+    "build:docs": "vue-cli-service build --dest docs",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "getTypes": " vue-cli-service getTypes"
   },
   "dependencies": {
     "@ant-design-vue/use": "^0.0.1-alpha.8",
+    "@findsoft/vue-fluctuation": "^1.0.3",
+    "@findsoft/vue-fluctuation-v3": "^1.0.0",
     "ant-design-vue": "^2.0.0-rc.5",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "cropperjs": "^1.5.11",
     "mockjs": "^1.1.0",
     "moment": "^2.29.1",
     "register-service-worker": "^1.7.1",
+    "to-top-vue": "^1.0.7",
     "vue": "^3.0.0",
+    "vue-cropperjs": "^5.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.19",
     "@types/mockjs": "^1.0.3",
+    "@types/vue-cropperjs": "^4.1.1",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",

example/package.json

@@ -0,0 +1,102 @@
+<template lang="pug">
+a-tooltip(:title="text")
+  span.ellipsis(
+    v-if='type === "length"'
+    ) {{showText}}
+
+  span.ellipsis.text-flow-ellipsis-multiple(
+    v-else-if='type === "rows"'
+    :style='typeRows()') {{showText}}
+
+  .ellipsis.box(
+    v-else-if='type === "height"'
+    ref='ellipsis'
+    :style='typeHeight()') {{showText}}
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import { Tooltip } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    aTooltip: Tooltip,
+  },
+  props: {
+    /** 要省略的文本 */
+    text: {
+      type: String,
+      default: '',
+    },
+    /** 省略类型 length、rows、height */
+    type: {
+      type: String,
+      default: 'length',
+    },
+    /** 值 */
+    number: {
+      type: Number,
+      default: 1,
+    },
+
+    /**  */
+  },
+  setup(props) {
+    const ellipsis = ref(null);
+    const showText = ref(''); /** 组件上显示的文本 */
+
+    const typeLength = () => {
+      if (props.number < props.text.length) return `${props.text.substr(0, props.number)}...`;
+      return props.text;
+    };
+    const typeRows = () => ({
+      '-webkit-line-clamp': props.number,
+    });
+    const typeHeight = () => ({
+      height: `${props.number}px`,
+    });
+
+    onMounted(() => {
+      let res = '';
+      if (props.type === 'length') res = typeLength();
+      if (['rows', 'height'].includes(props.type)) res = props.text;
+      showText.value = res;
+
+      console.log(ellipsis.value);
+    });
+
+    return {
+      ellipsis,
+      showText,
+      typeRows,
+      typeHeight,
+    };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+/** 多行省略 */
+.text-flow-ellipsis-multiple
+  word-break break-all
+  text-overflow ellipsis
+  display -webkit-box
+  -webkit-box-orient: vertical
+  // -webkit-line-clamp: 2
+  overflow hidden
+/** 高度省略 */
+.box
+  position relative
+  overflow hidden
+  &:after
+    content "..."
+    position absolute
+    bottom 0px
+    right 0px
+    padding-left 10px
+    background transparent
+    // background -webkit-linear-gradient(left, transparent, #fff 55%)
+    // background -o-linear-gradient(right, transparent, #fff 55%)
+    // background -moz-linear-gradient(right, transparent, #fff 55%)
+    // background linear-gradient(to right, transparent, #fff 55%)
+</style>

example/src/assets/img/exhibition/ell.png

@@ -0,0 +1,207 @@
+<template lang="pug">
+.main
+  template(v-if='showAll')
+    a-tooltip(:title="text")
+      span.ellipsis(
+        ref='ellipsis'
+        ) {{showText}}
+  template(v-else)
+    span.ellipsis(
+      ref='ellipsis'
+      ) {{showText}}
+</template>
+
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { defineComponent, onMounted, ref } from 'vue';
+import { Tooltip } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    aTooltip: Tooltip,
+  },
+  props: {
+    /** 长文本 */
+    text: {
+      type: String,
+      default: '',
+    },
+    /** 超出时显示的内容 */
+    ellipsisType: {
+      type: String,
+      default: '...',
+    },
+    /** 悬停是否显示全文内容 */
+    showAll: {
+      type: Boolean,
+      default: true,
+    },
+
+    /** 字体大小 这个api也不重要 */
+    fontSize: {
+      type: Number,
+      default: 14,
+    },
+
+    /** 限制的高度 */
+    limitHeightNumber: {
+      type: Number,
+      default: 0,
+    },
+    /** 行高 直接获得实际高度，不从api获得 */
+    // lineHeight: {
+    //   type: Number,
+    //   default: 18,
+    // },
+    /** 是否通过 高度限制 */
+    isHeightLimit: {
+      type: Boolean,
+      default: false,
+    },
+
+    /** 限制的行数 —— 行数*行高 与 容器对比 */
+    limitLineNumber: {
+      type: Number,
+      default: 1,
+    },
+    /** 是否通过 行数控制 */
+    isLineLimit: {
+      type: Boolean,
+      default: false,
+    },
+
+    /** 是否根据长度限制 */
+    isCharLimit: {
+      type: Boolean,
+      default: false,
+    },
+    /** 长度 */
+    maxLength: {
+      type: Number,
+      default: 20,
+    },
+
+  },
+  setup(props) {
+    const ellipsis = ref(null);
+    const showText = ref(''); /** 组件上显示的文本 */
+
+    /** getFontWidth 只处理了汉字。字母和数字也要优化 */
+    const getFontWidth = () => {
+      let FW = 0;
+      /** 如果没传，dom获取 */
+      const e = document.createElement('span');
+      const t = document.createTextNode('啊');
+      e.appendChild(t);
+      document.body.appendChild(e);
+      const domRect = (e as any).getBoundingClientRect();
+      const { left: FL, right: FR } = domRect;
+      if (FL && FR) FW = FR - FL;
+      document.body.removeChild(e);
+
+      return FW;
+    };
+
+    /** getLineHeight 高度是一致的。不需要考虑字母汉字 */
+    const getLineHeight = () => {
+      let FH = 0;
+      /** 如果没传，dom获取 */
+      const e = document.createElement('span');
+      const t = document.createTextNode('啊');
+      e.appendChild(t);
+      document.body.appendChild(e);
+      const domRect = (e as any).getBoundingClientRect();
+      // console.log(domRect, 'domRect');
+      const { height: DRH } = domRect;
+      if (DRH) FH = DRH;
+      document.body.removeChild(e);
+
+      return FH;
+    };
+
+    /** lengthLimit */
+    const lengthLimit = () => {
+      const { text, maxLength, ellipsisType } = props;
+      if (text.length > maxLength) return text.substr(0, maxLength) + ellipsisType;
+      return text;
+    };
+
+    /** lineLimit */
+    const lineLimit = () => {
+      const {
+        text, limitLineNumber, ellipsisType, fontSize,
+      } = props;
+      /** 获得单个字体大小 */
+      const FW = fontSize || getFontWidth(); // 字体宽度&字体大小
+
+      /** 获得父容器宽度 */
+      const containerWidth = (ellipsis.value as any).parentNode.offsetWidth;
+
+      /** 获得每行文字个数 —— 需要优化 字母和数字情况 */
+      const strNum = Math.floor(containerWidth / FW);
+
+      /** 判断长度 */
+      if (strNum * limitLineNumber < text.length) {
+        return text.substr(0, strNum * limitLineNumber - 1) + ellipsisType;
+      }
+      return text;
+    };
+
+    /** heightLimit */
+    const heightLimit = () => {
+      const {
+        text, limitHeightNumber, ellipsisType, fontSize,
+      } = props;
+
+      /** 行高度 */
+      const FH = getLineHeight();
+
+      /** 获得单个字体大小 */
+      const FW = fontSize || getFontWidth(); // 字体宽度&字体大小
+
+      /** 获得父容器宽度 */
+      const containerWidth = (ellipsis.value as any).parentNode.offsetWidth;
+
+      /** 获得每行文字个数 —— 需要优化 字母和数字情况 */
+      const strNum = Math.floor(containerWidth / FW);
+
+      /** 计算最大行数 如果一行都不够，返回1行 */
+      const maxLen = Math.floor(limitHeightNumber / FH) || 1;
+      // console.log(maxLen, 'maxLen', ellipsisType);
+
+      /** 判断长度 */
+      if (strNum * maxLen < text.length) {
+        return text.substr(0, strNum * maxLen - 1) + ellipsisType;
+      }
+      return text;
+    };
+
+    const getShowText = () => {
+      const { isCharLimit, isLineLimit, isHeightLimit } = props;
+      let res = '';
+      if (isCharLimit) {
+        res = lengthLimit();
+      } else if (isLineLimit) {
+        res = lineLimit();
+      } else if (isHeightLimit) {
+        res = heightLimit();
+      }
+      showText.value = res;
+    };
+
+    onMounted(() => {
+      // console.log(ellipsis.value);
+      getShowText();
+    });
+
+    return {
+      ellipsis,
+      showText,
+    };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+
+</style>