layer-vue 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
layer-vue 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
layer-vue 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Vue 组件
开源组织
地区 国产
投 递 者 就眠仪式
适用人群 未知
收录时间 2022-01-21

软件简介

layer - vue 是一款基于 vue 3.0 的 Web 弹层组件, 内置 dialog, page, iframe, loading, msg, drawer 等反馈组件

安装

layer - vue 作为独立项目的存在,首先我们需要使用 npm 或 yarn 进行安装

1.npm

npm install @layui/layer-vue

2.yarn

yarn add @layui/layer-vue

3.css

import "@layui/layer-vue/lib/index.css"

使用

layer-vue 提供了 组件 与 函数 两种调用方式

组件方式:

<template>
  <lay-layer v-model="visible">
    内容
  </lay-layer>
</template>
<script>
import { LayLayer } from "@layui/layer-vue";
export default {
  components: {
    LayLayer
  },
  setup(){
    const visible = ref(false)
    return {
      visible
    }
  }
}
</script>

你可以使用 v-model 配置,控制 lay-layer 的展示与隐藏

弹层通常作为 js 的回调反馈出现,所以函数的调用方式,更贴合我们的使用

核心函数:

// 消息
layer.msg(msg,option, callback)

// 提示
layer.confirm(msg, option, callback)

// 加载
layer.load(type, option, callback)

// 模态窗
layer.open(option, callback)

// 抽屉
layer.drawer(option, callback)

// 关闭
layer.close(id);

// 关闭所有
layer.closeAll();

使用案例:

<template>
  <button type="button" @click="openSuccess">提示消息</button>
</template>

<script setup>
import { ref } from "vue";
import { layer } from "@layui/layer-vue";

const openSuccess = function () {
  layer.msg("成功消息",{icon:1,time:1000});
};
</script>

阅读文档

属性

备注 描述 默认值
title 标题 --
move 允许拖拽 false
maxmin 最小化 最大化 false
offset 位置 --
area 尺寸 --
v-model 展示 隐藏 false
content 内容 --
shade 开启遮盖 --
shadeClose 遮盖点击关闭 --
shadeOpacity 遮盖层透明度 0.1
zIndex 自定义层级 --
type 类型 0: dialog 1: page 2: iframe 3: loading 4: drawer
closeBtn 显示关闭 true
btn 按钮  
btnAlign 按钮布局 l r c
anim 入场动画 0 1 2 3 4 5 6
isOutAnim 关闭动画 true false
isHtmlFragment html 解析  
success 显示回调 --
end 关闭回调 --
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
发表了资讯
03/14 13:31

layer-vue 1.3.10 发布,一套 vue 3.0 的全方位弹出层解决方案

项目介绍:layer - vue 是 一 套 vue 3.0 的 全 方 位 弹 出 层 解 决 方 案 在线文档 源码仓库 更新内容: 【修复】函数调用首次打开时,窗体位置闪烁 【修复】当 area 选项设置为 % 百分比时,content 高度计算错误 【修复】Extraneous non-props attributes (currNode) were passed to component.. 警告信息 【优化】使用 nextTick 代替 setTimeout 异步操作 【优化】title 支持 Function 类型,具备响应特性 【优化】提供 ...

3
3
发表了资讯
01/21 11:37

layer-vue 1.3.0 发布, 一款口碑极佳的 Web 弹出层组件

新特性 [新增] layer.msg 函数,消息框 [新增] layer.load 函数,加载层 [新增] layer.confirm 函数,询问框 [新增] layer.open 函数,模态窗 [新增] layer.drawer 函数,抽屉 [新增] layer.close 与 layer.closeAll 销毁函数 [新增] isHtmlFangement 属性支持 html 片段解析 [新增] resize 属性,允许窗体拉伸 [新增] reset 方法,提供 area 与 offset 复位 [新增] min 方法,最小化时底边固定 [新增] options 新增 success 与...

1
12
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
0 评论
14 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部