html通过CDN引入Vue组件抽出复用

html通过CDN引入Vue组件抽出复用

近期遇到个需求,就是需要在.net MVC的项目中,对已有的项目的首页进行优化,也就是写原生html和js。但是咱是一个写前端的,写html还可以,.net的话,开发也不方便,还得安装Visual Studio启动项目。所以就计划在html文件中开发,然后移植到.net的项目中。

功能说明:需要开发一个dashboard,也就是大屏可视化,多个模块,然后由图表作为主要内容。那么就需要组件封装了,html如何封装组件呢?父组件又如何使用子组件呢?

效果图

在这里插入图片描述
在这里插入图片描述

代码实现

子组件js

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = './son.css';
document.head.appendChild(link);

let htmlstr = `
  <div>
    <div class="son-box">{{ title }} - {{ content }} - {{str}}</div>
    <div class="echart2">2</div>
  </div>
`

// my-component.js
Vue.component('my-component', {
  props: ['title', 'content'],
  template: htmlstr,
  data(){
    return{
      str:1
    }
  },
  mounted(){
    
      this.initEchart()
  },
  methods:{
    initEchart(){
      


      var option = {
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'line'
              }
          ]
      };


      setTimeout(()=>{
          let chartDom2 = document.getElementsByClassName('echart2')[0]
	      var myChart2 = echarts.init(chartDom2);
	      myChart2.setOption(option);
      })
      
    }
  }
});

父组件html


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Grid Layout 示例</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        #loader-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; }
        #loader {
            display: block; position: relative; left: 50%; top: 40%; z-index: 1001; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid transparent;border-top-color: #fe9501;         
            -webkit-animation: spin 2s linear infinite;
            -ms-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }
        #loader:before {
            content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;
            -webkit-animation: spin 3s linear infinite;
            -moz-animation: spin 3s linear infinite;
            -o-animation: spin 3s linear infinite;
            -ms-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }
        #loader:after {
            content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;
            -moz-animation: spin 1.5s linear infinite;
            -o-animation: spin 1.5s linear infinite;
            -ms-animation: spin 1.5s linear infinite;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
        }
        @keyframes spin {
            0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
        }
        .load-text{
            color: #fe9501;
            text-align: center;
            position: relative;
            top: 55%;
            transform: translateY(-50%);
        }

        html {font-size: 100%; /*100 ÷ 16 × 100% = 625%*/}
        @media screen and (min-width:800px) and (max-width:999px) {
            html { font-size: 65%; }
        }
        @media screen and (min-width:1000px) and (max-width:1024px) {
            html { font-size: 70%; }
        }
        @media screen and (min-width:1025px) and (max-width:1280px) {
            html { font-size: 90%; }
        }
        @media screen and (min-width:1281px) and (max-width:1680px) {
            html { font-size: 100%; }
        }
        @media screen and (min-width:1681px) and (max-width:1920px) {
            html { font-size: 100%; }
        }
        @media screen and (min-width:1921px) and (max-width:2240px) {
            html { font-size: 150%; }
        }
        @media screen and (min-width:2241px){
            html { font-size: 150%; }
        }
        .vue-grid-layout {
            background: #eee;
        }

        .vue-grid-item:not(.vue-grid-placeholder) {
            background: #ccc;
            border: 1px solid black;
        }

        .vue-grid-item .resizing {
            opacity: 0.9;
        }

        .vue-grid-item .static {
            background: #cce;
        }

        .vue-grid-item .text {
            font-size: 24px;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 100%;
            width: 100%;
        }

        .vue-grid-item .no-drag {
            height: 100%;
            width: 100%;
        }

        .vue-grid-item .minMax {
            font-size: 12px;
        }

        .vue-grid-item .add {
            cursor: pointer;
        }

        .vue-draggable-handle {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            left: 0;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
            background-position: bottom right;
            padding: 0 8px 8px 0;
            background-repeat: no-repeat;
            background-origin: content-box;
            box-sizing: border-box;
            cursor: pointer;
        }

        .vue-grid-item{
            display: flex;
        }

        .echart{
            width: 100%;
            height: 100%;
            min-height: 5rem;
        }

    </style>
