elsass - npm Package Compare versions

Comparing version 0.1.17 to 0.1.18

packages/r-display/index.js

+import RDisplay from './r-display.vue'
+
+RDisplay.install = function (Vue) {
+  Vue.component(RDisplay.name, RDisplay)
+}
+
+export default RDisplay

packages/r-display/r-display.vue

+<template>
+    <div class="RDisplay" ref="RDisplay" id="r-display"></div>
+</template>
+<script>
+import Vue from 'vue';
+export default {
+  name: 'RDisplay',
+  props: {
+    code: {
+      type: String,
+      default: '',
+    }
+  },
+  data () {
+    return {
+      html: '',
+      js: '',
+      css: ''
+    }
+  },
+  methods: {
+    // 正则分割传来的code为 js，html，css
+    getSource (source, type) {
+      const regex = new RegExp(`<${type}[^>]*>`)
+      let openingTag = source.match(regex)
+      if (!openingTag) return ''
+      else openingTag = openingTag[0]
+      return source.slice(source.indexOf(openingTag) + openingTag.length, source.lastIndexOf(`</${type}>`))
+    },
+    splitCode () {
+      // 注意把 vue 里的 export default 替换 return
+      const script = this.getSource(this.code, 'script').replace(/export default/, 'return ')
+      const style = this.getSource(this.code, 'style')
+      // 防止使用者未传入根节点
+      const template = '<div id="app">' + this.getSource(this.code, 'template') + '</div>'
+      this.js = script
+      this.css = style
+      this.html = template
+    },
+    // 渲染相应节点
+    renderCode () {
+      this.splitCode()
+      if (this.html !== '' && this.js !== '') {
+        const parseStrToFunc = new Function(this.js)()
+        parseStrToFunc.template =  this.html
+        const Component = Vue.extend( parseStrToFunc )
+        this.component = new Component().$mount()
+        this.$refs.RDisplay.appendChild(this.component.$el)
+        // head里插入css
+        if (this.css !== '') {
+          const style = document.createElement('style');
+          style.type = 'text/css';
+          style.innerHTML = this.css;
+          document.getElementsByTagName('head')[0].appendChild(style);
+        }
+      }
+    },
+    // 销毁dom
+    destroyCode () {
+      if (this.component) {
+        this.$refs.RDisplay.removeChild(this.component.$el);
+        this.component.$destroy();
+        this.component = null;
+      }
+    }
+  },
+  watch: {
+    code (to) {
+      this.destroyCode();
+      this.renderCode();
+    }
+  }
+}
+</script>

src/mixins/emitter.js

+// 仿照  $dispatch 和 $broadcast 功能，方便多层级组件的通信
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach(child => {
+    const name = child.$options.name;
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params));
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat([params]));
+    }
+  });
+}
+export default {
+  methods: {
+    dispatch(componentName, eventName, params) {
+      let parent = this.$parent || this.$root;
+      let name = parent.$options.name;
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+        if (parent) {
+          name = parent.$options.name;
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params);
+    }
+  }
+};

package.json

 {
   "name": "elsass",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "A high-quality UI component library based on Vue.js",
@@ -5,0 +5,0 @@ "main": "./src/main.js",

packages/r-side-menu/mixin.js

@@ -7,4 +7,5 @@ // import CommonIcon from '_c/common-icon'
 }
-
+import Emitter from '../../src/mixins/emitter'
 export default {
+  mixins: [Emitter],
   components: {
@@ -26,4 +27,8 @@ // CommonIcon
       return item.name
-    }
+    },
+    // menu选中返回的
+    handleSelect (name) {
+      this.dispatch('RSideMenu', 'on-emitter-select', name);
+    },
   }
 }

packages/r-side-menu/r-side-menu.vue

@@ -16,2 +16,3 @@ <template>
               :key="`menu-${item.children[0].name}`"
+              @click.native="emitSelect(getNameOrHref(item))"
               class="first-ivu-menu-item">
@@ -30,2 +31,3 @@ </link-menu-item>
               :key="`menu-${item.name}`"
+              @click.native="emitSelect(getNameOrHref(item))"
               class="first-ivu-menu-item">
@@ -38,3 +40,3 @@ </link-menu-item>
         <template v-for="item in menuList">
-          <collapsed-menu v-if="item.children && item.children.length >= 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
+          <collapsed-menu v-if="item.children && item.children.length >= 1" @on-click="collapsedSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
           <Tooltip transfer v-else :content="showTitle( item)" placement="right" :key="`drop-menu-${item.name}`">
@@ -117,2 +119,6 @@ <a @click="handleSelect(getNameOrHref(item))" class="drop-menu-a" :style="{textAlign: 'center'}">
       default: () => []
+    },
+    returnAll: {
+      type: Boolean,
+      default: false
     }
@@ -136,2 +142,3 @@ },
       }
+      this.$emit('on-collapse', this.isCollapsed)
     },
@@ -153,5 +160,19 @@ onMouseenter(event) {
     },
-    handleSelect (name) {
+    collapsedSelect (name) {
       this.$emit('on-select', name)
+      if (name.indexOf('isTurnByHref-') > -1) {
+        // isTurnByHref_  index => 13
+        // 例如 isTurnByHref-http://xx-x-_blank => http://xxx
+        let target = name.split('-').pop()
+        let path = name.substring(13, (name.length - target.length - 1))
+        window.open(path,target)
+        return
+      }
+      this.$router.push({
+        name
+      })
     },
+    emitSelect (data) {
+      this.$emit('on-select', data)
+    },
     getOpenedNamesByActiveName (name) {
@@ -187,5 +208,10 @@ return this.$route.matched.map(item => item.name).filter(item => item !== name)
     },
+    collapsed () {
+      this.isCollapsed = this.collapsed
+      this.isFixed = !this.collapsed
+    },
   },
   mounted () {
     this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
+    this.$on('on-emitter-select', this.emitSelect);
     // this.$refs.sider.$el.addEventListener('mouseenter', this.onMouseenter)
@@ -211,6 +237,2 @@ // this.$refs.sider.$el.addEventListener('mouseleave', this.onMouseleave)
      width: 0 !important
-
-    .ivu-menu-opened .ivu-menu-submenu-title
-      background: #307DF2
-      color: #fff
     .svg-icon
@@ -217,0 +239,0 @@ display: inline-block

packages/r-side-menu/side-menu-item.vue

@@ -17,2 +17,3 @@ <template>
           :target="item.target"
+          @click.native="handleSelect(getNameOrHref(item))"
           :key="`menu-${item.children[0].name}`">
@@ -30,2 +31,3 @@ </link-menu-item>
           :target="item.target"
+          @click.native="handleSelect(getNameOrHref(item))"
           :key="`menu-${item.name}`">
@@ -32,0 +34,0 @@ </link-menu-item>

src/main.js

@@ -11,2 +11,3 @@ import Vue from 'vue'
 // 引入组件
+import RDisplay from '../packages/r-display/index.js'
 import RDialog from '../packages/r-dialog/index.js'
@@ -39,2 +40,3 @@ import RTransfer from '../packages/r-transfer/index.js'
 const components = [
+  RDisplay,
   RDialog,
@@ -41,0 +43,0 @@ RTransfer,

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Total package byte prevSize

1246779

47.12%

Number of package files

114

3.64%

Lines of code

2331

1.83%

No dependency changes