md-iview 1.0.12

package/src/components/md-rich-editor/index.vue

@@ -0,0 +1,69 @@
+<template>
+    <quill-editor ref="textEditor"
+                  v-bind="$attrs"
+                  v-on="$listeners"
+                  :options="editorOption"></quill-editor>
+</template>
+
+<script>
+  import hljs from 'highlight.js'
+  // import 'quill/dist/quill.core.css'
+  // import 'quill/dist/quill.snow.css'
+  // import 'quill/dist/quill.bubble.css'
+  import { quillEditor, Quill} from 'vue-quill-editor'
+
+  import ImageExtend from './module/image-extend'
+  Quill.register('modules/imageExtend', ImageExtend)
+  export default {
+    name: "md-rich-editor",
+    components: {
+      quillEditor
+    },
+    data() {
+      return {
+        // content: `<h2 class="ql-align-center"><span class="ql-font-serif">Text content loading..</span></h2>`,
+        editorOption: {
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike'],
+              ['blockquote', 'code-block'],
+              [{ 'header': 1 }, { 'header': 2 }],
+              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+              [{ 'script': 'sub' }, { 'script': 'super' }],
+              [{ 'indent': '-1' }, { 'indent': '+1' }],
+              [{ 'direction': 'rtl' }],
+              [{ 'size': ['small', false, 'large', 'huge'] }],
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+              [{ 'font': [] }],
+              [{ 'color': [] }, { 'background': [] }],
+              [{ 'align': [] }],
+              ['clean'],
+              ['link', 'image', 'video'],
+            ],
+            syntax: {
+              highlight: text => hljs.highlightAuto(text).value
+            }
+          }
+        }
+      }
+    },
+    mounted() {
+      // setTimeout(() => {
+      //   this.content = content;
+      // })
+    },
+
+    computed: {
+      editor() {
+        return this.$refs.myTextEditor.quill
+      },
+      contentCode() {
+        return hljs.highlightAuto(this.content).value
+      }
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+@import "../../style/components/rich-editor.less";
+</style>

package/src/components/md-rich-editor/module/image-extend/index.js

@@ -0,0 +1,216 @@
+/**
+ * @description 图片功能拓展： 增加上传 拖动 复制
+ */
+export default  class ImageExtend {
+  /**
+   * @param quill {Quill}富文本实例
+   * @param config {Object} options
+   * config  keys: action, headers, editForm start end error  size response
+   */
+  constructor(quill, config = {}) {
+    this.id = Math.random()
+    this.quill = quill
+    this.quill.id = this.id
+    this.config = config
+    this.file = ''  // 要上传的图片
+    this.imgURL = ''  // 图片地址
+    let quillLoading
+    if (this.config.loading) {
+      quillLoading = document.querySelector('.quillLoading')
+      if (quillLoading === null) {
+        quillLoading = document.createElement('div')
+        quillLoading.classList.add('quill-loading')
+        quillLoading.classList.add('extend-upload-success')
+        document.querySelector('.ql-container').appendChild(quillLoading)
+      }
+    }
+    this.quillLoading = quillLoading
+    quill.root.addEventListener('paste', this.pasteHandle.bind(this), false)
+    quill.root.addEventListener('drop', this.dropHandle.bind(this), false)
+    quill.root.addEventListener('dropover', function (e) {
+      e.preventDefault()
+    }, false)
+
+    QuillWatch.on(this.id, this)
+  }
+
+  /**
+   * @description 粘贴
+   * @param e
+   */
+  pasteHandle(e) {
+    let clipboardData = e.clipboardData
+    let i = 0
+    let items, item, types
+
+    if (clipboardData) {
+      items = clipboardData.items;
+
+      if (!items) {
+        return;
+      }
+      item = items[0];
+      types = clipboardData.types || [];
+
+      for (; i < types.length; i++) {
+        if (types[i] === 'Files') {
+          item = items[i];
+          break;
+        }
+      }
+      if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
+        this.file = item.getAsFile()
+        let self = this
+        // 如果图片限制大小
+        if (self.config.size && self.file.size >= self.config.size * 1024 * 1024 && self.config.loading) {
+          self.quillLoading.classList.remove('extend-upload-success')
+          self.quillLoading.classList.add('extend-upload-warning-color')
+          self.quillLoading.innerHTML = '图片大小超过限制'
+          setTimeout(function () {
+            self.quillLoading.classList.remove('extend-upload-warning-color')
+            self.quillLoading.classList.add('extend-upload-success')
+          }, 1500)
+          return
+        }
+        if (this.config.action) {
+          this.uploadImg()
+        } else {
+          this.toBase64()
+        }
+      }
+    }
+  }
+
+  /**
+   * 拖拽
+   * @param e
+   */
+  dropHandle(e) {
+    const self = this
+    e.preventDefault()
+    // 如果图片限制大小
+    if (self.config.size && self.file.size >= self.config.size * 1024 * 1024 && self.config.loading) {
+      self.quillLoading.classList.add('extend-upload-warning-color')
+      self.quillLoading.classList.remove('extend-upload-success')
+      self.quillLoading.innerHTML = '图片大小超过限制'
+      setTimeout(function () {
+        self.quillLoading.classList.remove('extend-upload-warning-color')
+        self.quillLoading.classList.add('extend-upload-success')
+      }, 1500)
+      return
+    }
+    self.file = e.dataTransfer.files[0]; // 获取到第一个上传的文件对象
+    if (this.config.action) {
+      self.uploadImg()
+    } else {
+      self.toBase64()
+    }
+  }
+
+  /**
+   * @description 将图片转为base4
+   */
+  toBase64() {
+    const self = this
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      // 返回base64
+      self.imgURL = e.target.result
+      self.insertImg()
+    }
+    reader.readAsDataURL(self.file)
+  }
+
+  /**
+   * @description 上传图片到服务器
+   */
+  uploadImg() {
+    const self = this
+    let quillLoading = self.quillLoading
+    let config = self.config
+    // 构造表单
+    let formData = new FormData()
+    formData.append(config.name, self.file)
+    // 自定义修改表单
+    if (config.editForm) {
+      config.editForm(formData)
+    }
+    // 创建ajax请求
+    let xhr = new XMLHttpRequest()
+    xhr.open('post', config.action, true)
+    // 如果有设置请求头
+    if (config.headers) {
+      config.headers(xhr)
+    }
+    if (config.change) {
+      config.change(xhr, formData)
+    }
+    xhr.onload = function (e) {
+      if (self.config.loading) {
+        setTimeout(function () {
+          quillLoading.classList.add('extend-upload-success')
+        }, 1000)
+      }
+      if (xhr.status === 200) {
+        self.quill.root.innerHTML = self.quill.root.innerHTML.replace('[uploading...]', '')
+        let res = JSON.parse(xhr.responseText)
+        self.imgURL = config.response(res)
+        self.insertImg()
+      } else {
+        self.quill.root.innerHTML = self.quill.root.innerHTML.replace('[uploading...]', '[upload error]')
+      }
+    }
+    // 开始上传数据
+    xhr.upload.onloadstart = function (e) {
+
+      let length = (self.quill.getSelection() || {}).index || self.quill.getLength()
+      self.quill.insertText(length, '[uploading...]', { 'color': 'red'}, true)
+      if (self.config.loading) {
+        quillLoading.classList.remove('extend-upload-success')
+      }
+      if (config.start) {
+        config.start()
+      }
+    }
+    // 上传过程
+    xhr.upload.onprogress = function (e) {
+      let complete = (e.loaded / e.total * 100 | 0) + '%'
+      if (self.config.loading) {
+        quillLoading.innerHTML = '已上传' + complete
+      }
+    }
+    // 当发生网络异常的时候会触发，如果上传数据的过程还未结束
+    xhr.upload.onerror = function (e) {
+      self.quill.root.innerHTML = self.quill.root.innerHTML.replace('[uploading...]', '[upload error]')
+      if (self.config.loading) {
+        self.quillLoading.classList.add('extend-upload-warning-color')
+        quillLoading.innerHTML = '网络异常，失败请重试'
+        setTimeout(function () {
+          self.quillLoading.classList.remove('extend-upload-warning-color')
+          quillLoading.classList.add('extend-upload-success')
+        }, 1500)
+      }
+      if (config.error) {
+        config.error()
+      }
+    }
+    // 上传数据完成（成功或者失败）时会触发
+    xhr.upload.onloadend = function (e) {
+      if (config.end) {
+        config.end()
+      }
+    }
+    xhr.send(formData)
+  }
+
+  /**
+   * @description 往富文本编辑器插入图片
+   */
+  insertImg() {
+    const self = this
+    self.quill.blur()
+    let length = (this.quill.getSelection() || {}).index || this.quill.getLength()
+    self.quill.insertEmbed(length, 'image', self.imgURL, 'user')
+    self.quill.setSelection(length + 1)
+  }
+}