</head>
<body>
    <div id="app">
        <my-component title="标题" content="我是子组件"></my-component>
        <my-component title="标题" content="我是子组件"></my-component>
        <my-component title="标题" content="我是子组件"></my-component>
        <my-component title="标题" content="我是子组件"></my-component>
        <my-component title="标题" content="我是子组件"></my-component>
        



        
    </div>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入Vuex -->
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
    <!-- 引入gird组件 -->
    <script src="./vue-grid-layout.common.js"></script>
    <script src="./vue-grid-layout.umd.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <!-- 引入子组件 -->
    <script src="./son.js"></script>
    <!-- 引入vuex -->
    <script src="./store.js"></script>
    <script>
        new Vue({
            el: '#app',
            store,
            data: {
                draggable: true,
                resizable: false,
                index: 0,
                visible:false,
            },
            mounted(){
            },
            methods: {
                
            }   
        });
    </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/224165.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C# Onnx CenterNet目标检测

目录 效果 模型信息 项目 代码 下载 效果 模型信息 Inputs ------------------------- name&#xff1a;input.1 tensor&#xff1a;Float[1, 3, 384, 384] --------------------------------------------------------------- Outputs ------------------------- name&a…

城市之眼:数据可视化在智慧城市的角色

作为智慧城市建设的核心组成部分&#xff0c;数据可视化扮演着至关重要的角色。在城市中&#xff0c;数据源源不断地产生&#xff0c;涵盖了从交通流量、环境质量到市民需求等各个方面。而数据可视化作为将这些数据呈现出来的手段&#xff0c;对智慧城市的发展起着关键性的作用…

AidLux:手机/平板上的Linux环境与AI开发利器

AidLux是一个基于ARM架构的跨生态&#xff08;鸿蒙/AndroidLinux&#xff09;一站式智能物联网&#xff08;AIoT&#xff09;应用开发和部署平台&#xff0c;正受到越来越多开发者和用户的青睐。既可以作为手机/平板上的一个Linux环境使用&#xff0c;也可以作为AI开发利器以发…

ChatGPT在国内的使用限制,国内的ChatGPT替代工具

人工智能技术的发展不仅改变了我们的生活方式&#xff0c;也在各行各业发挥着越来越重要的作用。ChatGPT&#xff08;Generative Pre-trained Transformer&#xff09;作为一种先进的自然语言处理模型&#xff0c;由OpenAI推出&#xff0c;其在生成人类般流畅对话方面表现出色。…

循环神经网络RNN及其变体LSTM、GRU

1. 背景 RNN(Recurrent Neural Networks) CNN利用输入中的空间几何结构信息&#xff1b;RNN利用输入数据的序列化特性。 2. SimpleRNN单元 传统多层感知机网络假设所有的输入数据之间相互独立&#xff0c;但这对于序列化数据是不成立的。RNN单元用隐藏状态或记忆引入这种依赖…

深度学习技巧应用31-对卷积残差网络ResNet做知识蒸馏技术的实战应用,并加载真实数据集进行蒸馏训练

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用31-对卷积残差网络ResNet做知识蒸馏技术的实战应用,并加载真实数据集进行蒸馏训练。做模型压缩知识蒸馏是一种模型压缩技术,它通过将一个大模型(教师模型)的知识迁移到一个小模型(学生模型)中来实现模型的压缩。这…

日志框架梳理(Log4j,Reload4j,JUL,JCL,SLF4J,Logback,Log4j2)

原文链接 日志框架发展历程 在了解日志框架时总会列出一系列框架&#xff1a;Log4j&#xff0c;Reload4j&#xff0c;JUL&#xff0c;JCL&#xff0c;SLF4J&#xff0c;Logback&#xff0c;Log4j2&#xff0c;这么多框架让人感到混乱&#xff0c;该怎么选取、该怎么用。接下来…

人工智能学习8(集成学习之xgboost)

编译工具&#xff1a;PyCharm 文章目录 编译工具&#xff1a;PyCharm 集成学习XGBoost(Extreme Gradient Boosting)极端梯度提升树1.最优模型的构建方法XGBoost目标函数案例1&#xff1a;泰坦尼克号案例2&#xff1a;对奥拓集团差评进行正确分类。数据准备&#xff1a;1.第一种…

iNet Network Scanner for Mac:简洁高效的WiFi网络扫描软件

