[文档] 新增顶部选择

2021-10-06 23:22:30 +08:00 · 2021-10-06 23:22:30 +08:00 · 478450b94a
commit 478450b94a
parent ed2b2b398e
7 changed files with 300 additions and 40 deletions
--- a/docs/docs/zh-CN/components/dropdown.md
+++ b/docs/docs/zh-CN/components/dropdown.md
@ -1 +1,19 @@
-下拉菜单案例
+::: demo
+
+<template>
+  <lay-dropdown></lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
--- a/docs/docs/zh-CN/components/line.md
+++ b/docs/docs/zh-CN/components/line.md
@ -2,19 +2,19 @@

 <template>
  默认分割线
-  <lay-line></lay-line>
+  <lay-line></lay-line><br/>
  赤色分割线
-  <lay-line theme="red"></lay-line>
+  <lay-line theme="red"></lay-line><br/>
  橙色分割线
-  <lay-line theme="orange"></lay-line>
+  <lay-line theme="orange"></lay-line><br/>
  墨绿分割线
-  <lay-line theme="green"></lay-line>
+  <lay-line theme="green"></lay-line><br/>
  青色分割线
-  <lay-line theme="cyan"></lay-line>
+  <lay-line theme="cyan"></lay-line><br/>
  蓝色分割线
-  <lay-line theme="blue"></lay-line>
+  <lay-line theme="blue"></lay-line><br/>
  黑色分割线
-  <lay-line theme="black"></lay-line>
+  <lay-line theme="black"></lay-line><br/>
 </template>

 <script>
