在HTML当中引入Vue控件,以element-ui为例

前情:需要实现一个同时满足按天、按周、按月选择的时间选择器,但是以HTML为基础写的都不太满足我的要求,要么只能按天选择,要么就是想选择久远的时间得点很久,除非自己写捷径,所以就看上了element-ui的这个时间选择器。

其实要想用的话很简单,先引入vue和element-ui的js和css。

这里我用的是本地的js引入,地址分别为:【vue这个可能连不上,可以自己去找。

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下载到本地后引入:

<script type="text/javascript" src="../static/js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../static/css/element-ui-index.css">
<!-- 引入组件库 -->
<script src="../static/js/index.js"></script>

要注意的点是vue必须在element-ui上面,我这个css改名了主要是我原本就有一个index的css了,如果和我情况不一样的话可以维持原来的名称不变。

然后在需要此vue组件生效的区域定义一个div标签,等会用js初始化,比如我这个时间选择器在顶部,我就拿个id为app的div包裹起来,然后new一个Vue。

 <div class="container" id="app"><div class="block"><span class="demonstration">周</span><el-date-pickerv-model="value1"type="week"format="yyyy 第 WW 周"placeholder="选择周"></el-date-picker></div></div>
<script>new Vue({el: '#app',data: function() {return {value1:""}}})</script>

到这里基本OK了,但是我遇到了以下几个问题,也许你也会遇到:

1.vue版本和element-ui版本不匹配的问题:

报错内容:Uncaught SyntaxError: Unexpected token '<'

我刚开始用的是vue3,出现了index.js无法读取的问题,然后把vue降为2就可以了,如果一定要用vue3的话,element-ui首页有讲相关方法,可以自己去查。【我没用过,但是估计就和我的在html中引入的想法相悖了,就没试

2.script 后面没加 type="module"导致的报错

这个其实忘了报的什么错了,后来加了就好了,但是我今天试了下把它去掉也能用。。

3.element-ui的模块,图标不正常显示的问题。

这个是因为我们下载的css当中没有font文件,去下载就好了。

地址:UNPKG - element-ui

下载这个地址的两个文件即可,注意要和css、js的版本一致,【不过应该一直没更新差别不大

然后如果没点进去,在外面直接右键链接另存为是不行的,下载完成之后大小明显和页面当中显示的不一样,读取会失败,最好是点进去之后然后View Raw,在新的网页右键另存为,或者有的浏览器可以直接自动下载,下载完成后对比一下文件大小。

下载完成后到你的css文件夹中新建一个fonts文件夹,把这两个文件丢进去就好了。

嗯,这个教程就到此为止了,祝你成功

和正常vue项目的区别是,因为你这个是初次使用vue,所以必须新建然后在里面写,如果按照element-ui当中的代码,export,就只会失败。

bonus:如果在vue这块的代码中引入js包,该怎么处理?

我在抄另一个代码的时候,看到用到了this.$moment,显然我们的HTML文件是不支持这样的用法的,import也是不行的,但其实可以直接用上面的方法引入js包,然后直接moment()调用方法。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动静分离技术

一、HAproxy 动静分离 1、概念&#xff1a; HAproxy 动静分离技术是一种用于优化 Web 服务器性能和提高用户体验的策略&#xff0c;它通过将动态内容和静态内容分别路由到不同的后端服务器来实现&#xff0c;减轻服务器负载&#xff0c;提高网站的响应速度。 动态内容包括由…

SylixOS BSP开发(七)

实现系统调试信息打印接口 当系统出错时或者使用内核日志时会输出一些打印信息&#xff0c;这最终都是调用到bspLib.c中的bspDebugMsg 这个接口来实现的&#xff0c;所以我们在开发BSP时&#xff0c;第一个要做的工作就是实现这个接口。 一般的调试信息都是通过串口来输出的&am…

经典目标检测神经网络 - RCNN、SSD、YOLO

文章目录 1. 目标检测算法分类2. 区域卷积神经网络2.1 R-CNN2.2 Fast R-CNN2.3 Faster R-CNN2.4 Mask R-CNN2.5 速度和精度比较 3. 单发多框检测&#xff08;SSD&#xff09;4. YOLO 1. 目标检测算法分类 目标检测算法主要分两类&#xff1a;One-Stage与Two-Stage。One-Stage与…

虚拟机Ubuntu下运行vue-element-admin项目

一.环境搭建 1.安装nodejs sudo apt install nodejs 安装完成后&#xff0c;查看对应的版本号 nodejs -v没有问题&#xff0c;会输出对应版本号&#xff0c;我这里是10.19.0 v10.19.0 2.安装npm sudo apt install npm安装完成查看对应的版本号&#xff0c;确认OK npm -…

linux中nginx配置https

一、版本适配 版本一定要适配&#xff0c;否则会报错各种参数定位不到不识别的错误&#xff0c;以下是版本适配信息&#xff0c;各位观客自行按照以下信息匹配版本。 Nginx 1.11.5及以上版本与OpenSSL 1.0.2及以上版本兼容。Nginx 1.15.2及以上版本与OpenSSL 1.1.1及以上版本兼…

JavaScript_Pig Game保存当前分数

上个文章我们基本上完成了摇色子和切换当前玩家的功能。 现在我们开始写用户选择不再摇骰子的话&#xff0c;我们将用户的当前分数存入到持有分数中&#xff01; ● 首先我们应该利用一个数组去存储两个用户的分数 const scores [0, 0];● 接着我们利用数组来对分数进行累…

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程

