当前位置:首页 > vue.js技术文章 > 详解如何在vue项目中使用layui框架及采坑

在vue项目中使用layui框架的方法及采坑总结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:367

这篇文章主要知识点是关于vue、layui、框架、采坑、详解Vue.js和layui日期控件冲突问题解决办法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js快速入门

目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

查看详情

详解如何在vue项目中使用layui框架及采坑

根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui

1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨)

在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错。

所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入

2.第二个坑:下载的文件包必须放在static文件中

我尝试了把下载的文件夹放在与html文件的同级目录下和放在src目录下或者放在assets目录下,均报layui没有定义的错误

3.正确的使用姿势:

我们把文件放在static文件下,然后在html文件下引入,这样就可以在任意的组件中使用到layui这个对象了,这样我们就可以正确的使用layui里面的各种ui组件了

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>pm</title>
  <link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css" rel="external nofollow" /> 
  <script type="text/javascript" src="./static/layui/layui.js"></script>
  <style type="text/css">
  	body,html{
  		margin:0;
  		padding:1;
  	}
  </style>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

要使用的组件:

<template>
<div class="layui-progress">
	 <div class="layui-progress-bar" lay-percent="10%"></div>
</div>
</template>
 
<script>
export default{
	data(){
		return {
			
		}
	},
	mounted(){
		layui.use('element', function(){
		 var element = layui.element
		})
	},
	methods:{
		
	}
}
</script>

以上是个人使用时的一些经验总结,如各位有更好的建议或者本人有错误之处都可以反馈出来,希望能帮到大家,谢谢

以上所述是小编给大家介绍的vue使用layui框架详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

详解Vue.js和layui日期控件冲突问题解决办法

事故还原:

今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model去掉就好,但是去掉的话就没办法动态绑定后台数据.

下面是html+vuejs+layui

lyui通过use方法获取到input的ID实现日期选择,但是vue的model绑定和layui是有冲突的.

对于这个情况大概处理思路是这样的:我们就不让他自动绑定了,把这个input的v-model属性去掉,然后再form表单提交之前利用jquery手动给这个属性赋值就好了.

<input type="text" id="beginTime" name="teacherLeave.leaveBegin" v-model="teacherLeave.leaveBegin" class="layui-input">开始时间
<input type="text" name="teacherLeave.reson" v-model="teacherLeave.reson" class="layui-input">


<script>
layui.use('laydate', function() {
  var laydate = layui.laydate;
  //执行一个laydate实例
  laydate.render({
    elem : '#beginTime' 
  });
 });
</script>

下面是具体处理的伪代码:

//模拟提交方法
saveOrUpdate: function () {
   //输出赋值之前的leaveBegin的值,为undefined
   //vm是vue.js页面的一个data对象,这部分是vue.js的知识,不用特别在意
   alert(vm.teacherLeave.leaveBegin);
   //通过jquery获取html页面input的value值,并将这个值(即时间日期)赋给js中data的vm的teacherLeave属性
   vm.teacherLeave.leaveBegin = $('#beginTime').val();
   //输出赋值之后的leaveBegin的值,作对比
   alert(vm.teacherLeave.leaveBegin);
   //获取的值不一样,说明赋值成功
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue中的watch监听数据变化及、 vuex的实例用法教程、 Vue2实现组件props双向绑定、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue使用mui的弹出日期选择插件实例详解

下一篇:vue.js的vue-cli脚手架使用百度地图API的代码

展开 +

收起 -

学习笔记
网友NO.949330

layui框架table 数据表格的方法级渲染详解

如下所示: table class="layui-table" lay-filter="demo11" id="test11"/table //js 规范书写 var tst=table.render({elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field: 'paycard', title: '流水编号', width: 120} ]] ,url: '/pay/getlist/??PHP echo $_SERVER["QUERY_STRING"]; ?'}); 以上这篇layui框架table 数据表格的方法级渲染详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.539193

layui动态表头的实现代码

又get到一种思路,不光是layui。 外面这层table,就是用原生拼接的。 @Override public ListMapString, Object distribution(String begin,String end,String name,String hospitalCode) { HashMapString, Object params = new HashMapString, Object(); StringBuffer buf = new StringBuffer(); ListHRateAllotDepartment hRateAllotDepartment = rateAllotDepartmentDao.getRateDepartment(hospitalCode); String str1 = ""; String str2 = ""; for(int i=0;ihRateAllotDepartment.size();i++) { str1 +=",sum(`"+hRateAllotDepartment.get(i).getDepartmentName()+"`)`"+hRateAllotDepartment.get(i).getDepartmentName()+"`"; str2 +=",max(case when e.`name`='"+hRateAllotDepartment.get(i).getDepartmentName()+"' then f.price else 0 end) `"+hRateAllotDepartment.get(i).getDepartmentName()+"`"; } buf.append("select d.`name`,d.productId_,count(*) renshu,sum(price) total"+str1+" "); buf.append(" from ( SELECT b.`name`,b.id productId_ ,d.id,max(b.price) price "); buf.append(" "+str2+" FROM "); buf.append(" dt_pay_he……

网友NO.887799

jquery基于layui实现二级联动下拉选择(省份城市选择)

先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) div class="layui-form-item" label class="layui-form-label"城市/label div class="layui-input-inline" select name="city" lay-filter="province" option value=""/option option value="11"北京市/option option value="12"天津市/option option value="13"河北省/option option value="14"山西省/option option value="15"内蒙古自治区/option option value="21"辽宁省/option option value="22"吉林省/option option value="23"黑龙江省/option option value="31"上海市/option option value="32"江苏省/option option value="33"浙江省/option option value="34"安徽省/option option value="35"福建省/option option value="36"江西省/option option value="37"山东省/option option value="41"河南省/option option value="42"湖北省/option option value="43"湖南省/option option value="44"广东省/option option value="45"广西壮族自治区/option option value=……

网友NO.884916

layui 表单标签的校验方法

layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。 required(必填项)phone(手机号)email(邮箱)url(网址)number(数字)date(日期)identity(身份证)自定义值 同时支持多条规则的验证,格式:lay-verify=”验证A|验证B” 如:lay-verify=”required|phone|number” 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify=”pass”,那么你就需要借助form.verify()方法对pass进行一个校验规则的定义 示例: div class="layui-form-item" label for="" class="layui-form-label"请输入邮件/label div class="layui-input-block" input type="text" placeholder="请输入邮件" lay-verify="email" class="layui-input" /div /div 填入非法邮件时,点击提交会有笑脸图标提示,挺棒的! 自定义校验: form.verify({ username: function(value, item){ //value:表单的值、item:表单的DOM对象 if(!new RegExp("^[a-zA-Z0-9……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757