Skip to content

Commit 11aab1b

Browse files
wlxuquwlxuqu
committed
新增下拉菜单组件
1 parent 6551775 commit 11aab1b

File tree

12 files changed

+495
-264
lines changed

12 files changed

+495
-264
lines changed

‎i18n.zip

581 KB
Binary file not shown.

‎pages.json

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"easycom": {
33
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
44
},
5-
// "condition": { //模式配置，仅开发期间生效
6-
// "current": 0, //当前激活的模式(list 的索引项)
7-
// "list": [{
8-
// "name": "test", //模式名称
9-
// "path": "pages/componentsC/layout/index", //启动页面，必选
10-
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11-
// }]
12-
// },
5+
"condition": { //模式配置，仅开发期间生效
6+
"current": 0, //当前激活的模式(list 的索引项)
7+
"list": [{
8+
"name": "test", //模式名称
9+
"path": "pages/componentsB/dropdown/index", //启动页面，必选
10+
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11+
}]
12+
},
1313
"pages": [
1414
// 演示-组件
1515
{
@@ -663,6 +663,13 @@
663663
{
664664
"root": "pages/componentsB",
665665
"pages": [
666+
// dropdown-下拉菜单
667+
{
668+
"path": "dropdown/index",
669+
"style": {
670+
"navigationBarTitleText": "dropdown-下拉菜单"
671+
}
672+
},
666673
// tabbar-底部导航栏
667674
{
668675
"path": "tabbar/index",

‎pages/componentsB/dropdown/index.vue

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<template>
2+
<view class="">
3+
<view class="">
4+
<view class="u-demo-title">演示效果</view>
5+
6+
<view class="u-demo-area u-flex u-row-center">
7+
<u-dropdown ref="uDropdown">
8+
<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
9+
<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
10+
<u-dropdown-item title="属性">
11+
<view class="slot-content">
12+
<view class="item-box">
13+
<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in list" :key="index">
14+
{{item.text}}
15+
</view>
16+
</view>
17+
<u-button type="primary" @click="closeDropdown">确定</u-button>
18+
</view>
19+
</u-dropdown-item>
20+
</u-dropdown>
21+
</view>
22+
</view>
23+
<view class="u-config-wrap">
24+
<view class="u-config-title u-border-bottom">
25+
参数配置时
26+
</view>
27+
<!-- <view class="u-config-item">
28+
<view class="u-item-title">颜色</view>
29+
<u-subsection vibrateShort :list="['primary', 'success', 'warning', 'error', 'info']" @change="colorChange"></u-subsection>
30+
</view>
31+
<view class="u-config-item">
32+
<view class="u-item-title">线条类型</view>
33+
<u-subsection vibrateShort :list="['实线', '方形虚线', '圆点虚线']" @change="borderStyleChange"></u-subsection>
34+
</view>
35+
<view class="u-config-item">
36+
<view class="u-item-title">细边</view>
37+
<u-subsection vibrateShort :list="['是', '否']" @change="hairLineChange"></u-subsection>
38+
</view>
39+
<view class="u-config-item">
40+
<view class="u-item-title">方向</view>
41+
<u-subsection vibrateShort :list="['水平', '垂直']" @change="directionChange"></u-subsection>
42+
</view> -->
43+
</view>
44+
</view>
45+
</template>
46+
47+
<script>
48+
export default {
49+
data() {
50+
return {
51+
value1: '',
52+
value2: '2',
53+
value3: '',
54+
options1: [{
55+
text: '默认排序',
56+
value: 1,
57+
icon: 'map'
58+
},
59+
{
60+
text: '距离优先',
61+
value: 2,
62+
icon: 'map'
63+
},
64+
{
65+
text: '价格优先',
66+
value: 3,
67+
icon: 'map'
68+
}
69+
],
70+
options2: [{
71+
text: '去冰',
72+
value: 1,
73+
icon: 'map'
74+
},
75+
{
76+
text: '加冰',
77+
value: 2,
78+
icon: 'map'
79+
},
80+
{
81+
text: '正常温',
82+
value: 3,
83+
icon: 'map'
84+
},
85+
{
86+
text: '加热',
87+
value: 4,
88+
icon: 'map'
89+
},
90+
{
91+
text: '极寒风暴',
92+
value: 5,
93+
icon: 'map'
94+
}
95+
],
96+
list: [{
97+
text: '琪花瑶草',
98+
active: true,
99+
},
100+
{
101+
text: '清词丽句',
102+
active: false,
103+
},
104+
{
105+
text: '宛转蛾眉',
106+
active: false,
107+
},
108+
{
109+
text: '煦色韶光',
110+
active: false,
111+
},
112+
{
113+
text: '鱼沉雁落',
114+
active: false,
115+
},
116+
{
117+
text: '章台杨柳',
118+
active: false,
119+
},
120+
{
121+
text: '霞光万道',
122+
active: false,
123+
}
124+
],
125+
direction: 'row',
126+
hairLine: true,
127+
length: '100%',
128+
color: this.$u.color['primary'],
129+
borderStyle: 'solid'
130+
}
131+
},
132+
methods: {
133+
colorChange(index) {
134+
this.color = this.$u.color[['primary', 'success', 'warning', 'error', 'info'][index]];
135+
},
136+
hairLineChange(index) {
137+
this.hairLine = !index;
138+
},
139+
directionChange(index) {
140+
this.direction = index == 0 ? 'row' : 'col';
141+
if (index == 0) this.length = '100%';
142+
else this.length = '50rpx';
143+
},
144+
borderStyleChange(index) {
145+
this.borderStyle = ['solid', 'dashed', 'dotted'][index];
146+
},
147+
tagClick(index) {
148+
this.list[index].active = !this.list[index].active;
149+
},
150+
closeDropdown() {
151+
this.$refs.uDropdown.close();
152+
}
153+
}
154+
}
155+
</script>
156+
157+
<style scoped lang="scss">
158+
.u-config-wrap {
159+
padding: 40rpx;
160+
}
161+
162+
.slot-content {
163+
background-color: #FFFFFF;
164+
padding: 24rpx;
165+
166+
.item-box {
167+
margin-bottom: 50rpx;
168+
display: flex;
169+
flex-wrap: wrap;
170+
justify-content: space-between;
171+
172+
.item {
173+
border: 1px solid $u-type-primary;
174+
color: $u-type-primary;
175+
padding: 8rpx 40rpx;
176+
border-radius: 100rpx;
177+
margin-top: 30rpx;
178+
}
179+
180+
.active {
181+
color: #FFFFFF;
182+
background-color: $u-type-primary;
183+
}
184+
}
185+
}
186+
</style>

‎pages/componentsC/test/index.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
2-
<view style="margin-top: 200rpx;">
2+
<view class="">
3+
<u-modal v-model="show" content="点击确定进行授权">
4+
<button open-type="getUserInfo" class="u-reset-button" slot="confirm-button" @getuserinfo="getuserinfo">确定</button>
5+
</u-modal>
6+
<u-button @click="show = true">打开modal</u-button>
37
</view>
48
</template>
59

610
<script>
711
export default {
812
data() {
913
return {
10-
// 错误示例，切换语言时，这个intro并不会自动更新到视图
11-
// intro: this.$t('lang.intro')
14+
show: true
1215
}
1316
},
14-
computed: {
15-
// 正确用法
16-
17-
},
18-
onShow() {
19-
20-
},
21-
17+
methods: {
18+
getuserinfo(res) {
19+
console.log(res);
20+
}
21+
}
2222
}
23-
</script>
23+
</script>

‎pages/example/components.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,11 @@ export default [{
266266
groupName: '导航组件',
267267
groupName_en: 'Navigation components',
268268
list: [{
269+
path: '/pages/componentsB/dropdown/index',
270+
icon: 'dropdown',
271+
title: 'Dropdown 下拉菜单',
272+
title_en: 'Dropdown',
273+
},{
269274
path: '/pages/componentsB/tabbar/index',
270275
icon: 'tabbar',
271276
title: 'Tabbar 底部导航栏',

‎uview-ui/components/u-card/u-card.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export default {
224224
},
225225
// 卡片外围阴影，字符串形式
226226
boxShadow: {
227-
type: Boolean,
227+
type: String,
228228
default: 'none'
229229
}
230230
},

‎uview-ui/components/u-dropdown-item/u-dropdown-item.vue

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent @tap.stop.prevent>
3+
<view class="u-dropdown-item__options" v-if="!$slots.default">
4+
<u-cell-group>
5+
<u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.text" v-for="(item, index) in options" :key="index" :title-style="{
6+
color: value == item.value ? activeColor : inactiveColor
7+
}">
8+
<u-icon v-if="value == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
9+
</u-cell-item>
10+
</u-cell-group>
11+
</view>
12+
<slot v-else />
13+
</view>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'u-dropdown-item',
19+
props: {
20+
// 当前选中项的value值
21+
value: {
22+
type: [Number, String, Array],
23+
default: ''
24+
},
25+
// 菜单项标题
26+
title: {
27+
type: String,
28+
default: ''
29+
},
30+
// 选项数据，如果传入了默认slot，此参数无效
31+
options: {
32+
type: Array,
33+
default () {
34+
return []
35+
}
36+
},
37+
// 是否禁用此菜单项
38+
disabled: {
39+
type: Boolean,
40+
default: false
41+
},
42+
// 标题自定义样式，对象形式
43+
titleStyle: {
44+
type: Object,
45+
default () {
46+
return {}
47+
}
48+
},
49+
},
50+
data() {
51+
return {
52+
active: false, // 当前项是否处于展开状态
53+
activeColor: '#2979ff', // 激活时左边文字和右边对勾图标的颜色
54+
inactiveColor: '#606266', // 未激活时左边文字和右边对勾图标的颜色
55+
}
56+
},
57+
created() {
58+
// 父组件的实例
59+
this.parent = false;
60+
},
61+
methods: {
62+
// cell被点击
63+
cellClick(value) {
64+
// 修改通过v-model绑定的值
65+
this.$emit('input', value);
66+
// 通知父组件(u-dropdown)收起菜单
67+
this.parent.close();
68+
// 发出事件，抛出当前勾选项的value
69+
this.$emit('change', value);
70+
}
71+
},
72+
mounted() {
73+
// 获取父组件u-dropdown
74+
let parent = this.$u.$parent.call(this, 'u-dropdown');
75+
if(parent) {
76+
this.parent = parent;
77+
// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
78+
this.activeColor = parent.activeColor;
79+
this.inactiveColor = parent.inactiveColor;
80+
// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
81+
parent.children.push(this);
82+
if(parent.children.length == 1) this.active = true;
83+
// 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
84+
parent.menuList.push(this.title);
85+
}
86+
}
87+
}
88+
</script>
89+
90+
<style scoped lang="scss">
91+
@import "../../libs/css/style.components.scss";
92+
</style>

0 commit comments

Comments
 (0)