--- a/docs/src/components/LaySearch.vue
+++ b/docs/src/components/LaySearch.vue
@ -0,0 +1,61 @@
+<template>
+  <select :name="name" lay-verify="required"></select>
+  <div
+    class="layui-unselect layui-form-select"
+    @click="open"
+    :class="[openState ? 'layui-form-selected' : '']"
+  >
+    <div class="layui-select-title">
+      <input
+        type="text"
+        placeholder="请选择"
+        :value="name"
+        class="layui-input layui-unselect"
+        @input="change"
+        style="
+          background: rgba(255, 255, 255, 0.05);
+          border: none;
+          color: whitesmoke;
+        "
+      /><i class="layui-edge"></i>
+    </div>
+    <dl class="layui-anim layui-anim-upbit" style="">
+      <dd lay-value="" class="layui-select-tips">请选择</dd>
+      <dd
+        v-for="data in datas"
+        lay-value=""
+        @click="jump(data)"
+        :key="data"
+        class="layui-select-tips"
+      >
+        {{ data.title }}
+      </dd>
+    </dl>
+  </div>
+</template>
+
+<script setup name="LaySelect" lang="ts">
+import { defineProps, Ref, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const props =
+  defineProps<{
+    datas?: object[]
+  }>()
+
+const route = useRoute()
+const router = useRouter()
+
+const openState = ref(false)
+
+const name = ref('')
+
+const open = function () {
+  openState.value = !openState.value
+}
+
+const jump = function (data: any) {
+  router.push(data.path)
+  name.value = data.title
+}
+</script>
--- a/docs/src/layouts/Layout.vue
+++ b/docs/src/layouts/Layout.vue
@ -5,6 +5,14 @@
        <lay-logo>
          <img src="../assets/logo.png" />
        </lay-logo>
+        <ul
+          class="layui-nav layui-layout-left"
+          style="margin-top: 10px; margin-bottom: 0px"
+        >
+          <lay-form>
+            <lay-search :datas="menus"></lay-search>
+          </lay-form>
+        </ul>
        <ul
          class="layui-nav layui-layout-right"
          style="margin-top: 0px; margin-bottom: 0px"
@ -29,7 +37,7 @@
          <li
            :key="menu"
            v-for="menu in menus"
-            :class="[selected === menu.id ? 'layui-menu-item-checked2' : '']"
+            :class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
            @click="handleClick(menu)"
          >
            <div class="layui-menu-body-title">
@ -52,41 +60,190 @@
  </div>
 </template>
 <script>
-import { ref } from 'vue'
-import {  useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 export default {
  setup() {
-
+    const route = useRoute()
    const router = useRouter()
+    const currentPath = ref("hahaha")
+
+    watch(
+      () => route.path,
+      (newValue, oldValue) => {
+        currentPath.value = route.path
+      }
+    )
+
    const menus = [
-      { id: 1, title: '介绍',subTitle:'Getting Started' ,path: '/zh-CN/guide' },
-      { id: 2, title: '安装',subTitle:"install" ,path: '/zh-CN/guide/install'},
-      { id: 3, title: '更新',subTitle:"changelog" ,path: '/zh-CN/guide/changelog'},
-      { id: 4, title: '布局',subTitle:"layout" ,path: '/zh-CN/components/layout' },
-      { id: 5, title: '容器',subTitle:"container" ,path: '/zh-CN/components/container' },
-      { id: 6, title: '按钮',subTitle:"button" ,path: '/zh-CN/components/button' },
-      { id: 7, title: '图标',subTitle:"iconfont" ,path: '/zh-CN/components/icon' },
-      { id: 8, title: '面板',subTitle:"panel" ,path: '/zh-CN/components/panel' },
-      { id: 9, title: '卡片',subTitle:"card" ,path: '/zh-CN/components/card' },
-      { id: 10, title: '动画',subTitle:"animation" ,path: '/zh-CN/components/animation' },
-      { id: 11, title: '栅格',subTitle:"grid" ,path: '/zh-CN/components/grid' },
-      { id: 12, title: '表单',subTitle:"form" ,path: '/zh-CN/components/form' },
-      { id: 13, title: '徽章',subTitle:"badge" ,path: '/zh-CN/components/badge' },
-      { id: 14, title: '区块',subTitle:"block" ,path: '/zh-CN/components/block' },
-      { id: 15, title: '分割',subTitle:"line" ,path: '/zh-CN/components/line' },
-      { id: 16, title: '菜单',subTitle:"nav" ,path: '/zh-CN/components/menu' },
-      { id: 17, title: '面包屑',subTitle:"breadcrumb" ,path: '/zh-CN/components/breadcrumb' },
-      { id: 18, title: '进度',subTitle:"progress" ,path: '/zh-CN/components/progress' },
-      { id: 19, title: '时间线',subTitle:"timeline" ,path: '/zh-CN/components/timeline' },
-      { id: 20, title: '颜色',subTitle:"color" ,path: '/zh-CN/components/color' },
-      { id: 21, title: '手风琴',subTitle:"collapse" ,path: '/zh-CN/components/collapse' },
-      { id: 22, title: '表格',subTitle:"table" ,path: '/zh-CN/components/table' },
-      { id: 23, title: '头像',subTitle:"avatar" ,path: '/zh-CN/components/avatar' },
-      { id: 24, title: '字段',subTitle:"field" ,path: '/zh-CN/components/field' },
-      { id: 25, title: '空',subTitle:"empty" ,path: '/zh-CN/components/empty' },
-      { id: 26, title: '评分',subTitle:"rate" ,path: '/zh-CN/components/rate' },
-      { id: 27, title: '下拉菜单', subTitle: "dropdown", path: '/zh-CN/components/dropdown'},
-      { id: 28, title: '选项卡', subTitle: "tab", path: '/zh-CN/components/tab'}
+      {
+        id: 1,
+        title: '介绍',
+        subTitle: 'Getting Started',
+        path: '/zh-CN/guide',
+      },
+      {
+        id: 2,
+        title: '安装',
+        subTitle: 'install',
+        path: '/zh-CN/guide/install',
+      },
+      {
+        id: 3,
+        title: '更新',
+        subTitle: 'changelog',
+        path: '/zh-CN/guide/changelog',
+      },
+      {
+        id: 4,
+        title: '布局',
+        subTitle: 'layout',
+        path: '/zh-CN/components/layout',
+      },
+      {
+        id: 5,
+        title: '容器',
+        subTitle: 'container',
+        path: '/zh-CN/components/container',
+      },
+      {
+        id: 6,
+        title: '按钮',
+        subTitle: 'button',
+        path: '/zh-CN/components/button',
+      },
+      {
+        id: 7,
+        title: '图标',
+        subTitle: 'iconfont',
+        path: '/zh-CN/components/icon',
+      },
+      {
+        id: 8,
+        title: '面板',
+        subTitle: 'panel',
+        path: '/zh-CN/components/panel',
+      },
+      {
+        id: 9,
+        title: '卡片',
+        subTitle: 'card',
+        path: '/zh-CN/components/card',
+      },
+      {
+        id: 10,
+        title: '动画',
+        subTitle: 'animation',
+        path: '/zh-CN/components/animation',
+      },
+      {
+        id: 11,
+        title: '栅格',
+        subTitle: 'grid',
+        path: '/zh-CN/components/grid',
+      },
+      {
+        id: 12,
+        title: '表单',
+        subTitle: 'form',
+        path: '/zh-CN/components/form',
+      },
+      {
+        id: 13,
+        title: '徽章',
+        subTitle: 'badge',
+        path: '/zh-CN/components/badge',
+      },
+      {
+        id: 14,
+        title: '区块',
+        subTitle: 'block',
+        path: '/zh-CN/components/block',
+      },
+      {
+        id: 15,
+        title: '分割',
+        subTitle: 'line',
+        path: '/zh-CN/components/line',
+      },
+      {
+        id: 16,
+        title: '菜单',
+        subTitle: 'nav',
+        path: '/zh-CN/components/menu',
+      },
+      {
+        id: 17,
+        title: '面包屑',
+        subTitle: 'breadcrumb',
+        path: '/zh-CN/components/breadcrumb',
+      },
+      {
+        id: 18,
+        title: '进度',
+        subTitle: 'progress',
+        path: '/zh-CN/components/progress',
+      },
+      {
+        id: 19,
+        title: '时间线',
+        subTitle: 'timeline',
+        path: '/zh-CN/components/timeline',
+      },
+      {
+        id: 20,
+        title: '颜色',
+        subTitle: 'color',
+        path: '/zh-CN/components/color',
+      },
+      {
+        id: 21,
+        title: '手风琴',
+        subTitle: 'collapse',
+        path: '/zh-CN/components/collapse',
+      },
+      {
+        id: 22,
+        title: '表格',
+        subTitle: 'table',
+        path: '/zh-CN/components/table',
+      },
+      {
+        id: 23,
+        title: '头像',
+        subTitle: 'avatar',
+        path: '/zh-CN/components/avatar',
+      },
+      {
+        id: 24,
+        title: '字段',
+        subTitle: 'field',
+        path: '/zh-CN/components/field',
+      },
+      {
+        id: 25,
+        title: '空',
+        subTitle: 'empty',
+        path: '/zh-CN/components/empty',
+      },
+      {
+        id: 26,
+        title: '评分',
+        subTitle: 'rate',
+        path: '/zh-CN/components/rate',
+      },
+      {
+        id: 27,
+        title: '下拉菜单',
+        subTitle: 'dropdown',
+        path: '/zh-CN/components/dropdown',
+      },
+      {
+        id: 28,
+        title: '选项卡',
+        subTitle: 'tab',
+        path: '/zh-CN/components/tab',
+      },
    ]

    const selected = ref(1)
@ -99,6 +256,7 @@ export default {
    return {
      menus,
      selected,
+      currentPath,
      handleClick,
    }
  },
--- a/docs/src/main.ts
+++ b/docs/src/main.ts
@ -4,6 +4,7 @@ import { createRouter } from './router/index'
 import { Router } from 'vue-router'
 import Layui from '/@src/index'
 import LayCode from './components/LayCode.vue'
+import LaySearch from './components/LaySearch.vue'
 import './styles/index.css'

 export function createApp(): {
@ -19,6 +20,7 @@ export function createApp(): {
  app
    .use(router)
    .component('LayCode', LayCode)
+    .component('LaySearch', LaySearch)
    .use(Layui)

  return { app, router }
--- a/src/module/iconPicker/index.ts
+++ b/src/module/iconPicker/index.ts
@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayIconPicker', Component)
+}
+
+export default Component as IDefineComponent
--- a/src/module/iconPicker/index.vue
+++ b/src/module/iconPicker/index.vue
@ -0,0 +1,12 @@
+<template>
+    <i class="layui-icon" :class="[type]"></i>
+</template>
+
+<script setup name="LayIcon" lang="ts">
+import { defineProps } from 'vue'
+
+const props =
+  defineProps<{
+    type?: string
+  }>()
+</script>