layui switch组件使用总结
2020-03-11 03:33 黑夜已过半 阅读(9695) 评论(0) 编辑 收藏 举报
layui switch组件使用总结:
1.引入 layui.js 或layui.all.js文件。
2.放入组件的标签:可以用经过简化的:
<div class="layui-form" >
<input type="checkbox" :id="item.Id" @click.stop="clickMe" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF"/>
</div>
可以设置样式: .layui-form-switch 来调整大小等样式
3.初始化组件:这个过程需要在vue的updated生命周期中完成。
//vue生命周期:数据发生改变后
updated: function () {
layui.use(['form'], function () {
//加载layui的表单组件样式
form.render();
})
}
4.//组件的事件可以写在初始化中,也可以写在jq的onload事件中
layui.use(['form'], function () {
form = layui.form
, layer = layui.layer
//监听指定开关
form.on('switch(switchTest)', function (data) {
//获取当前的新闻的id
var id = data.elem.id;
//是否置顶
var is_top = "";
if (this.checked) {
is_top = "1";
//layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), {
// offset: '6px'
//});
//layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅 仅是ON|OFF', data.othis)
} else {
is_top = "0";
//layer.msg('开关: 关掉了', {
// offset: '6px'
//});
}
//do some ajax opeartiopns;
//修改当前的新闻的状态
var url = "";
var data = {};
var res = pub_ajax(url, data);
//刷新页面
RefreshData();
});
其中第3步骤是最关键的,必须在vue的update生命周期中执行组件的render()函数才能显示组件。