init

.svn/pristine/1c/1c043ad3e32cd51a58ebb87658987e37672cf47d.svn-base

@@ -0,0 +1,20 @@
+<script lang="ts">
+export default {
+  name: "FontsCodeIcon",
+};
+</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-fonts-code"
+  />
+</template>

.svn/pristine/1c/1c43960e66d72704dc08e3a82d33ac660fa4ba30.svn-base

@@ -0,0 +1,39 @@
+<template>
+  <div class="lay-page-header">
+    <div class="lay-page-header__left" @click="emits('back')">
+      <slot name="backIcon"
+        ><i class="layui-icon" :class="[backIcon]"></i
+      ></slot>
+      <div class="lay-page-header__title">{{ backText }}</div>
+    </div>
+    <div class="lay-page-header__content">
+      <slot v-if="slots.default"></slot>
+      <template v-else> {{ content }}</template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayPageHeader",
+};
+</script>
+<script lang="ts" setup>
+import { useSlots } from "vue";
+import "./index.less";
+
+export interface PageHeaderProps {
+  content?: string;
+  backText?: string;
+  backIcon?: string;
+}
+const props = withDefaults(defineProps<PageHeaderProps>(), {
+  content: "",
+  backText: "返回",
+  backIcon: "layui-icon-return",
+});
+
+const emits = defineEmits(["back"]);
+
+const slots = useSlots();
+</script>

.svn/pristine/1c/1ca9c9d8aae94dc99bcf270603b455f634a43cca.svn-base

@@ -0,0 +1,12 @@
+.layui-container {
+  position: relative;
+  margin: 0 auto;
+  padding: 0 15px;
+  box-sizing: border-box;
+}
+
+.layui-fluid {
+  position: relative;
+  margin: 0 auto;
+  padding: 0 15px;
+}

.svn/pristine/1c/1cee5875bab2b380ff3a02f012576d06e6750db5.svn-base

@@ -0,0 +1,71 @@
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>安装</legend>
+</fieldset>
+
+通过 npm 工具安装 :
+
+```
+npm install @layui/layer-vue
+```
+
+在 main.ts 完成 layer-vue 的注册, 并导入 css 文件 :
+
+```
+import App from './App';
+import { createApp } from 'vue';
+import layer from '@layui/layer-vue';
+import '@layui/layer-vue/lib/index.css';
+
+const app = createApp(App);
+
+app.use(layer).mount('#app');
+```
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>场景</legend>
+</fieldset>
+
+因 layer-vue 可以独立使用，也可以在 layui-vue 中使用。所以请按照你的实际需求来选择。
+
+如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue, 已内置。 
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>入门</legend>
+</fieldset>
+
+我们提供 `layer` 函数来创建弹出层 :
+
+```
+<template>
+  <button type="button" @click="open">打开</button>
+</template>
+
+<script setup>
+import { layer } from "@layui/layer-vue";
+
+const open = function () {
+  layer.open({title:"标题", content: "内容"});
+};
+</script>
+```
+
+但在较为复杂的应用场景中, `lay-layer` 是一个更好的选择 :
+
+```
+<template>
+  <button @click="changeVisible">显示/隐藏</button>
+  <lay-layer v-model="visible">
+    content
+  </lay-layer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+
+const changeVisible = () => {
+  visible.value = !visible.value;
+}
+</script>
+```