&#x1f9f8;注&#xff1a;不要看我的文件多&#xff0c;那是我的其他项目&#xff0c;这个项目所用的文件我会全部用红框框起来&#xff0c;没框的部分不用管&#xff0c;前端两个文件&#xff0c;后端一个文件 &#x1f4dc; 目录 首先&#xff0c;定义前后端交互接口 然…

Oracle (7)Online Redo Log Files

目录 一、Oracle Online Redo Log Files及其相关内容介绍 1、Online Redo Log Files简介 2、Online Redo Log Files特点 3、Online Redo Log Files文件组 4、多路复用文件 5、联机重做日志文件工作方式 6、LGWR什么时候写重做 7、LS和LSN 8、删除Redo文件成员 9、删除…

ZYNQ连载07-PIN设备

ZYNQ连载07-PIN设备 1. 简述 RT-Thread PIN设备 这里参看RT-Thread提供的PIN设备管理接口&#xff0c;简单封装了几个接口函数。 2. 实现 #include "include/drv_gpio.h" #define LOG_TAG "drv_gpio" static XGpioPs xgpiops;void rt_pin_mode(rt_…

目标检测算法改进系列之嵌入Deformable ConvNets v2 (DCNv2)

Deformable ConvNets v2 简介&#xff1a;由于构造卷积神经网络所用的模块中几何结构是固定的&#xff0c;其几何变换建模的能力本质上是有限的。在DCN v1中引入了两种新的模块来提高卷积神经网络对变换的建模能力&#xff0c;即可变形卷积 (deformable convolution) 和可变形…

JVM虚拟机:从结构到指令让你对栈有足够的认识

本文重点 在前面的课程中,我们学习了运行时数据区的大概情况,从本文开始,我们将对一些组件进行详细的介绍,本文我们将学习栈。栈内存主管java的运行,是在线程创建时创建的,它是线程私有的,它的生命周期是跟随线程的生命期,也就是说线程结束栈内存就释放了,对于栈来说…

HarmonyOS鸿蒙原生应用开发设计- 图标库

HarmonyOS设计文档中&#xff0c;为大家提供了独特的图标库&#xff0c;开发者可以根据需要直接引用。 图标库可以分为双色图标、填充图标、线性图标。具体分为 键盘、箭头、连接状态、媒体、人、设备、索引、通信、文件、物体与工具等。 整体分类 开发者直接使用官方提供的图标…

【影刀演示_发送邮件的格式化HTML留存】

发送邮件的格式化HTML留存 纯文本&#xff1a; 亲爱的小张: 端午节将至&#xff0c;公司为了感谢大家一年以来的辛勤工作和付出&#xff0c;特别为大家准备了京客隆超市福利卡&#xff0c;希望为大家带来些许便利和节日的喜悦。 以下是您的福利卡卡号和密码&#xff0c;请您…

故障诊断模型 | Maltab实现LSTM长短期记忆神经网络故障诊断

文章目录 效果一览文章概述模型描述源码设计参考资料效果一览 文章概述 故障诊断模型 | Maltab实现LSTM长短期记忆神经网络故障诊断 模型描述 长短记忆神经网络——通常称作LSTM,是一种特殊的RNN,能够学习长的依赖关系。 他们由Hochreiter&Schmidhuber引入,并被许多人进行了…

springboot--基本特性--自定义 Banner

SpringApplication的使用 前言效果1.1 自定义banner1.2 自定义SpringApplication配置文件优先级高于程序化调整的优先级启动自定义banner关闭自定义banner 1.3 FluentBuilder API 前言 修改启动时候的修改banner 效果 1.1 自定义banner banner制定官网链接 在配置文件中设置…

【java学习—十】HashSet集合(4)

文章目录 1. Java集合概述2. HashSet3. 泛型 1. Java集合概述 Java 集合类存放于 java.util 包中&#xff0c;是一个用来存放对象的容器。 ① 集合只能存放对象。比如你存一个 int 型数据 1 放入集合中&#xff0c;其实它是自动转换成 Integer类后存入的&#xff0c; Java 中每…

如何选择适合企业需求的企业知识库管理软件

随着信息技术的不断发展&#xff0c;知识管理软件在企业中扮演着越来越重要的角色。它们帮助企业有效地组织、存储和共享大量的知识资源&#xff0c;提高团队之间的协作效率&#xff0c;并为决策提供有力支持。那企业该如何才能选到合适的企业知识库管理软件呢&#xff1f; 一、…

css列表样式

html文件如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> <link href"css/style.css" rel"stylesheet" type"text/css">&…

修改svc的LoadBalancer的IP引发的惨案

文章目录 背景修改externalIPs的操作api-server报错日志挽救教训 背景 k8s集群没有接外部负载均衡&#xff0c;部署istio的时候ingressgateway一直pending。 于是手动修改了这个lb svc的externalIP&#xff0c;于是k8s就崩了&#xff0c;如何崩的&#xff0c;且听我还道来。 …

状态模式-对象状态及其转换

某信用卡业务系统&#xff0c;银行账户存在3种状态&#xff0c;且在不同状态下存在不同的行为&#xff1a; 1&#xff09;正常状态&#xff08;余额大等于0&#xff09;&#xff0c;用户可以存款也可以取款&#xff1b; 2&#xff09;透支状态&#xff08;余额小于0且大于-20…