Merge branch 'product' of http://git.mes123.com/zhouyx/mes-ui into product

components/page/remote.vue

+<template>
+  <div class="remote" >
+    <component :is="currentView" v-bind="$props" @onChange="hi"/>
+  </div>
+</template>
+<script>
+import Axios from "axios";
+// import '@/utils/less.min';
+export default {
+  props: {
+    url: {
+      type: String,
+      default() {
+        return null;
+      }
+    }
+  },
+  data() {
+    return {
+      resData: null,
+      cssId: null
+    };
+  },
+  computed: {
+    currentView() {
+      if (!this.resData)
+        return { template: "<div class='remoteInfo'>正在加载中。。。</div>" };
+      const tplData = this.resolveStr(this.resData);
+      let ponentObj = new Function(
+        `return ${tplData.sctipts.slice(
+          tplData.sctipts.indexOf("{"),
+          tplData.sctipts.lastIndexOf("}") + 1
+        )}`
+      )();
+      ponentObj.template = tplData.templates;
+      // this.$el.setAttribute('class',`remote css${this.cssId}`);
+      // if(!document.querySelector(`style[id=css${this.cssId}]`)){//防止重复创建
+      //     let cssStr = `
+      //         .css${this.cssId}{
+      //             ${tplData.styles}
+      //         }
+      //     `;
+      //     this.resolveCss(cssStr);
+      // }
+      return ponentObj;
+    }
+  },
+  watch: {
+    url() {
+      this.getData();
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+      hi(v){
+          alert(v)
+      },
+    getId() {
+      var d = new Date().getTime();
+      var uid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function(c) {
+          var r = (d + Math.random() * 16) % 16 | 0;
+          d = Math.floor(d / 16);
+          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
+        }
+      );
+      return uid;
+    },
+    resolveCss(lessInput) {
+      less.render(lessInput).then(
+        function(output) {
+          let style = document.createElement("style");
+          style.setAttribute("type", "text/css");
+          style.setAttribute("id", "css" + this.cssId);
+          if (style.styleSheet)
+            // IE
+            style.styleSheet.cssText = output.css;
+          else {
+            // w3c
+            var cssText = document.createTextNode(output.css);
+            style.appendChild(cssText);
+          }
+          var heads = document.getElementsByTagName("head");
+          if (heads.length) heads[0].appendChild(style);
+          else document.documentElement.appendChild(style);
+        }.bind(this)
+      );
+    },
+    resolveStr(str) {
+      return {
+        templates: str.match(/<template>([\s\S]*)<\/template>/)[1],
+        sctipts: str.match(/<script.*>([\s\S]*)<\/script>/)[1],
+        // styles: str.match(/<style.*>([\s\S]*)<\/style>/)[1]
+      };
+    },
+    async getData() {
+      // let remoteData = this.$store.getters.getRemoteByUrl(this.url);
+      // if(remoteData){
+      //     this.resData = remoteData.resData;
+      //     this.cssId = remoteData.cssId;
+      // }else{
+      if (this.$props.url) {
+        const res = await Axios.get(this.$props.url);
+        // this.cssId = this.getId();
+        this.resData = res.data;
+        console.log(this.resData)
+      }
+
+      // this.$store.dispatch('doAction',{
+      //     event:'addRemote',
+      //     data:{url:this.url,cssId:this.cssId,resData:this.resData}
+      // });
+      // }
+    }
+    //  async getData(){
+    //     let remoteData = this.$store.getters.getRemoteByUrl(this.url);
+    //     if(remoteData){
+    //         this.resData = remoteData.resData;
+    //         this.cssId = remoteData.cssId;
+    //     }else{
+    //         const res = await Axios.get(this.$props.url);
+    //         this.cssId = this.getId();
+    //         this.resData = res.data;
+    //         this.$store.dispatch('doAction',{
+    //             event:'addRemote',
+    //             data:{url:this.url,cssId:this.cssId,resData:this.resData}
+    //         });
+    //     }
+    // }
+  }
+};
+</script>
\ No newline at end of file

nuxt.config.js

@@ -105,6 +105,7 @@ export default {
       }
     },
     extend(config, ctx) {
+      config.resolve.alias['vue$']='vue/dist/vue.esm.js'
       // config.resolve.alias['_c']=path.resolve(__dirname, 'components')
       // config.module.rules.push({
       //   enforce:'pre',

pages/test.vue

@@ -20,7 +20,7 @@
       <Menu mode="horizontal" active-name="1">
         <div class="layout-assistant">
           <MenuItem name="1" to="/test/user">人员选择</MenuItem>
-          <MenuItem name="2">Option 2</MenuItem>
+          <MenuItem name="2" to="/test/com">异步组件</MenuItem>
           <MenuItem name="3">Option 3</MenuItem>
         </div>
       </Menu>

pages/test/com.vue

+<style lang="less">
+
+</style>
+<template>
+    <div class="layout">
+        <Button @click="load()">异步组件</Button>
+        <Remote url="/user.txt" @onChange="hi"></Remote>
+    </div>
+</template>
+<script>
+import Remote from "@/components/page/remote"
+    export default {
+        components:{Remote},
+        methods:{
+            hi(v){
+                alert(v)
+            }
+        }
+
+    }
+</script>
\ No newline at end of file

static/user.txt

+<template>
+    <div style="padding:50px;">
+       <UserSelect v-model="user" :multiple="true" theme="list"/>
+       <!-- <DepartmentSelect v-model="dep" /> -->
+        
+        <Button @click="setUser">Set</Button>{{dep}}
+        {{user}}
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+            dep:39,
+            user:[21,22,23]
+        }
+    },
+    methods:{
+        setUser(){
+            this.user=[25]
+            this.$emit("onChange",25)
+        }
+    }
+}
+</script>
+<style lang="less"></style>
\ No newline at end of file