在 Vue 组件化开发中，使用 Layui 可以帮助你快速构建美观且易用的用户界面。Layui 是一套前端UI框架，提供了丰富的组件和工具，能够方便地与 Vue 进行集成。下面是一个简单的步骤，帮助你快速入门 Layui 的使用：
在 Vue 项目中，可以使用 npm 安装 Layui。
npm install layui
在 Vue 组件中使用 Layui初始化
在 Vue 组件化开发中，要快速入门 Layui 并创建一个 Layui 的 .js 文件来初始化 Layui
import 'jquery';
import 'layui';
import 'layui/dist/css/layui.css';
export default function initLayui() {
layui.config({
dir: 'layui/dist/layui.js' //layui.js 所在目录（如果是 script 单独引入 layui.js，无需设定该参数）一般可无视
,version: true //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610
,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
});
layui.define(['transfer','rate', 'carousel'], function (exports) {
var rate = layui.rate;//在此调用组件，也可以在具体页面调用组件
// 初始化评分组件
rate.render({
elem: '#score', // 绑定元素的选择器
length: 5, // 评分的总星数
value: 3, // 默认选中的星数
readonly: false, // 是否只读
theme: '#FF5722', // 主题颜色
text: true, // 是否显示评分文字
setText: function (value) { // 自定义评分文字的回调函数
this.span.text(value + "星");
}
});
var carousel = layui.carousel;
// 这里可以使用 rate 和 carousel 组件进行相关操作
//建造实例
carousel.render({
elem: '#test1'
,height: '332px'
, width: '500px' //设置容器宽度
, arrow: 'hover' //始终显示箭头
,anim: 'fade' //切换动画方式
,indicator: 'outside'
,interval: 3000,//切换速度
});
//触发轮播切换事件
carousel.on('change(test1)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
});
//穿梭框
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test2' //绑定元素
,data: [
{"value": "1", "title": "李白", "disabled": "", "checked": ""}
,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
]
,id: 'demo1' //定义索引
});
exports('index', {});
});
}
在vue页面中引入
<div class="" > <!-- 注意：这一层元素并不是必须的 -->
<span id="testView"></span>
<div id="laydate"></div>
</div>
import initLayui from "@/layui/layuiInit"
mounted() {
initLayui(); // 初始化Layui
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#laydate' //指定元素
, type: 'date',
position: 'static'
, change: function (value, date) { //监听日期被切换
lay('#testView').html(value);
}
,theme: 'molv'
,calendar: true
})
});
},
