theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(layer): 发布 1.4.0

Browse Source
This commit is contained in:
就眠儀式
2022-07-06 10:09:41 +08:00
parent dc56a071b7
commit 43c4ef2e47
12 changed files with 211 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
package/document-layer/src/document/zh-CN/demo.md
View File

@@ -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>
:::
:::

33
package/document-layer/src/document/zh-CN/help.md
View File

@@ -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 | - | - |

83
package/document-layer/src/document/zh-CN/index.md
View File

@@ -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
View 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
})
```