开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

用惯了vue后，要用html+css写项目确实很难受。就好像用惯了打火机，突然让自己钻木取火，等点着火了黄花菜都凉了。还是要选用一个前端框架，最终选定了layui。主要是看好它的轻量化，上手也快。

走起

我大致看了一下layui的功能和基础说明，开启了项目中边用边学之路。
基本使用还是很简单的，为了返璞归真，我是在官网中下载的压缩包，只保留layui.js和layui.css。
项目开发中，发现扩展模块的使用还是需要做些研究的，这里写下来给大家避坑。

以联级选择器cascader为例

引入扩展模块

引入cascader，这里需要用到layui加载扩展模块。
我是直接在html页面里引入cascader模块。

layui.config({
  base: '../../' //根据自己的路径填写
}).extend({
  layCascader: 'Cascader/cascader'
}).use('layCascader') //加载入口

cascader与jQuery的冲突

加载成功后出现了报错“Uncaught Error: type property can't be changed”。
报错原因是使用的jQuery不允许修改type属性。
我使用的是jquery-1.8.2.min.js，因为项目中要求使用该版本的jQuery，升级成本太高，就只能对cascader.js里进行修改。
很简单，把$e.attr('type', 'hidden')改成$e.type='hidden'，cascader.js里有很多这样写的都得进行修改

使用cascader

解决了报错问题后，就是使用问题了。
cascader使用方法git文档里有详细的说明，这里不做赘述。
在使用事件时，我一开始和使用layui自身组件写法一样，但获取不到数据，如下：

layCascader({
  elem: '#EditSkill',
  clearable: true,
  options: skillOptions,
  props: {
    multiple: true
  },
  changeEvent：function (values) {
    console.log(values)//没有打印
  }
});

后来修改方法，能正常获取数据，如下：

var layCascader1 = layCascader({
  elem: '#AddSkill',
  clearable: true,
  options: skillOptions,
  props: {
    multiple: true
  }
});
layCascader1.changeEvent(function (values) {
  console.log(values)//获取选中的值
});

仔细看了一下laypage分页的事件使用，是在laypage.render里进行的，而cascader没有render，所以直接在里面调用方法失败了。

拜个年

还没过十五，还是要给jym拜个年的，祝大家兔年大吉，兔飞猛进，扬眉兔气！