✨(layer): 发布 1.4.0
This commit is contained in:
就眠儀式
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 321 B |
BIN
package/document-layer/src/assets/demo.png
Normal file
BIN
package/document-layer/src/assets/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -124,8 +124,7 @@ const load4 = function() {
|
||||
<button @click="openMaxmin">缩小放大</button>
|
||||
<button @click="openResize">尺寸拉伸</button>
|
||||
<button @click="openIndex">设置层级</button>
|
||||
<button @click="openAreaAuto">内容适应</button>
|
||||
<button @click="openAreaAuto2">内容适应2</button>
|
||||
<button @click="openClose2">关闭主题</button>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
@@ -165,7 +164,7 @@ const openIframe = function() {
|
||||
title: "标题",
|
||||
resize: true,
|
||||
area: ['500px','500px'],
|
||||
content: "http://layui-vue.pearadmin.com"
|
||||
content: "http://www.layui-vue.com"
|
||||
})
|
||||
}
|
||||
|
||||
@@ -210,29 +209,19 @@ const openResize = function() {
|
||||
const openIndex = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
zIndex: 999,
|
||||
title: "标题",
|
||||
content: "设置层级"
|
||||
})
|
||||
}
|
||||
|
||||
const openAreaAuto = function(){
|
||||
const openClose2 = function() {
|
||||
layer.open({
|
||||
type:1,
|
||||
title:"area:auto",
|
||||
isHtmlFragment:true,
|
||||
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
|
||||
})
|
||||
}
|
||||
|
||||
const openAreaAuto2 = function(){
|
||||
layer.open({
|
||||
type:1,
|
||||
title:"area:auto",
|
||||
offset:['10px','50%'],
|
||||
isHtmlFragment:true,
|
||||
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
|
||||
})
|
||||
type: 1,
|
||||
closeBtn: 2,
|
||||
title: "其他关闭",
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -294,9 +283,9 @@ const openRight = function() {
|
||||
::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
|
||||
|
||||
<template>
|
||||
<button @click="signleImg">图片查看</button>
|
||||
<button @click="signleImg2">图片标题</button>
|
||||
<button @click="groupImg">图片分组</button>
|
||||
<button @click="signleImg">图片查看</button>
|
||||
<button @click="signleImg2">图片标题</button>
|
||||
<button @click="groupImg">图片分组</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -319,7 +308,6 @@ const groupImg = function() {
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
@@ -331,12 +319,10 @@ const groupImg = function() {
|
||||
<template>
|
||||
<lay-row :space="30" >
|
||||
<lay-col :span="24">
|
||||
<button @click="baseNotifiy">基本使用</button>
|
||||
<button @click="baseNotifiyRB">右下</button>
|
||||
<button @click="baseNotifiyLT">左上</button>
|
||||
<button @click="baseNotifiyLB">左下</button>
|
||||
<button @click="baseNotifiyTime0">不主动关闭</button>
|
||||
<button @click="baseNotifiyHtml">HTML解析</button>
|
||||
<button @click="baseNotifiy">右上位置</button>
|
||||
<button @click="baseNotifiyRB">右下位置</button>
|
||||
<button @click="baseNotifiyLT">左上位置</button>
|
||||
<button @click="baseNotifiyLB">左下位置</button>
|
||||
</lay-col>
|
||||
<lay-col :span="24">
|
||||
<button @click="NotifiySuccess">成功通知</button>
|
||||
@@ -377,22 +363,6 @@ const baseNotifiyLB = function() {
|
||||
offset:'lb',
|
||||
})
|
||||
}
|
||||
const baseNotifiyTime0 = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题",
|
||||
content:"不会主动关闭，请点击右上角关闭图标",
|
||||
time:0
|
||||
})
|
||||
}
|
||||
const baseNotifiyHtml = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题,有图片时请设置area参数",
|
||||
isHtmlFragment:true,
|
||||
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
|
||||
area:['330px','220px'],
|
||||
time:3000
|
||||
})
|
||||
}
|
||||
const NotifiySuccess=function(){
|
||||
layer.notifiy({
|
||||
title:"Success",
|
||||
@@ -520,4 +490,4 @@ const openComponent2 = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
@@ -0,0 +1,33 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>选项</legend>
|
||||
</fieldset>
|
||||
|
||||
我们提供了丰富的 `options` 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -- | -- | -- | -- | -- |
|
||||
| type | 类型 | string | `1` | `0` `1` `2` `3` `4` `5` |
|
||||
| title | 标题 | string boolean | `信息` | -- |
|
||||
| content | 内容 | string vnode | -- | -- |
|
||||
| v-model | 显示 | boolean | `false` | `true` `false` |
|
||||
| offset | 位置 | string array | `['50%','50%']` | -- |
|
||||
| area | 尺寸 | string array | `auto` | -- |
|
||||
| move | 拖拽 | boolean | `true` | `true` `false` |anim
|
||||
| maxmin | 缩放 | boolean | `false` | `true` `false` |
|
||||
| resize | 拉伸 | boolean | `false` | `true` `false` |
|
||||
| anim | 入场动画 | number | `0` | `0` - `6` |
|
||||
| isOutAnim | 出场动画 | boolean | `true` | `true` `false` |
|
||||
| btnAlign | 按钮位置 | string | `r` | `l` `c` `r` |
|
||||
| closeBtn | 关闭按钮 | boolean string | `1` | `false` `1` `2` |
|
||||
| time | 关闭时间 | number | `0` | -- |
|
||||
| shade | 遮盖层 | boolean | `true` | `true` `false` |
|
||||
| shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
|
||||
| shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
|
||||
| isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
|
||||
| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
|
||||
| startIndex | 图片初始浏览索引 | number | 0 | - |
|
||||
| full | 最大化回调 | function | - | - |
|
||||
| min | 最小化回调 | function | - | - |
|
||||
| restore | 重置回调 | function | - | - |
|
||||
| success | 打开回调 | function | - | - |
|
||||
| end | 关闭回调 | function | - | - |
|
||||
@@ -27,7 +27,7 @@ app.use(layer).mount('#app');
|
||||
|
||||
因 layer-vue 可以独立使用，也可以在 layui-vue 中使用。所以请按照你的实际需求来选择。
|
||||
|
||||
如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue。
|
||||
如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue, 已内置。
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>入门</legend>
|
||||
@@ -68,83 +68,4 @@ const changeVisible = () => {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
</script>
|
||||
```
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>选项</legend>
|
||||
</fieldset>
|
||||
|
||||
我们提供了丰富的 `options` 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -- | -- | -- | -- | -- |
|
||||
| type | 类型 | string | `1` | `0` `1` `2` `3` |
|
||||
| title | 标题 | string boolean | `信息` | -- |
|
||||
| content | 内容 | string vnode | -- | -- |
|
||||
| v-model | 显示 | boolean | `false` | `true` `false` |
|
||||
| offset | 位置 | string array | `['50%','50%']` | -- |
|
||||
| area | 尺寸 | string array | `auto` | -- |
|
||||
| move | 拖拽 | boolean | `true` | `true` `false` |anim
|
||||
| maxmin | 缩放 | boolean | `false` | `true` `false` |
|
||||
| resize | 拉伸 | boolean | `false` | `true` `false` |
|
||||
| anim | 入场动画 | number | `0` | `0` - `6` |
|
||||
| isOutAnim | 出场动画 | boolean | `true` | `true` `false` |
|
||||
| btnAlign | 按钮位置 | string | `r` | `l` `c` `r` |
|
||||
| closeBtn | 关闭按钮 | boolean | `true` | `true` `false` |
|
||||
| time | 关闭时间 | number | `0` | -- |
|
||||
| shade | 遮盖层 | boolean | `true` | `true` `false` |
|
||||
| shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
|
||||
| shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
|
||||
| isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
|
||||
| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
|
||||
| startIndex | 图片初始浏览索引 | number | 0 | - |
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>动画</legend>
|
||||
</fieldset>
|
||||
|
||||
anim：Number，默认：0
|
||||
|
||||
我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。
|
||||
|
||||
另外需要注意的是，3.0之前的版本用的是 shift 参数。
|
||||
|
||||
| 属性 | 描述 |
|
||||
| -- | -- |
|
||||
| anim:0 | 平滑放大 |
|
||||
| anim:1 | 从上掉落 |
|
||||
| anim:2 | 从最底部往上滑入 |
|
||||
| anim:3 | 从左滑入 |
|
||||
| anim:4 | 从左翻滚 |
|
||||
| anim:5 | 渐显 |
|
||||
| anim:5 | 抖动 |
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>问题</legend>
|
||||
</fieldset>
|
||||
|
||||
直接调用 layer 的方法，组件会通过 Vue.render 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
|
||||
|
||||
当你需要 context 信息（例如使用全局注册的组件）时，可以通过 appContext 属性传递当前组件 context, 当你需要保留属性响应式时，你可以使用函数返回:
|
||||
|
||||
```
|
||||
import { getCurrentInstance, ref } from 'vue';
|
||||
import { layer } from "@layui/layer-vue";
|
||||
|
||||
const appContext = getCurrentInstance().appContext;
|
||||
|
||||
const title = ref("标题")
|
||||
|
||||
layer.open({
|
||||
title: () => title.value,
|
||||
content: h("children"),
|
||||
appContext: appContext
|
||||
})
|
||||
```
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>结语</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 以写作为工具，为道途，先帮助自己一程，再以自己的领悟帮助他人一程, 这是一种服务 -- 庆山
|
||||
<template></template>
|
||||
<script setup></script>
|
||||
:::
|
||||
```
|
||||
22
package/document-layer/src/document/zh-CN/question.md
Normal file
22
package/document-layer/src/document/zh-CN/question.md
Normal file
@@ -0,0 +1,22 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>问题</legend>
|
||||
</fieldset>
|
||||
|
||||
直接调用 layer 的方法，组件会通过 Vue.render 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
|
||||
|
||||
当你需要 context 信息（例如使用全局注册的组件）时，可以通过 appContext 属性传递当前组件 context。
|
||||
|
||||
```
|
||||
import { getCurrentInstance, ref } from 'vue';
|
||||
import { layer } from "@layui/layer-vue";
|
||||
|
||||
const appContext = getCurrentInstance().appContext;
|
||||
|
||||
const title = ref("标题")
|
||||
|
||||
layer.open({
|
||||
title: () => title.value,
|
||||
content: h("children"),
|
||||
appContext: appContext
|
||||
})
|
||||
```
|
||||
@@ -3,25 +3,18 @@
|
||||
<div class="markdown-body light-scheme">
|
||||
<div class="alone-header">
|
||||
<img class="alone-logo" src="../assets/logo.png" />
|
||||
<a
|
||||
style="
|
||||
<a style="
|
||||
position: absolute;
|
||||
right: 16%;
|
||||
line-height: 60px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
"
|
||||
>{{ version }}</a
|
||||
>
|
||||
<a
|
||||
href="https://gitee.com/layui-vue/layer-vue"
|
||||
style="position: absolute; right: 10%; line-height: 75px"
|
||||
>
|
||||
">{{ version }}</a>
|
||||
<a href="https://gitee.com/layui-vue/layer-vue" style="position: absolute; right: 10%; line-height: 75px">
|
||||
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
|
||||
></path>
|
||||
<path fill="#fff"
|
||||
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
@@ -37,9 +30,14 @@
|
||||
<lay-tab-item title="入门" id="/zh-CN/index"></lay-tab-item>
|
||||
<lay-tab-item title="示例" id="/zh-CN/demo"></lay-tab-item>
|
||||
<lay-tab-item title="帮助" id="/zh-CN/help"></lay-tab-item>
|
||||
<lay-tab-item title="问题" id="/zh-CN/question"></lay-tab-item>
|
||||
</lay-tab>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="footer footer-index">
|
||||
<p>Released under the <a href="/index.html">MIT License</a>.</p>
|
||||
<p>Copyright © 2021-2022 layui-vue.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</lay-scroll>
|
||||
</template>
|
||||
@@ -104,12 +102,14 @@ body {
|
||||
border-bottom: none !important;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.alone-banner p {
|
||||
padding-top: 40px;
|
||||
color: #e2e2e2;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.alone-download {
|
||||
width: 77.5%;
|
||||
border-radius: 4px;
|
||||
@@ -124,6 +124,10 @@ body {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
.layui-container {
|
||||
padding-bottom: 50px!important;
|
||||
}
|
||||
|
||||
.layui-elem-field {
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
@@ -135,4 +139,16 @@ body {
|
||||
.layui-tab-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 30px 0px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eee;
|
||||
color: rgba(60, 60, 60, 0.7);
|
||||
font-weight: 300;
|
||||
font-size: 13.6px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,6 +22,11 @@ const zhCN = [
|
||||
component: () => import("../document/zh-CN/help.md"),
|
||||
meta: { title: "帮助" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/question",
|
||||
component: () => import("../document/zh-CN/question.md"),
|
||||
meta: { title: "问题" },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user