@zykjcommon/questions 0.0.1

package/src/components/common/MediaLooker.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="dialog imgLookerDialog" v-if="visible">
+    <div class="mask"></div>
+    <div class="close" @click="cancel">
+      <img src="../../assets/img/big-close.png" alt="" />
+    </div>
+    <div class="prev" @click="prev"></div>
+    <div class="next" @click="next"></div>
+    <!--      <button style="position: fixed;z-index: 9999;top:0;left:0" @click="fn">click</button>-->
+    <div class="imgLooker" v-if="curMediaObj.mediaType == 1"
+         @click="enlarge"
+         :class="{ in: enlargeStatus === 'in', out: enlargeStatus === 'out' }">
+      <img :src="curMediaObj.url"
+           :style="{'width':curMediaObj.width+'px','height':curMediaObj.height+'px'}"
+           alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import fun from '../../assets/js/fun';
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    mediaLookerList: {
+      type: Array,
+      default(){
+        return []
+      }
+    },
+    mediaCount:{
+      type: Number,
+      default:0
+    }
+  },
+  mounted() {
+
+  },
+  data() {
+    return {
+      curMediaObj: {},
+      curMediaCount:0,
+      imgCompressWidth:0,
+      imgCompressHeight:0,
+      imgNativeWidth:0,
+      imgNativeHeight:0,
+      enlargeStatus: "in", //in:放大图标 out:缩小图标
+      canEnlarge:false
+    };
+  },
+  watch: {
+    mediaLookerList:{
+      handler(nv,ov){
+        if(nv && nv.length){
+          if(nv && nv.length){
+            // console.log(nv,3333);
+            this.getCurMedia(this.mediaCount)
+            // console.log(props.mediaCount,11113);
+          }
+        }
+      },
+      immediate:true,
+      deep:true
+    }
+  },
+  computed:{
+  },
+  methods: {
+    cancel(){
+      this.$emit("update:visible", false);
+    },
+    getCurMedia(index){
+      this.curMediaCount = index
+      this.curMediaObj = fun.copyDeepObject(this.mediaLookerList[index])
+      let newImg = new Image()
+      newImg.src = this.curMediaObj.url
+      let root = document.documentElement || document.body
+      let rootW = root.clientWidth
+      let rootH = root.clientHeight
+      this.canEnlarge = false
+      this.enlargeStatus = 'in'
+      newImg.addEventListener('load',()=>{
+        let imgW = newImg.width;
+        let imgH = newImg.height;
+        let bili, compressW, compressH;
+        this.imgNativeWidth = imgW;
+        this.imgNativeHeight = imgH;
+        //缩放规则：
+        //如果（原图得宽度和窗口得宽度差）>（原图得高度和窗口得高度差）用宽度比利来缩放
+        //如果（原图得宽度和窗口得宽度差） <（原图得高度和窗口得高度差）用高度比利来缩放
+        if (imgW >= rootW || imgH >= rootH) {
+          let w = imgW - rootW;
+          let h = imgH - rootH;
+          let bili, compressW, compressH;
+          if (w > h) {
+            compressW = rootW * 0.9;
+            bili = compressW / imgW;
+            compressH = imgH * bili;
+            this.curMediaObj.width = compressW;
+            this.curMediaObj.height = compressH;
+            this.imgCompressWidth = compressW;
+            this.imgCompressHeight = compressH;
+          } else {
+            compressH = rootH * 0.9;
+            bili = compressH / imgH;
+            compressW = imgW * bili;
+            this.curMediaObj.width = compressW;
+            this.curMediaObj.height = compressH;
+            this.imgCompressWidth = compressW;
+            this.imgCompressHeight = compressH;
+          }
+          this.canEnlarge = true;
+        } else {
+          this.curMediaObj.width = imgW;
+          this.curMediaObj.height = imgH;
+          this.imgCompressWidth = imgW;
+          this.imgCompressHeight = imgH;
+        }
+        // if(newImg.width >= rootW * 0.9){
+        //   data.curMediaObj.width = rootW * 0.9
+        // }else{
+        //   data.curMediaObj.width = newImg.width
+        // }
+      })
+    },
+    enlarge() {
+      if (this.canEnlarge) {
+        if (this.enlargeStatus === "in") {
+          this.curMediaObj.width = this.imgNativeWidth;
+          this.curMediaObj.height = this.imgNativeHeight;
+        } else {
+          this.curMediaObj.width = this.imgCompressWidth;
+          this.curMediaObj.height = this.imgCompressHeight;
+        }
+        this.enlargeStatus = this.enlargeStatus === "in" ? "out" : "in";
+        window.console.log(
+            this.imgNativeWidth,
+            this.imgNativeHeight,
+            this.imgCompressWidth,
+            this.imgCompressHeight
+        );
+      }
+    },
+    next(){
+      if(this.curMediaCount === this.mediaLookerList.length -1){
+        this.curMediaCount = 0
+      }else{
+        this.curMediaCount++
+      }
+      this.getCurMedia(this.curMediaCount)
+    },
+    prev(){
+      if(this.curMediaCount === 0){
+        this.curMediaCount = this.mediaLookerList.length -1
+      }else{
+        this.curMediaCount--
+      }
+      this.getCurMedia(this.curMediaCount)
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>

package/src/components/common/TextAreaEditor.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="editor-textarea">
+    <textarea v-model="textareaStr"
+              :disabled="disabled"
+              class="textareaComponent"
+              :placeholder="placeHolder"
+              maxlength="5000"></textarea>
+    <div class="len">{{textareaStr.length}}/5000</div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  toRef,
+  toRefs,
+  watch,
+  onActivated,
+  onDeactivated,
+  getCurrentInstance
+} from 'vue'
+interface dataInterface{
+  textareaStr:string
+}
+export default defineComponent({
+  props: {
+    placeHolder:{
+      type:String,
+      default:'请输入...'
+    },
+    value:{
+      type:String,
+      default:''
+    },
+    disabled:{
+      type:Boolean,
+      default:false
+    }
+  },
+  setup(props, context) {
+    let data:dataInterface = reactive({
+      textareaStr:'',
+    })
+    const currentInstance:any = getCurrentInstance()
+    let _this = currentInstance.proxy
+    let observer:any
+    onMounted(()=>{
+      let textareaComponent = _this.$el.querySelector('.textareaComponent')
+      let ele = textareaComponent as HTMLElement
+      let textareaInitH = textareaComponent.clientHeight
+      const MutationObserver = window.MutationObserver|| window.WebKitMutationObserver || window.MozMutationObserver
+      const config = { attributes: true, childList: false, subtree: true, attributeFilter:['style'],attributeOldValue:true };
+      observer = new MutationObserver( (mutationsList, observer) => {
+        let appNode = document.querySelector('.content-outter')
+        if(appNode){
+          let height = parseInt(getComputedStyle(ele).getPropertyValue('height'))
+          let scrollDistance = height - textareaInitH
+          // console.log(scrollDistance,appNode.scrollTop);
+          appNode.scrollTop = appNode.scrollTop + scrollDistance
+          // if(scrollDistance > 0){
+          //   console.log(scrollDistance,appNode.scrollTop);
+          //   appNode.scrollTop = appNode.scrollTop + scrollDistance
+          // }
+          textareaInitH = height
+        }
+      });
+      observer.observe(ele, config);
+    })
+
+    onUnmounted(()=>{
+      observer && observer.disconnect()
+    })
+
+    watch(() => data.textareaStr, (nv) => {
+      context.emit("getTextareaStr", nv);
+    })
+
+    watch(() => props.value, (nv) => {
+      if(nv){
+        data.textareaStr = nv
+      }
+    },{
+      immediate:true
+    })
+
+
+
+    return {
+      ...toRefs(data)
+    }
+  }
+})
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss" scoped>
+.editor-textarea{
+  margin-top: 15px;
+  position: relative;
+  display: inline-block;
+  textarea{
+    font-size: 18px;min-width: 800px;max-width: 1600px;min-height: 300px;
+    padding: 10px 15px 15px 15px;
+    outline-color: deepskyblue;
+  }
+  .len{
+    right: 15px;
+    bottom: 4px;
+    position: absolute;
+    color:blue;
+    font-weight: bold;
+
+  }
+}
+
+
+</style>