init
This commit is contained in:
Binary file not shown.
Binary file not shown.
1011
.svn/pristine/68/6855d0875a627d96c452cd22516fb153fef096cd.svn-base
Normal file
1011
.svn/pristine/68/6855d0875a627d96c452cd22516fb153fef096cd.svn-base
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
.lay-page-header{display:flex;line-height:24px}.lay-page-header__left{display:flex;cursor:pointer;margin-right:40px;position:relative;color:var(--global-neutral-color-8)}.lay-page-header__left:after{content:"";position:absolute;width:1px;height:16px;right:-20px;top:50%;transform:translateY(-50%);background-color:var(--global-neutral-color-8)}.lay-page-header__left:hover .layui-icon-return,.lay-page-header__left:hover .lay-page-header__title{color:var(--global-checked-color)!important}.lay-page-header__left .layui-icon-return{font-size:14px;margin-right:6px;align-self:center}.lay-page-header__title{font-size:14px}.lay-page-header__content{font-size:18px;color:#393d49}
|
||||
@@ -0,0 +1,195 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 栅格化系统，是基于行（row）和列（col）来定义区块的外部框架，以保证页面的元素能够稳健地排布起来。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-row space="10">
|
||||
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="12"><div class="grid-demo">2</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">3</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">4</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">5</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">6</div></lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 栅格偏移
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-row space="10">
|
||||
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="6" mdOffset="6"><div class="grid-demo">2</div></lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 栅格适应
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-row space="10">
|
||||
<lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="12" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 流式布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-container fluid>
|
||||
<lay-row space="10">
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">4</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">6</div></lay-col>
|
||||
</lay-row>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title Row 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |默认值 |可选值 |
|
||||
| ----- | ---- | ------ | ------ | ------ |
|
||||
| space | 间隔 | `number` `string` | -- |0 - 30 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Col 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| --------- | ------------------------------ | ------ |------ |------ |
|
||||
| xs | 尺寸 - 超小屏幕 (手机<768px) | `number` `string` | -- | 0 - 24 |
|
||||
| sm | 尺寸 - 小屏幕 (平板 ≥768px) | `number` `string` | -- | 0 - 24 |
|
||||
| md | 尺寸 - 中等屏幕 (桌面 ≥992px) | `number` `string` | -- | 0 - 24 |
|
||||
| lg | 尺寸 - 大型屏幕 (桌面 ≥1200px) | `number` `string` | -- |0 - 24 |
|
||||
| xs-offset | 偏移 - 超小屏幕 (手机<768px) | `number` `string` | -- |0 - 24 |
|
||||
| sm-offset | 偏移 - 小屏幕 (平板 ≥768px) | `number` `string` | -- | 0 - 24 |
|
||||
| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px) | `number` `string` | -- |0 - 24 |
|
||||
| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | `number` `string` | -- |0 - 24 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor grid
|
||||
:::
|
||||
|
||||
::: previousNext grid
|
||||
:::
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,510 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>消息</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数`msg`为消息内容, 第二参数`options`为可选配置, 常用于配置`time`超时时间等。
|
||||
|
||||
<template>
|
||||
<button @click="msg">普通消息</button>
|
||||
<button @click="success">成功消息</button>
|
||||
<button @click="failure">失败消息</button>
|
||||
<button @click="warm">警告消息</button>
|
||||
<button @click="info">锁定消息</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const msg = function() {
|
||||
layer.msg("普通消息", { time: 3000, id: "1" })
|
||||
}
|
||||
|
||||
const success = function() {
|
||||
layer.msg("成功消息", { time: 3000, id: "1" ,icon: 1})
|
||||
}
|
||||
|
||||
const failure = function() {
|
||||
layer.msg("失败消息", { time: 1000, icon: 2})
|
||||
}
|
||||
|
||||
const warm = function() {
|
||||
layer.msg("警告消息", { time: 1000, icon: 3})
|
||||
}
|
||||
|
||||
const info = function() {
|
||||
layer.msg("疑问消息", { time: 1000, icon: 4})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>确认</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数`msg`为文本消息, 第二个参数`options`为选项配置, 你可以使用`options`的`btn`属性定义操作。
|
||||
|
||||
<template>
|
||||
<button @click="openConfirm1">确认框</button>
|
||||
<button @click="openConfirm2">询问框</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const openConfirm1 = function() {
|
||||
layer.confirm("layui-vue 1.0.0 已经发布")
|
||||
}
|
||||
|
||||
const openConfirm2 = function() {
|
||||
layer.confirm("你如何看待 layui-vue 的发布",
|
||||
{btn:
|
||||
[
|
||||
{text:'站着看', callback: function(id){layer.close(id);}},
|
||||
{text:'坐着看', callback: function(id){layer.close(id);}}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>加载</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数`type`为加载动画样式, 第二个参数`options`为可选配置, 常用于设置`time`加载时长`shade`遮盖层等。
|
||||
|
||||
<template>
|
||||
<button @click="load1">加载1</button>
|
||||
<button @click="load2">加载2</button>
|
||||
<button @click="load3">加载3</button>
|
||||
<button @click="load4">加载4</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const load1 = function() {
|
||||
layer.load(0, {id:"1", time: 3000})
|
||||
}
|
||||
|
||||
const load2 = function() {
|
||||
layer.load(1, {time: 2000})
|
||||
}
|
||||
|
||||
const load3 = function() {
|
||||
layer.load(2, {time: 2000})
|
||||
}
|
||||
|
||||
const load4 = function() {
|
||||
layer.msg("加载中...",{icon: 16, time: 2000})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>模态</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 通过 layer.open(option) 创建模态窗, 目前支持`iframe` `page`等类型, 你可以使用`options`选项开启`Resize` `Offset`等更多特性。
|
||||
|
||||
<template>
|
||||
<lay-row :space="30" >
|
||||
<lay-col :span="24">
|
||||
<button @click="open">小试牛刀</button>
|
||||
<button @click="openSize">指定尺寸</button>
|
||||
<button @click="openOffset">指定位置</button>
|
||||
<button @click="openIframe">远程窗体</button>
|
||||
<button @click="openHtml">代码片段</button>
|
||||
</lay-col>
|
||||
<lay-col :span="24">
|
||||
<button @click="openVNode">虚拟节点</button>
|
||||
<button @click="openMaxmin">缩小放大</button>
|
||||
<button @click="openResize">尺寸拉伸</button>
|
||||
<button @click="openIndex">设置层级</button>
|
||||
<button @click="openClose2">关闭主题</button>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const open = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
|
||||
const openSize = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
area: ['400px','400px'],
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
|
||||
const openOffset = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
offset: ['100px','100px'],
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
|
||||
const openIframe = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "标题",
|
||||
resize: true,
|
||||
area: ['500px','500px'],
|
||||
content: "http://www.layui-vue.com"
|
||||
})
|
||||
}
|
||||
|
||||
const openHtml = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
isHtmlFragment: true,
|
||||
content: "<p style='color:red;'>内容</p>"
|
||||
})
|
||||
}
|
||||
|
||||
const openVNode = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
content: h('button', { style: 'margin: 10px;' },'按钮')
|
||||
})
|
||||
}
|
||||
|
||||
const openMaxmin = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
maxmin: true,
|
||||
content: "内容",
|
||||
full:(e)=>{console.log('full',e)},
|
||||
min:(e)=>{console.log('min',e)},
|
||||
restore:(e)=>{console.log('restore',e)}
|
||||
})
|
||||
}
|
||||
|
||||
const openResize = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
resize: true,
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
|
||||
const openIndex = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
zIndex: 999,
|
||||
title: "标题",
|
||||
content: "设置层级"
|
||||
})
|
||||
}
|
||||
|
||||
const openClose2 = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
closeBtn: 2,
|
||||
title: "其他关闭",
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>抽屉</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 通过 layer.drawer(options) 创建抽屉层, `options`选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用`offset`选项来设置方向。
|
||||
<template>
|
||||
<button @click="openTop">上</button>
|
||||
<button @click="openBottom">下</button>
|
||||
<button @click="openLeft">左</button>
|
||||
<button @click="openRight">右</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const openTop = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "t"
|
||||
})
|
||||
}
|
||||
|
||||
const openBottom = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "b"
|
||||
})
|
||||
}
|
||||
|
||||
const openLeft = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "l"
|
||||
})
|
||||
}
|
||||
|
||||
const openRight = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "r"
|
||||
})
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>图片</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
|
||||
|
||||
<template>
|
||||
<button @click="signleImg">图片查看</button>
|
||||
<button @click="signleImg2">图片标题</button>
|
||||
<button @click="groupImg">图片分组</button>
|
||||
<button @click="groupImg2">带缩略图</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const signleImg = function() {
|
||||
layer.photos("http://www.pearadmin.com/assets/images/un1.svg")
|
||||
}
|
||||
const signleImg2 = function() {
|
||||
layer.photos({
|
||||
imgList:[{src:'http://www.pearadmin.com/assets/images/un2.svg',alt:'layer for vue'}]
|
||||
})
|
||||
}
|
||||
const groupImg = function() {
|
||||
layer.photos({
|
||||
imgList:[
|
||||
{ src:'http://www.pearadmin.com/assets/images/un8.svg', alt:'图片1'},
|
||||
{ src:'http://www.pearadmin.com/assets/images/un32.svg', alt:'图片2'}
|
||||
]
|
||||
})
|
||||
}
|
||||
const groupImg2 = function() {
|
||||
layer.photos({
|
||||
imgList:[
|
||||
{
|
||||
src:'http://www.pearadmin.com/assets/images/un8.svg',
|
||||
alt:'图片1',
|
||||
thumb:'http://www.pearadmin.com/assets/images/un8.svg'
|
||||
},
|
||||
{
|
||||
src:'http://www.pearadmin.com/assets/images/un32.svg',
|
||||
alt:'图片2',
|
||||
thumb:'http://www.pearadmin.com/assets/images/un32.svg'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>通知</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 通过 layer.notifiy(options) 创建通知。
|
||||
|
||||
<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>
|
||||
</lay-col>
|
||||
<lay-col :span="24">
|
||||
<button @click="NotifiySuccess">成功通知</button>
|
||||
<button @click="NotifiyFailure">失败通知</button>
|
||||
<button @click="NotifiyWarm">警告通知</button>
|
||||
<button @click="NotifiyInfo">锁定通知</button>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const baseNotifiy = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题",
|
||||
content:"默认就是右上，也是用得最多的"
|
||||
})
|
||||
}
|
||||
const baseNotifiyRB = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题",
|
||||
content:"我出现在右下",
|
||||
offset:'rb',
|
||||
})
|
||||
}
|
||||
const baseNotifiyLT = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题",
|
||||
content:"我出现在左上",
|
||||
offset:'lt',
|
||||
})
|
||||
}
|
||||
const baseNotifiyLB = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题",
|
||||
content:"我出现在左下",
|
||||
offset:'lb',
|
||||
})
|
||||
}
|
||||
const NotifiySuccess=function(){
|
||||
layer.notifiy({
|
||||
title:"Success",
|
||||
content:"默认就是右上，也是用得最多的",
|
||||
icon:1
|
||||
})
|
||||
}
|
||||
const NotifiyFailure=function(){
|
||||
layer.notifiy({
|
||||
title:"Error",
|
||||
content:"默认就是右上，也是用得最多的",
|
||||
icon:2
|
||||
})
|
||||
}
|
||||
const NotifiyWarm=function(){
|
||||
layer.notifiy({
|
||||
title:"Warming",
|
||||
content:"默认就是右上，也是用得最多的",
|
||||
icon:3
|
||||
})
|
||||
}
|
||||
const NotifiyInfo=function(){
|
||||
layer.notifiy({
|
||||
title:"Question",
|
||||
content:"默认就是右上，也是用得最多的",
|
||||
icon:4
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>销毁</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
|
||||
|
||||
<template>
|
||||
<button @click="open">打开</button>
|
||||
<button @click="close">销毁</button>
|
||||
<button @click="closeAll">销毁全部</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { layer } from "../../../../layer/src/index";
|
||||
|
||||
let id = null;
|
||||
|
||||
const open = function() {
|
||||
id = layer.open({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
shade: false
|
||||
})
|
||||
}
|
||||
|
||||
const close = function() {
|
||||
layer.close(id);
|
||||
}
|
||||
|
||||
const closeAll = function() {
|
||||
layer.closeAll();
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>通讯</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 👉 查看 [Children1.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqdUkGO00AQ/ErLFyeSY5OrSaJFK87LA3yZtTub2R3PjGba0UaWD5w4cUTiCDwA+AGfQZH4BT127HXEjZu7XNVTXd1t9Mba9NhglEcbwtoqQbgrNMDmviEyGm5KJcunbREZi/rW1NZo1LQuot3508/zx++bbCAOIqltQ0Ani6wgfKYiguOqNhUqBipBInVYC/fEeMaSTTY9CoXm2pdOWgIl9EPo4JnnkRrLXMlvO4IWHIqS5BETOCRceKOOODmDDvbO1BDzUPFMpMQJ3fTzhstGZj24umLeHqSqHOo7jRdumo3YOiTFVOi9lkZ7gjATbCdPizb8HmbMIf796+v5/Y84KXS3fNFcR8nqxRK2O+ilvaU0MIZWACRJIfc6f/nw59vn0Cug3IlYncNhMbOc8KS9o2554fmDqFi9F8pjDwUjXUh+iJqDjZJoGH5VC5s+eqP5GtriAvIK8rbrmHQVw78Hszeu7r/+4w5Ykl30s5N4uYfxBsYEsZbEuVW4lxrfcuEXcSmUwiqe5WydsX6ivQvVEGowkMPd/SOWNK5mFkh4l04KwZe8iIqR4G3YjxVVJfVDDutX9vn1GGVg76LuL+G7LGU=), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
|
||||
|
||||
<template>
|
||||
<button @click="openComponent1">数据</button>
|
||||
<input type="text" v-model="data.remark" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, h, resolveComponent } from 'vue'
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const data = reactive({
|
||||
remark: "信息"
|
||||
})
|
||||
const ChildrenOne = resolveComponent('Children1')
|
||||
const openComponent1 = () => {
|
||||
layer.open({
|
||||
title: '标题',
|
||||
content: h(ChildrenOne, { data }),
|
||||
shade: false,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo 👉 查看 [Children2.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqNksFum0AQhl9lxAWsYmPnSG2UKOoTtLfSA4Yh3hZ2VzC4sRDnSO2h1x6jPkQP7esklfoWnQXWAaWHcGJmv5n9d+ZvnSutV8cGndDZEpa6SAijWAJs9w2RknCZFiL9tIsdpVFeq1IriZIuYid6+PX14ffPbTCAQ5GQuiGgk0auILyl2IHjslQZFpyQTbnnRMDsNpjcxmGdVkITFIm8MZU1YzVSo/lU8J0VQQsVJimJI/pw8DnIoYO8UiW4rN+dcEVywup8eMlhI4I+uZyR1wdRZBXKd5/VyK4Cm7swQ2E0lqmSNYGulIbdWYLXdgt7ZF7VH+XeZr1ec96ezEfGjLeAXQStGVWvZ2UIr48BSFCBIbh/7u/+/vju+kOWOxFXh3DwJnr9oYn5jLKRBVDyKsu8CuvFEwC9wtUxKRpkDZPgFWws1E1avG32L26xfN6iW/Q/ZkCdWfSwWl6k4zvD5JdlolcfayXZdW08JnnlYdt1DM128NyYuarK/u/JpKPhhoitczZtkmXs1Mcv9zObvqCwbtip0ePdt7m/g/HymX2tea1h7fqxFMTTyjAXEt9wUHvvXVbk+i63dz9MnMLZuT2gr/Z6fBikRbn0/6jpadHJ1I0+OhUIdcpuyzhj3jCUam4v5E0Im7W+fW33ZejI6f4B7opkgw==), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。
|
||||
|
||||
<template>
|
||||
<button @click="openComponent2">事件</button>
|
||||
<input type="text" v-model="numb" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, h, resolveComponent, ref } from 'vue'
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const prop = reactive({})
|
||||
const numb = ref(1000)
|
||||
const ChildrenTwo = resolveComponent('Children2')
|
||||
|
||||
const openComponent2 = () => {
|
||||
layer.open({
|
||||
title: '标题',
|
||||
content: h(ChildrenTwo, {
|
||||
prop,
|
||||
onAdd(res){
|
||||
numb.value = numb.value + 1;
|
||||
}, onSub(res) {
|
||||
numb.value = numb.value - 1;
|
||||
}
|
||||
}),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
Binary file not shown.
@@ -0,0 +1,19 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, openBlock, createElementBlock, renderSlot } from "vue";
|
||||
var index = /* @__PURE__ */ (() => ".layui-header{box-sizing:border-box;height:60px}\n")();
|
||||
const _hoisted_1 = { class: "layui-header" };
|
||||
const __default__ = {
|
||||
name: "LayHeader"
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...__default__,
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { _sfc_main as _, component as c };
|
||||
Reference in New Issue
Block a user