package/src/components/md-scroll-bar/demo/index.vue

@@ -0,0 +1,102 @@
+<template>
+	<div>
+		<Row :gutter="10">
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar
+							scroll-y-type="inner"
+						>
+							<p v-for="i in 100" :key="`item-${i}`">item - {{ i }}</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar>
+							<p class="list-item" v-for="i in 6" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all>
+							<p v-for="i in 100" :key="`item-${i}`">item - {{ i }}</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all>
+							<p class="list-item" v-for="i in 6" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+		</Row>
+		<Row :style="{marginTop: '10px'}" :gutter="10">
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all dis-scroll-x>
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all dis-scroll-y>
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all scroll-x="none">
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar>
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+		</Row>
+	</div>
+</template>
+
+<script>
+import scrollBar from '../index';
+export default {
+    name: 'scroll-bar-page',
+    components: {
+        scrollBar
+    }
+};
+</script>
+
+<style lang="less">
+.scroll-container{
+	height: 260px;
+}
+.list-item{
+	word-break: keep-all;
+	white-space: nowrap;
+}
+</style>

package/src/components/md-scroll-bar/index.js

@@ -0,0 +1,3 @@
+import scrollBar from './index.vue';
+
+export default scrollBar;

package/src/components/md-scroll-bar/index.less

