init

.svn/pristine/86/8610403142714cdeed2cb279ff84b67fe9e765aa.svn-base

@@ -0,0 +1,45 @@
+<script lang="ts">
+export default {
+  name: "LayLayout",
+};
+</script>
+
+<script setup lang="ts">
+import { Component, computed, useSlots } from "vue";
+import Header from "../header/index.vue";
+import Footer from "../footer/index.vue";
+import "./index.less";
+
+export interface LayoutProps {
+  isVertical?: boolean;
+}
+
+const slots = useSlots();
+
+const props = withDefaults(defineProps<LayoutProps>(), {
+  isVertical: false,
+});
+
+const isVertical = computed(() => {
+  if (!slots.default) return false;
+  const vNodes = slots.default();
+  return vNodes.some((vNode) => {
+    const componentName = (vNode.type as Component).name;
+    if (!componentName) return false;
+    return (
+      [Header.name].includes(componentName) ||
+      [Footer.name].includes(componentName)
+    );
+  });
+});
+
+const classes = computed(() => {
+  return ["layui-layout", { "layui-layout-vertical": isVertical.value }];
+});
+</script>
+
+<template>
+  <section :class="classes">
+    <slot></slot>
+  </section>
+</template>

.svn/pristine/86/86182a2469c5da8a1f92e7953e11535fc01a83a4.svn-base

@@ -0,0 +1 @@
+.layui-header{box-sizing:border-box;height:60px}

.svn/pristine/86/8660571f7776e81cdf8f3335a482e4481ad59712.svn-base

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+  name: "ThemeIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon :color="props.color" :size="props.size" type="layui-icon-theme" />
+</template>

.svn/pristine/86/86923602a5399822f20010235f2b462a864dbbb7.svn-base

@@ -0,0 +1,3 @@
+x
<01>R<EFBFBD>n<EFBFBD>0<10>9_<39><5F>PQ	q<><71>
+<EFBFBD><EFBFBD>U<>P<EFBFBD>Zz<5A>z<EFBFBD><7A>
+rk֖<EFBFBD>P<10><>ub<75>r%rrvgf<67>;<3B>Rq<52><71><EFBFBD><EFBFBD><0B><><05><><1B>׺O<><0B>G<EFBFBD>:<3A>d{<7B><>9<EFBFBD> 7j
<01>e<EFBFBD><65>A<EFBFBD><41><EFBFBD><EFBFBD>a*<2A>A<EFBFBD>~<7E>F<EFBFBD>|ʿ1<CABF>0r<30>T<EFBFBD>lX<6C><58><1E><>Cꗒ0<EA9792><30>w<EFBFBD>d<EFBFBD><02><0B><>L<EFBFBD><4C><EFBFBD>R+9<13>~<7E><><EFBFBD><><3E><><EFBFBD><EFBFBD><EFBFBD>Qr<51>{<19><><EFBFBD>j<EFBFBD>.<2E>X<EFBFBD>d<EFBFBD>

.svn/pristine/86/86d97ea47a411dd380ffdee71112cc1108993908.svn-base

@@ -0,0 +1,3 @@
+x
<01><>A
+<EFBFBD>0E]<5D><14>2I&<26>D<<3C><17>L&T<>֖t<D696><74><EFBFBD>ܾ<>><Y<><59>٭wp껪-"E<><45><EFBFBD>T<EFBFBD>yPT_<54>="<14><>-<2D>"<22>6<EFBFBD><36>]<5D><>6<EFBFBD>ٻ<>VA<56>}nB<6E>S v<><76><EFBFBD>><3E><><EFBFBD><EFBFBD>1<EFBFBD><31><EFBFBD><1E><>W<EFBFBD><57>g
+c<EFBFBD>o<EFBFBD>E<EFBFBD><EFBFBD>fQ<>)RH<52>	<09>:<3A><><EFBFBD>}4<>l~6<>><3E>

.svn/pristine/86/86fb2571fa7c92170f2a56fd0adf22e49c2a92ec.svn-base

