2021-11-01 01:02:21 +08:00
|
|
|
::: title 基本使用
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
2021-11-02 21:26:41 +08:00
|
|
|
<lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
|
2021-12-06 09:35:18 +08:00
|
|
|
<lay-modal title="基础使用" v-model="visible1">
|
2021-11-28 18:53:42 +08:00
|
|
|
</lay-modal>
|
2021-11-01 01:02:21 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const visible1 = ref(false)
|
|
|
|
|
|
|
|
const changeVisible1 = function() {
|
|
|
|
visible1.value = !visible1.value
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
visible1
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 允许拖动
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
|
2021-12-06 09:35:18 +08:00
|
|
|
<lay-modal title="允许拖动" v-model="visible2">
|
2021-11-28 18:53:42 +08:00
|
|
|
</lay-modal>
|
2021-11-01 01:02:21 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const visible2 = ref(false)
|
|
|
|
|
|
|
|
const changeVisible2 = function() {
|
|
|
|
visible2.value = !visible2.value
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
visible2
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 放大缩小
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
|
2021-12-06 09:35:18 +08:00
|
|
|
<lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
|
2021-11-28 18:53:42 +08:00
|
|
|
</lay-modal>
|
2021-11-01 01:02:21 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const visible3 = ref(false)
|
|
|
|
|
|
|
|
const changeVisible3 = function() {
|
|
|
|
visible3.value = !visible3.value
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
visible3
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 指定位置
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
|
2021-12-06 09:35:18 +08:00
|
|
|
<lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
|
2021-11-28 18:53:42 +08:00
|
|
|
</lay-modal>
|
2021-11-01 01:02:21 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const visible4 = ref(false)
|
|
|
|
|
|
|
|
const changeVisible4 = function() {
|
|
|
|
visible4.value = !visible4.value
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
visible4
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 远程窗体
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
|
2021-12-06 09:35:18 +08:00
|
|
|
<lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
|
2021-11-01 01:02:21 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const type5 = ref(2)
|
|
|
|
const visible5 = ref(false)
|
|
|
|
|
|
|
|
const changeVisible5 = function() {
|
|
|
|
visible5.value = !visible5.value
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
type5,
|
|
|
|
visible5
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 定义操作
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
|
2021-12-06 09:35:18 +08:00
|
|
|
<lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
|
2021-11-28 18:53:42 +08:00
|
|
|
</lay-modal>
|
2021-11-01 01:02:21 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const visible6 = ref(false)
|
|
|
|
const btn6 = [
|
|
|
|
{text:'确认', callback: ()=>{ alert("确认事件") }},
|
|
|
|
{text:'取消', callback: ()=>{ alert("取消事件") }}
|
|
|
|
]
|
|
|
|
|
|
|
|
const changeVisible6 = function() {
|
|
|
|
visible6.value = !visible6.value
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
btn6,
|
|
|
|
visible6
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-11-28 18:53:42 +08:00
|
|
|
::: title 关闭遮盖
|
2021-11-01 05:59:44 +08:00
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
|
2021-12-09 13:43:58 +08:00
|
|
|
<lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
|
2021-11-28 18:53:42 +08:00
|
|
|
</lay-modal>
|
2021-11-01 05:59:44 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const visible7 = ref(false)
|
|
|
|
|
|
|
|
const changeVisible7 = function() {
|
|
|
|
visible7.value = !visible7.value
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
visible7
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-11-28 18:53:42 +08:00
|
|
|
::: title 函数调用
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
2021-12-06 22:58:46 +08:00
|
|
|
<lay-button @click="open" type="primary">打开</lay-button>
|
|
|
|
<lay-button @click="close" type="primary">关闭</lay-button>
|
|
|
|
<lay-button @click="closeAll" type="primary">关闭所有</lay-button>
|
2021-11-28 18:53:42 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref, watch } from "vue";
|
|
|
|
import { layer } from "../../../../src/index.ts"
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
let id = null;
|
|
|
|
|
|
|
|
const open = function() {
|
|
|
|
id = layer.open({title:"标题",content:"内容", shade: false})
|
|
|
|
}
|
|
|
|
|
|
|
|
const close = function() {
|
|
|
|
layer.close(id)
|
|
|
|
}
|
|
|
|
|
|
|
|
const closeAll = function() {
|
|
|
|
layer.closeAll()
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
open,
|
|
|
|
close,
|
|
|
|
closeAll
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-11-01 01:02:21 +08:00
|
|
|
::: title 弹层属性
|
|
|
|
:::
|
|
|
|
|
2021-11-07 15:55:08 +08:00
|
|
|
::: table
|
|
|
|
|
2021-11-07 15:56:24 +08:00
|
|
|
| 备注 | 描述 | 默认值 |
|
|
|
|
| --------------- | ------------- | -------------------------- |
|
|
|
|
| title | 标题 | -- |
|
|
|
|
| move | 允许拖拽 | `false` |
|
|
|
|
| maxmin | 最小化 最大化 | `false` |
|
|
|
|
| offset | 位置 | -- |
|
2021-12-06 22:58:46 +08:00
|
|
|
| area | 尺寸 | -- |
|
|
|
|
| v-model | 展示 隐藏 | false |
|
2021-11-07 15:56:24 +08:00
|
|
|
| content | 内容 | -- |
|
|
|
|
| shade | 开启遮盖 | -- |
|
|
|
|
| shadeClose | 遮盖点击关闭 | -- |
|
|
|
|
| zIndex | 自定义层级 | -- |
|
2021-11-07 15:55:08 +08:00
|
|
|
| type | 类型 | `1: component` `2: iframe` |
|
2021-11-07 15:56:24 +08:00
|
|
|
| closeBtn | 显示关闭 | true |
|
2021-11-07 21:34:34 +08:00
|
|
|
| btn | 按钮 | |
|
2021-11-07 20:39:53 +08:00
|
|
|
| btnAlign | 按钮布局 | `l` `r` `c` |
|
2021-11-18 15:23:24 +08:00
|
|
|
| anim | 入场动画 | `0` `-` `6` |
|
|
|
|
| isOutAnim | 关闭动画 | `true` `false` |
|
2021-11-07 15:55:08 +08:00
|
|
|
|
2021-11-07 21:34:34 +08:00
|
|
|
:::
|