From e091902c286f7fc8f84d24e8f51eb976a715bbf9 Mon Sep 17 00:00:00 2001
From: yewenwen <357595032@qq.com>
Date: Wed, 16 Dec 2020 16:42:03 +0800
Subject: [PATCH] feat: menu
---
src/config.ts | 9 ++
src/packages/menu/demo.vue | 81 +++++++++++++++++
src/packages/menu/doc.md | 66 ++++++++++++++
src/packages/menu/index.scss | 7 ++
src/packages/menu/index.vue | 45 ++++++++++
src/packages/menuitem/index.scss | 102 ++++++++++++++++++++++
src/packages/menuitem/index.vue | 145 +++++++++++++++++++++++++++++++
7 files changed, 455 insertions(+)
create mode 100644 src/packages/menu/demo.vue
create mode 100644 src/packages/menu/doc.md
create mode 100644 src/packages/menu/index.scss
create mode 100644 src/packages/menu/index.vue
create mode 100644 src/packages/menuitem/index.scss
create mode 100644 src/packages/menuitem/index.vue
diff --git a/src/config.ts b/src/config.ts
index a37a9a92e..5a33f18ad 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -180,6 +180,15 @@ export const nav = [
show: true,
desc: '头像',
author: 'ailululu'
+ },
+ {
+ name: 'Menu',
+ sort: 8,
+ cName: '菜单',
+ type: 'component',
+ show: true,
+ desc: '菜单',
+ author: 'vickyYE'
}
]
},
diff --git a/src/packages/menu/demo.vue b/src/packages/menu/demo.vue
new file mode 100644
index 000000000..396b5a31e
--- /dev/null
+++ b/src/packages/menu/demo.vue
@@ -0,0 +1,81 @@
+
+
+
基础用法
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/packages/menu/doc.md b/src/packages/menu/doc.md
new file mode 100644
index 000000000..946e11a06
--- /dev/null
+++ b/src/packages/menu/doc.md
@@ -0,0 +1,66 @@
+# Menu 菜单组件
+
+### 介绍
+
+基于 xxxxxxx
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Menu } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Menu);
+
+```
+
+## 代码演示
+
+### 基础用法1
+
+`Menu` 属性支持传入menu列表数据和title名称。
+
+```html
+
+
+
+
+```
+
+### 基础用法2
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+
+
+```
+
+### 基础用法3
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+
+
+```
+
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------------|----------------------------------|--------|------------------|
+| name | 图标名称或图片链接 | String | - |
+| color | 图标颜色 | String | - |
+| size | 图标大小,如 `20px` `2em` `2rem` | String | - |
+| class-prefix | 类名前缀,用于使用自定义图标 | String | `nutui-iconfont` |
+| tag | HTML 标签 | String | `i` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|----------------|--------------|
+| click | 点击图标时触发 | event: Event |
diff --git a/src/packages/menu/index.scss b/src/packages/menu/index.scss
new file mode 100644
index 000000000..8ce46495a
--- /dev/null
+++ b/src/packages/menu/index.scss
@@ -0,0 +1,7 @@
+.nut-menu {
+ background: #fff;
+ display: flex;
+ align-items: center;
+ position: relative;
+ height: 46px;
+}
diff --git a/src/packages/menu/index.vue b/src/packages/menu/index.vue
new file mode 100644
index 000000000..41b894ccf
--- /dev/null
+++ b/src/packages/menu/index.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
diff --git a/src/packages/menuitem/index.scss b/src/packages/menuitem/index.scss
new file mode 100644
index 000000000..536d42ee2
--- /dev/null
+++ b/src/packages/menuitem/index.scss
@@ -0,0 +1,102 @@
+.nut-menu-item {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ padding: 0 5px;
+ &.disabled {
+ color: #999;
+ }
+ &.nut-menu-active {
+ .nut-menu-title {
+ font-weight: bold;
+ .icon {
+ background: url('https://img10.360buyimg.com/imagetools/jfs/t1/156044/7/582/372/5fd990b5Ea62c2694/551e7f58d421a9ae.png')
+ no-repeat;
+ transition: all ease 0.3s;
+ transform: rotate(-360deg);
+ background-size: contain;
+ }
+ }
+ .nut-menu-panel {
+ display: block;
+ }
+ }
+}
+.nut-menu-title {
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ .title-name {
+ white-space: nowrap;
+ max-width: 100px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .icon {
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ background: url('https://img13.360buyimg.com/imagetools/jfs/t1/152898/12/10149/452/5fd990b5Ec7c12d70/3bf06076b758bed1.png')
+ no-repeat;
+ background-size: contain;
+ transform: rotate(0deg);
+ transition: all ease 0.3s;
+ margin: 0 2px;
+ }
+}
+.nut-menu-panel {
+ display: none;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 46px;
+ color: #2d2d2d;
+ overflow: hidden;
+ background-color: #fff;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-overflow-scrolling: touch;
+ z-index: 9998;
+ border-top: 1px solid #f7f8fa;
+ border-radius: 0 0 15px 15px;
+ box-shadow: 0 4px 5px 0px rgba(236, 236, 236, 0.25);
+ // &.active{
+ // display: block;
+ // }
+}
+
+.menu-list {
+ display: flex;
+ padding: 10px 24px;
+ flex-direction: column;
+ &.bubble-line {
+ flex-flow: wrap;
+ .menu-option {
+ width: 50%;
+ }
+ }
+ &.three-line {
+ flex-flow: wrap;
+ .menu-option {
+ width: 32%;
+ }
+ }
+ .menu-option {
+ min-height: 24px;
+ line-height: 48px;
+ font-size: 14px;
+ color: #1a1a1a;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .check-icon {
+ width: 14px;
+ height: 14px;
+ margin-right: 5px;
+ color: #fa2c19;
+ }
+}
diff --git a/src/packages/menuitem/index.vue b/src/packages/menuitem/index.vue
new file mode 100644
index 000000000..a36dbc989
--- /dev/null
+++ b/src/packages/menuitem/index.vue
@@ -0,0 +1,145 @@
+
+
+
+
+
+
--
GitLab