❗ 重命名 docs 为 example

example/src/components/LayCode.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="lay-code">
+    <div id="source" class="source">
+      <slot />
+    </div>
+    <div ref="meta" class="meta">
+      <div v-if="$slots.description" class="description">
+        <slot name="description" />
+      </div>
+      <div class="language-html">
+        <slot name="code" />
+      </div>
+    </div>
+    <div :class="{ 'is-fixed': isFixContorl }" class="control">
+      <i class="layui-icon layui-icon-file" @click="copy" />
+      <i class="layui-icon layui-icon-fonts-code" @click="toggle" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+const meta = ref<HTMLElement>({} as HTMLElement)
+const isFixContorl = ref(false)
+const codeAreaHeight = ref(0)
+
+const show = ref(false)
+
+const toggle = function () {
+  show.value = !show.value
+}
+
+const copy = function () {
+  var Url2 = document.getElementById('source') as any
+  Url2.select()
+  document.execCommand('Copy')
+}
+
+onMounted(() => {
+  const foundDescs = meta.value.getElementsByClassName('description')
+  const foundCodes = meta.value.getElementsByClassName('language-html')
+
+  if (foundDescs.length) {
+    codeAreaHeight.value =
+      foundDescs[0].clientHeight + foundCodes[0].clientHeight + 30
+  } else {
+    codeAreaHeight.value = foundCodes[0].clientHeight + 20
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
+watch(show, (value) => {
+  if (value) {
+    meta.value.style.height = `${codeAreaHeight.value}px`
+    window.addEventListener('scroll', handleScroll)
+    setTimeout(handleScroll, 100)
+  } else {
+    meta.value.style.height = '0'
+    window.removeEventListener('scroll', handleScroll)
+  }
+})
+
+function handleScroll() {
+  const { top, bottom } = meta.value.getBoundingClientRect()
+  isFixContorl.value =
+    bottom > window.innerHeight && top + 44 <= window.innerHeight
+}
+</script>
+
+<style>
+.lay-code {
+  margin: 1rem 0;
+  border: 1px solid whitesmoke;
+  border-radius: 3px;
+  background: var(--c-bg);
+  transition: all 0.2s;
+}
+.lay-code:hover {
+  box-shadow: var(--shadow-2);
+}
+.lay-code .source {
+  padding: 24px;
+}
+.lay-code .meta {
+  padding: 0 10px;
+  height: 0;
+  background-color: var(--c-page-background);
+  overflow: hidden;
+  transition: height 0.2s;
+}
+.lay-code .meta .description {
+  padding: 20px;
+  margin: 10px 0;
+  border: 1px solid whitesmoke;
+  box-sizing: border-box;
+  background: var(--c-bg);
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--c-text-light-1);
+  word-break: break-word;
+}
+.lay-code .meta .description p {
+  margin: 0 !important;
+  line-height: 26px !important;
+}
+.lay-code .meta .description code {
+  display: inline-block;
+  padding: 1px 5px;
+  margin: 0 4px;
+  height: 18px;
+  border-radius: 2px;
+  background-color: var(--code-inline-bg-color);
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--c-text-light);
+}
+.lay-code .control {
+  height: 44px;
+  box-sizing: border-box;
+  margin-top: 10px;
+  border-top: 1px solid whitesmoke;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background: var(--c-bg);
+  text-align: center;
+  color: var(--c-text);
+  cursor: pointer;
+  width: 100%;
+  user-select: none;
+}
+.lay-code .control.is-fixed {
+  position: sticky;
+  z-index: 11;
+  bottom: 0;
+}
+.lay-code .control:hover {
+  background-color: var(--c-page-background);
+  color: var(--c-brand);
+}
+.lay-code .control > i {
+  display: inline-block;
+  font-size: 16px;
+  line-height: 44px;
+  transition: all 0.3s;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+</style>

example/src/components/LaySearch.vue

@@ -0,0 +1,124 @@
+<template>
+  <select :name="name" lay-verify="required" />
+  <div
+    class="layui-unselect layui-form-select layui-search"
+    :class="[openState ? 'layui-form-selected' : '']"
+    @click="open"
+    style="margin-left: 20px"
+  >
+    <div class="layui-select-title">
+      <input
+        type="text"
+        placeholder="Search"
+        class="layui-input layui-unselect"
+        :value="name"
+        style="
+          background: rgba(255, 255, 255, 0.05);
+          border: none;
+          color: rgba(255, 255, 255, 0.7);
+          width: 196px;
+          height: 34px;
+        "
+        @input="change"
+      /><i class="layui-edge"></i>
+    </div>
+    <dl class="layui-anim layui-anim-upbit" style="">
+      <dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
+      <dd
+        v-for="data in menus"
+        v-else
+        :key="data"
+        :value="name"
+        class="layui-select-tips"
+        @click="jump(data)"
+      >
+        {{ data.title }}
+      </dd>
+    </dl>
+  </div>
+</template>
+
+<script setup name="LaySelect" lang="ts">
+import { defineProps, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Recordable } from '/@src/module/type'
+
+const props = defineProps<{
+  datas?: Recordable[]
+}>()
+
+const route = useRoute()
+const router = useRouter()
+
+const openState = ref(false)
+const menus = ref(props.datas)
+const name = ref('')
+
+const open = function () {
+  openState.value = !openState.value
+}
+
+const jump = function (data: any) {
+  name.value = data.title
+  router.push(data.path)
+}
+
+const change = function (e: any) {
+  name.value = e.target.value
+  if (e.target.value === '') {
+    menus.value = props.datas
+  } else {
+    menus.value = searchList(e.target.value, props.datas)
+  }
+}
+
+const searchList = function (str: string, container: any) {
+  var newList = []
+  var startChar = str.charAt(0)
+  var strLen = str.length
+  for (var i = 0; i < container.length; i++) {
+    var obj = container[i]
+    var isMatch = false
+    for (var p in obj) {
+      if (typeof obj[p] == 'function') {
+        obj[p]()
+      } else {
+        var curItem = ''
+        if (obj[p] != null) {
+          curItem = obj[p]
+        }
+        for (var j = 0; j < curItem.length; j++) {
+          if (curItem.charAt(j) == startChar) {
+            if (curItem.substring(j).substring(0, strLen) == str) {
+              isMatch = true
+              break
+            }
+          }
+        }
+      }
+    }
+    if (isMatch) {
+      newList.push(obj)
+    }
+  }
+  return newList
+}
+</script>
+
+<style>
+.layui-search .layui-anim::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.layui-search .layui-anim::-webkit-scrollbar-corner {
+  background: #f6f6f6;
+}
+.layui-search .layui-anim::-webkit-scrollbar-thumb {
+  background: #e6e6e6;
+  border-radius: 2px;
+}
+.layui-search .layui-anim::-webkit-scrollbar-track {
+  background: white;
+  border-radius: 2px;
+}
+</style>

example/src/components/LayTableBox.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="lay-table-box">
+    <slot></slot>
+  </div>
+</template>
+<style>
+.lay-table-box table {
+  width: 100%; /*表格宽度*/
+  border-collapse: collapse; /*使用单一线条的边框*/
+  empty-cells: show; /*单元格无内容依旧绘制边框*/
+  border-right: 1px solid whitesmoke;
+  border-left: 1px solid whitesmoke;
+  border-radius: 4px;
+}
+
+.lay-table-box table tbody {
+  border-bottom: 1px solid whitesmoke;
+}
+
+.lay-table-box table th,
+.lay-table-box table td {
+  font-size: 14px;
+  width: 160px;
+  max-width: 160px;
+  height: 50px; /*统一每一行的默认高度*/
+  border-top: 1px solid whitesmoke; /*内部边框样式*/
+  padding: 0 10px; /*内边距*/
+  padding-left: 28px;
+}
+
+.lay-table-box table th {
+  color: #666;
+  font-weight: 500;
+  white-space: nowrap; /*表头内容强制在一行显示*/
+  background-color: #fafafa;
+}
+
+.lay-table-box table td {
+  white-space: nowrap;
+}
+</style>