vue-script-inject

vue-script-inject

依赖vue实现脚本注入(采用jsx来渲染节点)，有时候需要在代码中插入一些script或者其他节点, 用于生成广告或者统计

Installation

npm i vue-script-inject --save
# or
yarn add vue-script-inject

Initialize

• 在用vue-cli创建的项目中，在main.js文件中添加插件

  import VueScriptInject from "vue-script-inject";
  
  Vue.use(VueScriptInject, {
  	testScript: function (h, adData) {
  		// h(createElement)参数不可缺失 adData是节点指令中传递的数据
  		return <script>console.log(1111111)</script>;
  	},
      testScript1: function(h, adData) {
          return <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" onLoad={() => console.log($)}></script>
      },
  	testScript2: function (h, adData) {
  		return (
  			<script src={"http://test.com/test?id=" + adData.id}></script>
  		);
  	}
  });
  

• 在用 cdn 方式或者本地引入vuejs项目中使用

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--  可从node_modules中拷贝出来  -->
  <script src="./build/script-inject.iife.min.js"></script>
  <script>
      Vue.use(vueScriptInject, {
          testScript: function (h, adData) { // 注意: h(createElement)参数不可缺失 adData是节点中所传递的数据
              return h('script', {
                  on: {
                      load: function () {
                          // to do something
                          console.log($)
                      }
                  },
                  domProps: {
                      src: 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js'
                  }
              })
          }, 
          testScript1: function (h, adData) {
              return h('script', "console.log(111111111)")
          },
          testScript2: function (h, adData) {
              return h('script', {
                  domProps: {
                      type: 'text/javascript',
                      src: '//i.hao61.net/d.js?cid=' + adData.id
                  }
              })
          }
      })
      var app = new Vue({
          el: '#app'
      })
  </script>
  

Usage

在需要的地方写上指令就可以了

<div v-inject:testScript></div>
<div v-inject:testScript1></div>
<div v-inject:testScript2="{id: 31728}"></div>