Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

体验新版 GitCode，发现更多精彩内容 >>

提交 ba821599 编写于 作者: richard_1015's avatar richard_1015
浏览文件
操作

Merge branch 'next' of https://github.com/jdf2e/nutui into next

上级 21fd43d0 314e6182
隐藏空白更改
内联 并排
Showing with 72 addition and 68 deletion
src/packages/menu/demo.vue
浏览文件 @ ba821599
......@@ -2,28 +2,28 @@
<div class="demo full menu-demo">
<h2>基础用法</h2>
<nut-menu>
<nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item :menuList="menuList" :title="title"></nut-menu-item>
<nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item :menu-list="menuList" :title="title"></nut-menu-item>
</nut-menu>
<h2>多列展示</h2>
<nut-menu>
<nut-menu-item
class="base-style"
:menuList="menuList2"
:menu-list="menuList2"
title="单列展示"
multiStyle="1"
maxHeight="200"
multi-style="1"
max-height="200"
></nut-menu-item>
<nut-menu-item
:menuList="menuList2"
:menu-list="menuList2"
title="双列展示"
multiStyle="2"
multi-style="2"
></nut-menu-item>
<nut-menu-item
:menuList="menuList2"
:menu-list="menuList2"
title="三列展示"
multiStyle="3"
multi-style="3"
></nut-menu-item>
</nut-menu>
......@@ -33,14 +33,14 @@
属性控制下拉菜单列表是否选择后自动收起，默认自动收起。</p
>
<nut-menu>
<nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item
:menuList="menuList"
:menu-list="menuList"
title="禁止自动收起"
:autoClose="false"
:auto-close="false"
></nut-menu-item>
<nut-menu-item
:menuList="menuList2"
:menu-list="menuList2"
title="筛选"
disabled
></nut-menu-item>
......@@ -48,9 +48,9 @@
<h2>禁止蒙层展示</h2>
<p class="tips">属性`hasMask`控制是否有蒙层，默认为 `true`展示蒙层 </p>
<nut-menu :hasMask="false">
<nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item :menuList="menuList" :title="title"></nut-menu-item>
<nut-menu :has-mask="false">
<nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item :menu-list="menuList" :title="title"></nut-menu-item>
</nut-menu>
<h2>点击事件</h2>
......@@ -59,14 +59,14 @@
>
<nut-menu>
<nut-menu-item
:menuList="menuList"
:menu-list="menuList"
title="选择菜单列表项"
multiStyle="2"
multi-style="2"
@menu-click="alertText($event, 'title')"
@on-change="getChecked"
></nut-menu-item>
<nut-menu-item
:menuList="menuList2"
:menu-list="menuList2"
title="选中标题触发"
disabled
@menu-click="alertText"
......
src/packages/menu/doc.md
浏览文件 @ ba821599
......@@ -23,8 +23,8 @@ app.use(Menu);
```html
<nut-menu>
<nut-menu-item :menuList="menuList" title="最新商品" ></nut-menu-item>
<nut-menu-item :menuList="menuList" :title="title" ></nut-menu-item>
<nut-menu-item :menu-list="menuList" title="最新商品" ></nut-menu-item>
<nut-menu-item :menu-list="menuList" :title="title" ></nut-menu-item>
</nut-menu>
```
```js
......@@ -49,9 +49,9 @@ app.use(Menu);
```html
<nut-menu>
<nut-menu-item :menuList="menuList2" title="单列展示" multiStyle="1" maxHeight="200"></nut-menu-item>
<nut-menu-item :menuList="menuList2" title="双列展示" multiStyle="2"></nut-menu-item>
<nut-menu-item :menuList="menuList2" title="三列展示" multiStyle="3"></nut-menu-item>
<nut-menu-item :menu-list="menuList2" title="单列展示" multi-style="1" maxHeight="200"></nut-menu-item>
<nut-menu-item :menu-list="menuList2" title="双列展示" multi-style="2"></nut-menu-item>
<nut-menu-item :menu-list="menuList2" title="三列展示" multi-style="3"></nut-menu-item>
</nut-menu>
```
......@@ -62,9 +62,9 @@ app.use(Menu);
```html
<nut-menu>
<nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item :menuList="menuList" :title="title" :autoClose="false"></nut-menu-item>
<nut-menu-item :menuList="menuList2" title="筛选" disabled ></nut-menu-item>
<nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
<nut-menu-item :menu-list="menuList" title="title" :auto-close="false"></nut-menu-item>
<nut-menu-item :menu-list="menuList2" title="筛选" disabled ></nut-menu-item>
</nut-menu>
```
......@@ -73,9 +73,9 @@ app.use(Menu);
```html
<nut-menu :hasMask="false">
<nut-menu-item :menuList="menuList" title="最新商品">
<nut-menu-item :menu-list="menuList" title="最新商品">
</nut-menu-item>
<nut-menu-item :menuList="menuList" :title="title">
<nut-menu-item :menu-list="menuList" :title="title">
</nut-menu-item>
</nut-menu>
```
......@@ -87,14 +87,14 @@ app.use(Menu);
```html
<nut-menu>
<nut-menu-item
:menuList="menuList2"
:menu-list="menuList2"
title="选择菜单列表项"
multiStyle="2"
multi-style="2"
@menu-click="alertText($event, 'title')"
@on-change="getChecked"
></nut-menu-item>
<nut-menu-item
:menuList="menuList2"
:menu-list="menuList2"
title="选中标题触发"
disabled
@menu-click="alertText"
......@@ -141,12 +141,12 @@ const alertText = (info, type) => {
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| title | 菜单标题名称或可为菜单列表第一项，必填 | String | - |
| menuList | 菜单列表数据，必填 | Array | - |
| multiStyle | 列表列数设置，默认1列，可选值 `1` `2` `3` | String, Number | 1 |
| menu-list | 菜单列表数据，必填 | Array | - |
| multi-style | 列表列数设置，默认1列，可选值 `1` `2` `3` | String, Number | 1 |
| disabled | 是否开启禁用设置，默认不开启 | Boolean | false |
| maxHeight | 菜单列表最大高度，单位px | String, Number | - |
| autoClose | 选择后下拉菜单列表是否自动收起，默认自动收起 | Boolean | true |
|hasMask| 是否有蒙层 | Boolean | true|
| max-height | 菜单列表最大高度，单位px | String, Number | - |
| auto-close | 选择后下拉菜单列表是否自动收起，默认自动收起 | Boolean | true |
|has-mask| 是否有蒙层 | Boolean | true|
### Events
......
src/packages/menu/index.scss
浏览文件 @ ba821599
.nut-menu {
background: #fff;
background: $white;
display: flex;
align-items: center;
position: relative;
......
src/packages/menu/index.vue
浏览文件 @ ba821599
<template>
<view class="nut-menu" :style="showMask && `z-index:9999`">
<view :class="classes" :style="showMask && `z-index:9999`">
<slot></slot>
</view>
</template>
<script lang="ts">
import { toRefs, reactive, provide } from 'vue';
import { toRefs, reactive, provide, computed } from 'vue';
import { createComponent } from '@/utils/create';
const { componentName, create } = createComponent('menu');
import menuitem from '@/packages/menuitem/index.vue';
......@@ -25,14 +25,20 @@ export default create({
const state = reactive({
showMask: false
});
const handleMaskShow = status => {
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const handleMaskShow = (status: boolean) => {
state.showMask = status;
};
provide('menuRelation', {
handleMaskShow,
hasMask: props.hasMask
});
return { ...toRefs(state) };
return { ...toRefs(state), classes };
}
});
</script>
......
src/packages/menuitem/index.scss
浏览文件 @ ba821599
......@@ -8,7 +8,7 @@
&.disabled {
color: #999;
}
&.nut-menu-active {
&.nut-menu-item-active {
.nut-menu-title {
font-weight: bold;
.icon {
......
src/packages/menuitem/index.vue
浏览文件 @ ba821599
<template>
<view
id="menuId"
class="nut-menu-item"
:class="[{ disabled: disabled }, { 'nut-menu-active': showPanel }]"
>
<view :class="classes">
<nut-popup v-model:show="showMask"></nut-popup>
<view class="nut-menu-title" @click="handleMenuPanel">
<view class="title-name" v-html="menuTitle"></view>
<i class="icon"></i>
<nut-icon class-prefix="icon"></nut-icon>
</view>
<view
class="nut-menu-panel"
ref="menuPanel"
:style="`max-height:${maxHeight}px`"
>
<view class="nut-menu-panel" :style="`max-height:${maxHeight}px`">
<view
v-if="menuList && menuList.length"
class="menu-list"
......@@ -25,18 +17,19 @@
>
<view
class="menu-option"
:class="{ checked: currMenu == index }"
:class="{ checked: currMenu === index }"
v-for="(item, index) in menuList"
:key="index"
@click="checkMenus(item, index)"
><nut-icon
>
<nut-icon
class="check-icon"
v-if="currMenu == index"
v-if="currMenu === index"
name="Check"
size="14px"
></nut-icon
>{{ item.value }}</view
>
>{{ item.value }}
</view>
</view>
<slot></slot>
</view>
......@@ -48,15 +41,13 @@ import {
toRefs,
onMounted,
ref,
nextTick,
computed,
watch,
onUnmounted,
provide,
inject
} from 'vue';
import { createComponent } from '@/utils/create';
const { create } = createComponent('menu-item');
const { create, componentName } = createComponent('menu-item');
export default create({
props: {
title: {
......@@ -79,7 +70,7 @@ export default create({
},
multiStyle: {
type: [String, Number],
default: 1 //可选值1、2、3
default: 1
},
maxHeight: {
type: [String, Number],
......@@ -88,7 +79,6 @@ export default create({
},
emits: ['on-change', 'menu-click'],
setup(props, { emit }) {
const { menuList, multiStyle } = toRefs(props);
const menuTitle = ref(props.title);
const menu = inject('menuRelation');
const parent: any = reactive(menu as any);
......@@ -98,6 +88,15 @@ export default create({
showMask: false
});
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true,
disabled: props.disabled,
[`${prefixCls}-active`]: state.showPanel
};
});
const handleMenuPanel = () => {
emit('menu-click', menuTitle.value);
//禁用
......@@ -111,7 +110,7 @@ export default create({
parent.handleMaskShow(state.showPanel);
}
};
//menu列表浮层展示和隐藏
const handleShowAndHide = (event: any) => {
const menuBox = document.querySelectorAll('.nut-menu-active')[0];
if (menuBox && state.showPanel) {
......@@ -149,12 +148,11 @@ export default create({
false;
});
return {
classes,
...toRefs(state),
...toRefs(parent),
handleMenuPanel,
checkMenus,
menuTitle,
multiStyle
menuTitle
};
}
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或