vue中封装动态添加css、js组件

最新推荐文章于 2024-08-19 08:00:00 发布

wgb0409

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量828

点赞数

分类专栏： vue小功能封装文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/wgb0409/article/details/122496411

版权

vue小功能封装专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.remote-css.vue

<script>
/**
 * 引入远程css的组件，在页面中当组件使用
 * 可以在App.vue中全局引用，也可以在任意页面中单独引用
 * 用法：<remote-css :href=""></remote-css>
 *
 */
export default {
  name: "remote-css",
  components: {},
  href: { type: String, required: true },
  render(h) {
    return h("link", { attrs: { rel: "stylesheet", href: this.href } });
  },
};
</script>

2.remote-js.vue

<script>
/**
 * 引入远程css的组件，在页面中当组件使用
 * 可以在App.vue中全局引用，也可以在任意页面中单独引用
 * 用法：<remote-js :src=""></remote-js>
 *
 */
export default {
  name: "remote-js",
  components: {},
  src: { type: String, required: true },
  render(h) {
    return h("script", { attrs: { type: "text/javascript", src: this.src } });
  },
};
</script>