vue3 异步组件例子

vueloader use js

Ten skrypt nie powinien być instalowany bezpośrednio. Jest to biblioteka dla innych skyptów do włączenia dyrektywą meta // @require https://update.greasyfork.org/scripts/447165/1065325/vue3%20%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E4%BE%8B%E5%AD%90.js 

// ==UserScript==
// @name            vue3 异步组件例子
// @namespace       moe.canfire.flf
 
// @description     vueloader use  js
// @author          mengzonefire
// @license         MIT
// @match           *
 
// @grant           GM_setValue
// @grant           GM_getValue
// @grant           GM_deleteValue
// @grant           GM_setClipboard
// @grant           GM_xmlhttpRequest
// @grant           GM_info
// @grant           GM_getResourceText
// @grant           GM_addStyle
// @grant           unsafeWindow
// @run-at          document-start
// @connect         *
// @version 0.0.1.20220314074202
// ==/UserScript==

async function myimport(jsurl,enableCache){
       if(!enableCache) jsurl=jsurl +'?rnd='+Math.random();
        let data = await fetch(jsurl).then(res=>res.text() );
       try{
		 data=data.substr(data.indexOf('{')+0).trim();//
		var json=(new Function("return " + data  ))();
		//自动插入css
		  if( json.css!=undefined ){
                  var style = document.createElement('style');
                  var  head = document.head || document.getElementsByTagName('head')[0]; 
	              style.innerHTML=style.innerHTML+json.css;
                  head.appendChild(style);
		  }///
 		return json;
      }catch (error) { 
           console.log(  jsurl  );
           console.log(    error.name+ error.message );
       }
};//---------------------------

  const app = Vue.createApp({
data:function(){return {
 
 }},//data-----
  methods: {
   
  },//methods-----
  components: {
      test:Vue.defineAsyncComponent(() => myimport("./test.js",false) )
  }
});
   app.use(vant);
   app.use(vant.Lazyload);
  const vm=app.mount('#app');
//////////////////////////////////////
// test.js  //export
 const test = {
    template: `
        这是 <span class=mycss>组件测试</span>
        参数：{{str1}}<br>
    `,
    model: {
      prop: ['str']
    },
    props: {
      str: String
    },
	css:` .mycss{ border:5px solid red;} `
	,
    setup(props) {
      // 在setup里面获取参数值
      const str1 = Vue.ref(props.str)
       return {
        str1
      }
    },
  };