@@ -0,0 +1,90 @@
+@prefix: ~'vue-scroller-bars';
+
+.@{prefix}{
+	&-wraper{
+		height: 100%;
+    	width: 100%;
+		overflow: hidden;
+		position: relative;
+		&.show-when-hover{
+			.@{prefix}-scroll{
+				opacity: 0;
+			}
+			.@{prefix}-place-holder{
+				opacity: 0;
+			}
+		}
+		&.show-when-hover:hover{
+			.@{prefix}-scroll{
+				opacity: 1;
+			}
+			.@{prefix}-place-holder{
+				opacity: 1;
+			}
+		}
+	}
+	&-content{
+		position: absolute;
+		min-width: 100%;
+		left: 0;
+		top: 0;
+	}
+	&-scroll{
+		position: relative;
+		transition: opacity .3s ease .2s;
+		background: rgba(250, 250, 250, 1);
+		box-sizing: border-box;
+		padding: 1px 2px;
+		z-index: 9999999;
+		&:hover &-bar{
+			background: rgb(100, 100, 100);
+		}
+		&-y{
+			width: 14px;
+			height: 100%;
+			float: right;
+			border-left: 1px solid rgba(190, 190, 190, .5);
+			border-right: 1px solid rgba(190, 190, 190, .5);
+			&.scroll-y-cover{
+				position: absolute;
+				right: 0px;
+				top: 0px;
+			}
+		}
+		&-x{
+			width: 100%;
+			height: 14px;
+			float: right;
+			border-top: 1px solid rgba(190, 190, 190, .5);
+			border-bottom: 1px solid rgba(190, 190, 190, .5);
+			&.scroll-x-cover{
+				position: absolute;
+				left: 0px;
+				bottom: 0px;
+			}
+		}
+		&-bar{
+			background: rgba(190, 190, 190, 1);
+			position: absolute;
+			border-radius: 4px;
+			transition: background .2s ease;
+			&-y{
+				width: ~'calc(100% - 4px)';
+				min-height: 14px;
+			}
+			&-x{
+				height: ~'calc(100% - 4px)';
+				min-width: 14px;
+			}
+		}
+	}
+	&-place-holder{
+		position: absolute;
+		transition: opacity .3s ease .2s;
+		right: 0px;
+		bottom: 0px;
+		width: 14px;
+		height: 14px;
+		background: rgba(250, 250, 250, 1);
+	}
+}