在Vue项目中使用LayUI教程且解决laydate无效的问题

1，安装LayUI开发包
2，导入LayUI开发包
3，在挂载函数mounted中加载LayUI组件
4，解决加载LayUI日期组件出现的错误
5，整合后的界面

笔者在前段时间使用LayUI开发了一款编解码工具，现在项目中使用的是Vue，因此希望在新项目中整合该工具。因此就涉及到Vue项目如何使用LayUI的问题。

1，安装LayUI开发包

因为LayUI依赖jquery，因此需要同步安装。

npm i jquery
npm i layui-src

2，导入LayUI开发包

在需要整合工具的View组件里导入依赖。

import 'jquery/dist/jquery.min'
import 'layui-src/dist/css/layui.css'
import 'layui-src/dist/layui.js'

这种导入方式和直接在link标签里导入是一致的。

3，在挂载函数mounted中加载LayUI组件

当DOM元素被渲染完毕后，才能够使用，因此需要在mounted()函数里加载需要用到的LayUI的组件

 layui.use(['element', 'layer','form','laydate','table'], function(){your code area})

4，解决加载LayUI日期组件出现的错误

在编解码工具中使用了日期组件，但是点击无反应，且控制台报下述错误。

layui error hint: http://localhost:8080/js/css/modules/laydate/default/laydate.css?v=5.3.1 timeout

字面意义就是请求该路径超时，查询该路径是无效的，因此重新引入该模块的CSS文件即可，即将该文件import进来。

import 'layui-src/dist/css/modules/laydate/default/laydate.css'

这家伙又出现了

在Vue项目中使用LayUI教程且解决laydate无效的问题相关推荐

VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失
VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失背景:今天在写项目时需要用到,route.query获取参数,本来这是一个很简单的问题,但是我遇到了参数丢失的问题环境: ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
iconfont小图标从下载到引入到vue项目中的详细教程
地址:iconfont-阿里巴巴矢量图标库 iconfont小图标下载: (1)查找图标在搜索框直接文字搜索或者看下面的小图标库,找想要的,每个小图标库都有一个名字,比如:"阿里云官网& ...
vue项目中的一些报错解决方法
1.mixed spaces and tabs no-mixed-spaces-and-tabs 禁止使用空格和tab混合缩进:大多数代码约定要求使用空格或 tab 进行缩进.因此,一行代码同时混有 ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
保姆级教程：js前端接入科大讯飞语音评测，实现朗读打分，vue对接科大讯飞语音评测，还可以实现句子逐词分析对错以及打分，将demo接入vue项目中
需求说明:实现一个点击录制英文句子朗读,然后调用科大讯飞接口分析朗读准确度,并逐词分析朗读正确性. 步骤一.下载运行demo 首先附上科大讯飞语音评测流式版的文档链接:链接在此然后在文档里找到dem ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
G2Plot水波图在vue项目中的实现
由于工作需要要实现水波图,大概的效果就是如下里面的水波是动态的,在网上找了很久才找到G2Plot有这样的图例第一次使用G2Plot,有很多不知道地方,还有vue的知识不够充实,所以写下了这篇本人对 ...

在Vue项目中使用LayUI教程且解决laydate无效的问题

在Vue项目中使用LayUI教程且解决laydate无效的问题

1，安装LayUI开发包

2，导入LayUI开发包

3，在挂载函数mounted中加载LayUI组件

4，解决加载LayUI日期组件出现的错误

在Vue项目中使用LayUI教程且解决laydate无效的问题相关推荐

最新文章

热门文章