@@ -0,0 +1,234 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 将某一区域的内容全屏展示。
+:::
+
+::: title 浏览器全屏
+:::
+
+::: demo 使用 `lay-fullscreen` 标签包裹触发全屏事件的按钮
+
+<template>
+  <lay-fullscreen v-slot="{ enter, exit, toggle, isFullscreen }" @fullscreenchange=fullscreen>
+    <lay-button type="normal" @click="enter()">进入全屏</lay-button>  
+    <lay-button type="normal" @click="exit()">退出</lay-button> 
+    <lay-button type="warm" @click="toggle()">切换: {{isFullscreen ? "退出" : "进入全屏"}}</lay-button>
+  </lay-fullscreen>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const fullscreen = function(isFullscreen){
+      console.log(isFullscreen)
+    }
+    return {
+      fullscreen
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 局部区域全屏
+:::
+
+::: demo 使用 `target` 属性指定需要局部全屏的元素, 组件必须用 `div` 包裹, 因为不是所有元素都能向浏览器请求全屏
+
+<template>
+  <lay-fullscreen :target="elRef" v-slot="{ enter, exit, toggle, isFullscreen }" @fullscreenchange=fullscreen2>
+    <div ref="elRef" class="wrapper-fullscreen">
+      <lay-button type="normal" @click="enter()">进入全屏</lay-button>  
+      <lay-button type="normal" @click="exit()">退出</lay-button> 
+      <lay-button type="warm" @click="toggle()"> 切换: {{isFullscreen ? "退出" : "进入全屏"}} </lay-button>
+    </div>
+  </lay-fullscreen>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const elRef = ref(null);
+    const fullscreen2 = function(isFullscreen){
+      console.log(isFullscreen)
+    }
+    return {
+      elRef,
+      fullscreen2
+    }
+  }
+}
+</script>
+<style>
+.wrapper-fullscreen{
+  padding:10px;
+  border:1px solid #dddddd;
+  background-color:#F6F6F6;
+  display:inline-block
+}
+</style>
+
+:::
+
+::: title 浏览器窗口内全屏
+:::
+
+::: demo 使用 `target` 属性指定需要局部全屏的元素, 并设置`immersive`属性为 `false`,可使 `target` 在浏览器窗口内全屏
+
+<template>
+  <lay-fullscreen 
+    :target="fullscreenTargetRef" 
+    :immersive="false" 
+    zIndex="10000"  
+    v-slot="{ enter, exit, toggle, isFullscreen }" 
+    @fullscreenchange=fullscreen3>
+    <div ref="fullscreenTargetRef" class="wrapper-fullscreen">
+      <lay-button type="normal" @click="enter()">进入全屏</lay-button>  
+      <lay-button type="normal" @click="exit()">退出</lay-button> 
+      <lay-button type="warm" @click="toggle()"> 切换: {{isFullscreen ? "退出" : "进入全屏"}} </lay-button>
+    </div>
+  </lay-fullscreen>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  
+  setup() {
+    const fullscreenTargetRef = ref(null)
+    const fullscreen3 = function(isFullscreen){
+      console.log(isFullscreen)
+    }
+    return {
+      fullscreenTargetRef,
+      fullscreen3
+    }
+  }
+}
+</script>
+<style>
+.wrapper-fullscreen{
+  padding:10px;
+  border:1px solid #dddddd;
+  background-color:#F6F6F6;
+  display:inline-block
+}
+</style>
+
+:::
+
+::: title 铺满特定容器
+:::
+
+::: demo 使用 `target` 属性指定需要局部全屏的元素, 并设置`immersive = false`, `position="absolute"`,可使 `target` 在特定容器内全屏
+
+<template>
+<div class="container" style="position:relative;height:300px;width:500px;background-color: #cccccc;">
+  <lay-fullscreen 
+    :target="fullscreenTargetRef2" 
+    :immersive="false" 
+    zIndex="12000" 
+    position="absolute"  
+    v-slot="{ enter, exit, toggle, isFullscreen }" 
+    @fullscreenchange=fullscreen4>
+    <div ref="fullscreenTargetRef2" class="wrapper-fullscreen">
+      <lay-button type="normal" @click="enter()">进入全屏</lay-button>  
+      <lay-button type="normal" @click="exit()">退出</lay-button> 
+      <lay-button type="warm" @click="toggle()"> 切换: {{isFullscreen ? "退出" : "进入全屏"}} </lay-button>
+    </div>
+  </lay-fullscreen>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  
+  setup() {
+    const fullscreenTargetRef2 = ref(null);
+    const fullscreen4 = function(isFullscreen){
+      console.log(isFullscreen)
+    }
+    return {
+      fullscreenTargetRef2,
+      fullscreen4
+    }
+  }
+}
+</script>
+<style>
+.container{
+  position:relative;
+  height:300px;
+  width:500px;
+  background-color: red;
+  border:1px solid #dddddd;
+};
+.wrapper-fullscreen{
+  padding:10px;
+  border:1px solid #dddddd;
+  background-color:#F6F6F6;
+  display:inline-block;
+}
+</style>
+
+:::
+
+:::title fullscreen 属性
+:::
+
+:::table
+| 属性 | 描述 | 类型 | 默认值 | 可选值 |
+| --------- | ----------------------------------------- | ------------- | ------ | ------------------- |
+| target | 可选，要全屏显示的元素 | `HTMLElement` | `html` | - |
+| immersive | 可选，全屏模式，`false`时浏览器窗口内全屏 | `boolean` | true | `true` `false` |
+| position | 可选，浏览器窗口内全屏定位模式 | `string` | - | `absolute` `fixed` |
+| zIndex | 可选，全屏层级 | `string` | - | - |
+:::
+
+:::title fullscreen 事件
+:::
+
+:::table
+| 事件 | 描述 | 参数 |
+|------ |----------|-----------|
+| fullscreenchange | 全屏更改事件回调 | isFullscreen 是否全屏 |
+:::
+
+:::title fullscreen 插槽
+:::
+
+:::table
+| 插槽 | 描述 | 参数 |
+|------ |----------|-----------|
+| default | 默认插槽 | - |
+:::
+
+:::title fullscreen 插槽属性
+:::
+
+:::table
+| 属性 | 描述 | 类型 | 参数 |
+| --------- | --------------| ------------- | ------ |
+| enter | 进入全屏 | Function | 可选,`HTMLElement` |
+| exit | 退出全屏 | Function | 可选,`HTMLElement` `Document` |
+| toggle | 进入/退出全屏 | Function | - |
+| isFullscreen | 是否全屏 | boolean | - |
+:::
+
+::: contributor fullscreen
+::: 
+
+::: previousNext fullscreen
+:::