simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdViewer/src/EdViewer.vue

@@ -0,0 +1,310 @@
+<template>
+  <div v-show="isShow" class="ed-viewer">
+    <!-- 蒙层 -->
+    <div class="ed-viewer--mask"></div>
+    <!-- 关闭按钮 -->
+    <div class="ed-viewer__btn ed-viewer--close" @click="close">
+      <i class="el-icon-circle-close"></i>
+    </div>
+
+    <!-- 上一张按钮 -->
+    <div v-if="isRow" class="ed-viewer__btn ed-viewer__prev" @click="handlePrev">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <!-- 下一张按钮 -->
+    <div v-if="isRow" class="ed-viewer__btn ed-viewer__next" @click="handleNext">
+      <i class="el-icon-arrow-right"></i>
+    </div>
+
+    <!-- 内容层 -->
+    <div ref="content" class="ed-viewer__content">
+      <el-carousel ref="carousel"
+                   :initial-index="index"
+                   :initial-swipe="index"
+                   :interval="0"
+                   :show-indicators="false"
+                   arrow="never"
+                   indicator-position="none"
+                   @change="handleChange">
+        <el-carousel-item v-for="(item, indexes) in list"
+                          :key="indexes"
+                          @click.native.self="close()">
+          <component :is="isMediaType(item)"
+                     v-if="isMediaType(item)"
+                     :id="'ed-preview__'+indexes"
+                     :class="'ed-preview__'+isMediaType(item)"
+                     ref="item"
+                     :src="item.url"
+                     :style="[styleName,styleBoxName]"
+                     controls="controls"
+                     ondragstart="return false"
+                     @click="handleClick(item,indexes)"
+                     @mousedown="move"></component>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <!--  操作区  -->
+    <div class="ed-viewer__btn ed-viewer__actions">
+      <div class="ed-viewer__actions__inner">
+        <i class="el-icon-zoom-out" @click="subScale"></i>
+        <i class="el-icon-zoom-in" @click="addScale"></i>
+        <i class="el-image-viewer__actions__divider"></i>
+        <i class="el-icon-printer" @click="handlePrint"></i>
+        <i class="el-image-viewer__actions__divider"></i>
+        <i class="el-icon-refresh-left" @click="rotate=rotate-90"></i>
+        <i class="el-icon-refresh-right" @click="rotate=rotate+90"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {isMediaType, setPx} from '../../../tools/utils'
+
+export default {
+  name: "EdViewer",
+  props: {
+    list: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      scale: 1,
+      rotate: 0,
+      left: 0,
+      top: 0,
+      index: 0,
+      isShow: false,
+    }
+  },
+  computed: {
+    styleBoxName() {
+      return {
+        marginLeft: setPx(this.left),
+        marginTop: setPx(this.top)
+      }
+    },
+    styleName() {
+      return {
+        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
+        maxWidth: '100%',
+        maxHeight: '100%',
+        minWidth: '50vw',
+        minHeight: '50vh'
+      }
+    },
+    isRow() {
+      return this.list.length > 1
+    }
+  },
+  methods: {
+    isMediaType(item) {
+      const {url, type} = item;
+      console.log(isMediaType(url, type))
+      return isMediaType(url, type)
+    },
+    open() {
+      this.isShow = true
+    },
+    move(e) {
+      //算出鼠标相对元素的位置
+      let disX = e.clientX;
+      let disY = e.clientY;
+      let scale = 2;
+      document.onmousemove = (e) => {       //鼠标按下并移动的事件
+                                            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+        let left = e.clientX - disX;
+        let top = e.clientY - disY;
+        disX = e.clientX;
+        disY = e.clientY;
+        //移动当前元素
+        this.left = this.left + (left * scale)
+        this.top = this.top + (top * scale)
+      };
+      document.onmouseup = (e) => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    },
+    close() {
+      this.isShow = false
+      if (Object.prototype.hasOwnProperty.call(this.$listeners, 'beforeClose')) {
+        this.$emit('beforeClose', this.list, this.index)
+      }
+    },
+    // 上一张按钮
+    handlePrev() {
+      this.$refs.carousel.prev()
+      this.index = this.$refs.carousel.activeIndex
+      this.stopItem()
+    },
+    // 下一张按钮
+    handleNext() {
+      this.$refs.carousel.next()
+      this.index = this.$refs.carousel.activeIndex
+      this.stopItem()
+    },
+    // 缩小
+    subScale () {
+      if (this.scale !== 0.2) {
+        this.scale = parseFloat((this.scale - 0.2).toFixed(2))
+      }
+    },
+
+    // 放大
+    addScale () {
+      this.scale = parseFloat((this.scale + 0.2).toFixed(2))
+    },
+
+    // 打印
+    handlePrint(){
+      this.$print(`#ed-preview__${this.index}`)
+    },
+
+    handleClick() {
+    },
+    handleChange () {
+      this.scale = 1;
+      this.rotate = 0;
+    },
+    stopItem() {
+      this.left = 0;
+      this.top = 0;
+      this.$refs.item.forEach(ele => {
+        ele.pause && ele.pause()
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ed-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+  z-index: 9998;
+
+  .ed-viewer--mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .5);
+  }
+
+  .ed-viewer__btn {
+    z-index: 1024;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    opacity: .8;
+    cursor: pointer;
+    -webkit-user-select: none;
+    box-sizing: border-box;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  .ed-viewer--close {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+  }
+
+  .ed-viewer__prev {
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 40px
+  }
+
+  .ed-viewer__next {
+    transform: translateY(-50%);
+    right: 40px;
+    text-indent: 2px;
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    top: 50%;
+  }
+
+  .ed-viewer__actions {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    border-radius: 22px;
+
+    .ed-viewer__actions__inner {
+      width: 100%;
+      height: 100%;
+      text-align: justify;
+      cursor: default;
+      font-size: 23px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+
+}
+
+::v-deep {
+  .ed-viewer__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-carousel {
+      width: 90%;
+      height: 100%;
+    }
+
+    .el-carousel__container {
+      height: 100%;
+    }
+
+    .el-carousel__item {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.ed-preview__iframe {
+  width: 60vw;
+  height: 75vh;
+  border: none;
+}
+</style>

package/src/components/ed-base-vue/package/EdWangEditor/index.js

@@ -0,0 +1,14 @@
+/**
+ * wangEditor文本编辑器使用
+ * @link https://www.wangeditor.com/
+ * @description Web 富文本编辑器
+ */
+
+import EdWangEditor from './src/EdWangEditor.vue'
+
+/* istanbul ignore next */
+EdWangEditor.install = function (Vue) {
+  Vue.component(EdWangEditor.name, EdWangEditor)
+}
+
+export default EdWangEditor

package/src/components/ed-base-vue/package/EdWangEditor/src/EdWangEditor.vue

@@ -0,0 +1,127 @@
+<template>
+  <!-- 富文本编辑器 -->
+  <div class="editor">
+    <Toolbar :defaultConfig="toolbarConfig" :editor="editor" :mode="mode" class="editor-toolbar"/>
+
+    <Editor
+      v-model="defaultHtml"
+      :defaultConfig="editorConfigs"
+      :mode="mode"
+      class="editor-content"
+      @customPaste="customPaste"
+      @onChange="onChange"
+      @onCreated="onCreated"
+    />
+  </div>
+</template>
+
+<script>
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
+import "@wangeditor/editor/dist/css/style.css";
+
+/**
+ * 富文本编辑器
+ * - 示例
+ *
+ * ```vue
+ * <ed-wang-editor v-model="value"></ed-wang-editor>
+ * ```
+ */
+export default {
+  name: 'EdWangEditor',
+  components: {Editor, Toolbar},
+  props: {
+    value: {type: String, default: '',},
+    // 'default' or 'simple'
+    mode: {type: String, default: 'default'},
+    // 工具栏配置
+    toolbarConfig: {
+      type: Object,
+      default: ()=>{
+        return {
+          //排除某些菜单，其他都保留
+          excludeKeys: ["group-video"],
+        }
+      }
+    },
+    // 编辑器配置（图片如配置颜色、字体、链接校验、上传图片等）
+    editorConfig: {
+      type: Object,
+      default: ()=>{
+        return {
+          placeholder: "<p style='font-size: 14px'>请输入内容...</p>",
+          // 所有的菜单配置，都要在 MENU_CONF 属性下
+          MENU_CONF: {}
+        }
+      }
+    }
+  },
+  // 文章编辑相关配置
+  data() {
+    return {
+      editor: null,
+      // 这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写
+      defaultHtml: this.value,
+      // 默认编辑器配置
+      defaultConfig: {
+        placeholder: "<p style='font-size: 14px'>请输入内容...</p>",
+      }
+    }
+  },
+  computed: {
+    editorConfigs(){
+      return Object.assign({}, this.defaultConfig, this.editorConfig)
+    }
+  },
+  methods: {
+    // 编辑器创建完毕时的回调函数。
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+
+    // 对用户剪切板内容的处理
+    customPaste(editor, event) {
+      // event 是 ClipboardEvent 类型，可以拿到粘贴的数据
+      const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
+      editor.insertText(text);
+      event.preventDefault(); // 阻止默认的粘贴行为
+      return false;
+    },
+
+    //onChange 时获取编辑器最新内容
+    onChange(e) {
+      this.$emit("input", e.getHtml())
+    },
+    // 编辑器 focus 时的回调函数。
+    onFocus(e){
+      this.$emit("onFocus", e)
+    },
+    // 编辑器 blur 时的回调函数。
+    onBlur(e){
+      this.$emit("onBlur", e)
+    },
+  },
+  //组件销毁时，及时销毁编辑器
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁编辑器
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  border: 1px solid #ccc;
+
+  .editor-toolbar {
+    border-bottom: 1px solid #ccc
+  }
+
+  .editor-content {
+    height: 500px;
+    overflow-y: hidden;
+  }
+}
+</style>
+

package/src/components/ed-base-vue/package/ExtendSlot.js

@@ -0,0 +1,12 @@
+// 用于处理插槽
+export default {
+  name: 'EdExtendSlot',
+  functional: true,
+  props: {
+    render: Function,
+    data: Object
+  },
+  render: (h, ctx) => {
+    return ctx.props.render(h, ctx.props.data)
+  }
+}

package/src/components/ed-base-vue/package/OptionSlot.js

@@ -0,0 +1,65 @@
+// 用于处理option插槽
+export default {
+  name: 'EdOptionSlot',
+  props: {
+    // 组件类型
+    tags: {
+      type: String,
+      required: true
+    },
+
+    // option 的相关属性
+    optionAttrs: Object,
+
+    // 数据
+    data: {
+      type: [Object, String],
+      required: true
+    },
+
+    // 子元素
+    child: {
+      type: String,
+    }
+  },
+  data() {
+    return {
+      optionTypes: {
+        'el-select': {
+          type: 'el-option',
+          value: 'value'
+        },
+        'el-checkbox-group': {
+          type: 'el-checkbox',
+          value: 'label'
+        },
+        'el-radio-group': {
+          type: 'el-radio',
+          value: 'label'
+        }
+      }
+    }
+  },
+  render(h) {
+    let optionType = this.child ? this.child : this.optionTypes[this.tags].type
+    const config = this.getOptionConfig(this.optionAttrs, optionType, this.data)
+    return h(optionType, config.attrs, config.children)
+  },
+  methods: {
+    // 获取配置
+    getOptionConfig(customAttrs, type, data) {
+      let options = {}
+
+      if (type !== 'el-option') {
+        options.label = data.value
+        options.value = data.label
+        options = Object.assign({}, data, options)
+      } else {
+        options = data
+      }
+      const attrs = Object.assign({}, customAttrs, options)
+      let children = type !== 'el-option' ? data.label : null
+      return {attrs: {attrs}, children: children}
+    },
+  }
+}

package/src/components/ed-base-vue/plugin/Message/index.js

@@ -0,0 +1,2 @@
+import Message from './src/main.js';
+export default Message;

package/src/components/ed-base-vue/plugin/Message/src/main.js

@@ -0,0 +1,91 @@
+import Vue from 'vue';
+import Main from './main.vue';
+import { PopupManager } from 'element-ui/src/utils/popup';
+import { isVNode } from 'element-ui/src/utils/vdom';
+import { isObject } from 'element-ui/src/utils/types';
+let MessageConstructor = Vue.extend(Main);
+
+let instance;
+let instances = [];
+let seed = 1;
+
+const Message = function(options) {
+  if (Vue.prototype.$isServer) return;
+  options = options || {};
+  if (typeof options === 'string') {
+    options = {
+      message: options
+    };
+  }
+  let userOnClose = options.onClose;
+  let id = 'message_' + seed++;
+
+  options.onClose = function() {
+    Message.close(id, userOnClose);
+  };
+  instance = new MessageConstructor({
+    data: options
+  });
+  instance.id = id;
+  if (isVNode(instance.message)) {
+    instance.$slots.default = [instance.message];
+    instance.message = null;
+  }
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+  let verticalOffset = options.offset || 20;
+  instances.forEach(item => {
+    verticalOffset += item.$el.offsetHeight + 16;
+  });
+  instance.verticalOffset = verticalOffset;
+  instance.visible = true;
+  instance.$el.style.zIndex = instance.zIndex ? instance.zIndex : PopupManager.nextZIndex();
+  instances.push(instance);
+  return instance;
+};
+
+['success', 'warning', 'info', 'error'].forEach(type => {
+  Message[type] = (options) => {
+    if (isObject(options) && !isVNode(options)) {
+      return Message({
+        ...options,
+        type
+      });
+    }
+    return Message({
+      type,
+      message: options
+    });
+  };
+});
+
+Message.close = function(id, userOnClose) {
+  let len = instances.length;
+  let index = -1;
+  let removedHeight;
+  for (let i = 0; i < len; i++) {
+    if (id === instances[i].id) {
+      removedHeight = instances[i].$el.offsetHeight;
+      index = i;
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i]);
+      }
+      instances.splice(i, 1);
+      break;
+    }
+  }
+  if (len <= 1 || index === -1 || index > instances.length - 1) return;
+  for (let i = index; i < len - 1 ; i++) {
+    let dom = instances[i].$el;
+    dom.style['top'] =
+      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';
+  }
+};
+
+Message.closeAll = function() {
+  for (let i = instances.length - 1; i >= 0; i--) {
+    instances[i].close();
+  }
+};
+
+export default Message;