随着无线网络的普及&#xff0c;WiFi网络已经成为我们日常生活中必不可少的一部分。无线网络的稳定性和速度对我们的工作和娱乐体验至关重要。因此&#xff0c;一款功能强大、简洁高效的WiFi网络扫描软件非常重要。今天&#xff0c;我们向大家推荐一款优秀的Mac平台WiFi网络扫描…

HarmonyOS4.0从零开始的开发教程04 初识ArkTS开发语言(下)

HarmonyOS&#xff08;二&#xff09; 初识ArkTS开发语言&#xff08;下&#xff09;之TypeScript入门 声明式UI基本概念 应用界面是由一个个页面组成&#xff0c;ArkTS是由ArkUI框架提供&#xff0c;用于以声明式开发范式开发界面的语言。 声明式UI构建页面的过程&#xff…

虚拟机配置网络(这里以centos为例)

①、点击“编辑”里面的“虚拟网络编辑器”,取消勾选DHCP服务将IP地址分配给虚拟机。 2.点击nat设置&#xff0c;看看对应的子网ip和网关地址还有子网掩码&#xff0c;然后在安装虚拟机生成的vmware8适配器配置中配置和刚刚nat配置中一样的配置 3&#xff0c;然后和第二部一样…

AIGC之Image2Video(一)| Animate Anyone:从静态图像生成动态视频,可将任意图像角色动画化

近日&#xff0c;阿里发布了Animate Anyone&#xff0c;只需一张人物照片&#xff0c;结合骨骼动画&#xff0c;就能生成人体动画视频。 项目地址&#xff1a;https://humanaigc.github.io/animate-anyone/ 论文地址&#xff1a;https://arxiv.org/pdf/2311.17117.pdf Github…

力扣116. 填充每个节点的下一个右侧节点指针(详细讲解root根节点的理解)

题目&#xff1a; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右…

酷开科技以创新为动力用大数据提升品牌认知

在21世纪的今天&#xff0c;我们生活在一个被互联网深深改变的世界。互联网不仅改变了我们的生活方式&#xff0c;也正在改变我们的思维方式和工作方式。而互联网作为一种新的发展趋势&#xff0c;更是为我们提供了无数的机会和无限可能性&#xff0c;从电子商务时代到社交网络…

Spring的配置文件,如何配置端口号,,properties,yml获取配置项等方法,外观模式及其优缺点,日志代表的信息

目录 一、回顾 二.如何配置端口号 配置文件&#xff0c;最重要的目的:解决硬编码问题-代码写死 1.常见配置项 yml获取配置项 多次获取配置项&#xff08;yml会对我们的参数情况&#xff0c;进行的一定类型转换比如数字10&#xff0c;转换成“10”&#xff09; null:使用k…

交易历史记录20231205 记录

昨日回顾&#xff1a; select top 10000 * from dbo.CODEINFO A left join dbo.全部&#xff21;股20231205010101 B ON A.CODE B.代码 left join dbo.全部&#xff21;股20231205CONF D on A.CODED.代码left join dbo.全部&#xff21;股20231205 G on A.CODEG.代码 left…

常见面试题之死锁

定义 死锁就是两个或两个以上的线程在执行过程中&#xff0c;由于竞争资源或者互相通信导致彼此占用对方的锁资源而造成的一种阻塞现象&#xff0c;在没有外界作用下都在等待对方释放锁资源&#xff0c;导致程序无法进行下去。 上代码 public class t9 {public static void m…

MongoDB知识总结

这里写自定义目录标题 MongoDB基本介绍MongoDB基本操作数据库相关集合相关增删改查 MongoDB基本介绍 简单介绍 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产…

基于 Stereo R-CNN 的自动驾驶 3D 目标检测

论文地址&#xff1a;https://openaccess.thecvf.com/content_CVPR_2019/papers/Li_Stereo_R-CNN_Based_3D_Object_Detection_for_Autonomous_Driving_CVPR_2019_paper.pdf 论文代码&#xff1a;https://github.com/HKUST-Aerial-Robotics/Stereo-RCNN 论文背景 大多数 3D 物…

Failed to connect to github.com port 443 after 21055 ms: Timed out

目前自己使用了梯*子还是会报这样的错误&#xff0c;连接不到的github。 查了一下原因&#xff1a; 是因为这个请求没有走代理。 解决方案&#xff1a; 设置 -> 网络和Internet -> 代理 -> 编辑 记住这个IP和端口 使用以下命令&#xff1a; git config --global h…