普通弹出窗口:
显示
我是模态框内容
弹出窗口使用 l-modal 标签,将弹出窗口显示与否绑定为 v-model ,属性 title 可以设置弹出窗口的标题;
标签内的默认插槽内容成为弹出窗口的内容,在名为 title 的插槽中的内容将渲染为标题; 弹出窗口关闭时会触发 close 事件
底部弹出窗口:
显示
我是底部模态框内容
给 l-modal 标签添加属性 type="bottom" 即设为底部弹出窗口;
底部窗口有一个名为 action 的插槽,该插槽的内容将渲染到底部弹出窗口的按钮区
对话弹出窗口:
显示
选择了
{{ confirmValue }}
我是对话窗口的内容
给 l-modal 标签添加属性 type="confirm" 即可设为对话弹出窗口,对话弹出窗口有确认和取消按钮;
点击确认按钮将触发 ok 事件,点击取消按钮将触发 cancel 事件
图片弹出窗口:
显示
给 l-modal 标签添加属性 type="img" 即可设为图片弹出窗口,设置属性 img 来设置图片的地址
单选弹出窗口:
显示
选择了
{{ radioValue }}
给 l-modal 标签添加属性 type="radio" 即可设为单选弹出窗口;
单选弹出窗口需要设置属性 range 表示单选项,设置属性 radio 表示当前选中的项;
单选弹出窗口有事件 radioChange、radioIndex 表示单选项、Index 发生改变
多选弹出窗口:
显示
选择了
{{ checkboxValue.join(',') }}
给 l-modal 标签设置属性 type="checkbox" 即可设为多选弹出窗口;
多选弹出窗口需要设置属性 range 表示多选项,设置属性 checkbox 表示当前选中的项;
多选弹出窗口有事件 checkboxChange、checkboxIndex 表示选项值、Index 发生改变,另有 ok、cancel 事件表示点击了确定、取消