Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
42824b93
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
42824b93
编写于
6月 04, 2021
作者:
J
jerry
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: picker
上级
bbce35bf
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
144 addition
and
251 deletion
+144
-251
src/sites/mobile-taro/vue/src/app.config.ts
src/sites/mobile-taro/vue/src/app.config.ts
+1
-0
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
+129
-0
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
+14
-251
未找到文件。
src/sites/mobile-taro/vue/src/app.config.ts
浏览文件 @
42824b93
export
default
{
pages
:
[
'
pages/picker/demo
'
,
'
pages/calendar/demo
'
,
'
pages/input/demo
'
,
'
pages/popup/demo
'
,
...
...
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
0 → 100644
浏览文件 @
42824b93
<
template
>
<div
class=
"demo"
>
<h2>
基础用法
</h2>
<nut-picker
:list-data=
"listData1"
@
confirm=
"confirm"
>
<nut-cell
title=
"请选择城市"
:desc=
"desc"
></nut-cell>
</nut-picker>
<h2>
多列样式
</h2>
<nut-cell
title=
"请选择时间"
:desc=
"desc2"
></nut-cell>
<h2>
多级联动
</h2>
<nut-cell
title=
"请选择地址"
:desc=
"desc3"
></nut-cell>
<!--
<nut-picker
v-model:visible=
"show2"
:list-data=
"listData2"
title=
"多列选择"
@
confirm=
"confirm2"
@
close=
"close"
></nut-picker>
<nut-picker
v-model:visible=
"show3"
:list-data=
"listData3"
title=
"地址选择"
@
confirm=
"confirm3"
></nut-picker>
-->
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
toRefs
,
ref
}
from
'
vue
'
;
import
{
createComponent
}
from
'
./../../../../../../packages/utils/create
'
;
import
Picker
from
'
./index.taro.vue
'
;
import
Cell
from
'
./../cell/index.taro.vue
'
;
const
{
createDemo
}
=
createComponent
(
'
picker
'
);
export
default
createDemo
({
components
:
{
'
nut-picker
'
:
Picker
,
'
nut-cell
'
:
Cell
},
props
:
{},
setup
()
{
const
listData1
=
[
'
南京市
'
,
'
无锡市
'
,
'
海北藏族自治区
'
,
'
北京市
'
,
'
连云港市
'
,
'
浙江市
'
,
'
江苏市
'
];
const
listData2
=
[
{
values
:
[
'
周一
'
,
'
周二
'
,
'
周三
'
,
'
周四
'
,
'
周五
'
],
defaultIndex
:
2
},
// 第二列
{
values
:
[
'
上午
'
,
'
下午
'
,
'
晚上
'
],
defaultIndex
:
1
}
];
const
listData3
=
[
{
text
:
'
浙江
'
,
children
:
[
{
text
:
'
杭州
'
,
children
:
[{
text
:
'
西湖区
'
},
{
text
:
'
余杭区
'
}]
},
{
text
:
'
温州
'
,
children
:
[{
text
:
'
鹿城区
'
},
{
text
:
'
瓯海区
'
}]
}
]
},
{
text
:
'
福建
'
,
children
:
[
{
text
:
'
福州
'
,
children
:
[{
text
:
'
鼓楼区
'
},
{
text
:
'
台江区
'
}]
},
{
text
:
'
厦门
'
,
children
:
[{
text
:
'
思明区
'
},
{
text
:
'
海沧区
'
}]
}
]
}
];
const
show
=
ref
(
false
);
const
show2
=
ref
(
false
);
const
show3
=
ref
(
false
);
const
showList
=
[
show
,
show2
,
show3
];
const
desc
=
ref
(
listData1
[
0
]);
const
desc2
=
ref
(
`
${
listData2
[
0
].
values
[
listData2
[
0
].
defaultIndex
]}
${
listData2
[
1
].
values
[
listData2
[
1
].
defaultIndex
]
}
`
);
const
desc3
=
ref
(
`
${
listData3
[
0
].
text
}
${
listData3
[
0
].
children
[
0
].
text
}
${
listData3
[
0
].
children
[
0
].
children
[
0
].
text
}
`
);
const
descList
=
[
desc
,
desc2
,
desc3
];
return
{
listData1
,
listData2
,
listData3
,
show
,
show2
,
show3
,
desc
,
desc2
,
desc3
,
open
:
(
index
:
number
)
=>
{
showList
[
index
-
1
].
value
=
true
;
},
confirm
:
(
res
:
any
)
=>
{
desc
.
value
=
res
;
},
confirm2
:
(
res
:
any
)
=>
{
desc2
.
value
=
res
.
join
(
'
'
);
},
confirm3
:
(
res
:
any
)
=>
{
desc3
.
value
=
res
.
join
(
'
'
);
}
};
}
});
</
script
>
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
浏览文件 @
42824b93
<
template
>
<view-block
:class=
"classes"
>
<nut-popup
position=
"bottom"
:style=
"
{ height: height + 56 + 'px' }"
v-model:visible="show"
@close="close"
>
<view-block
class=
"nut-picker__bar"
>
<view-block
class=
"nut-picker__left nut-picker__button"
@
click=
"close"
>
取消
</view-block
>
<view-block>
{{
title
}}
</view-block>
<view-block
class=
"nut-picker__button"
@
click=
"confirm()"
>
确定
</view-block
>
</view-block>
<view-block
class=
"nut-picker__column"
>
<view-block
class=
"nut-picker__mask"
:style=
"
{ backgroundSize: `100% ${top}px` }"
>
</view-block>
<view-block
class=
"nut-picker__hairline"
:style=
"
{ top: ` ${top}px` }"
>
</view-block>
<view-block
class=
"nut-picker__columnitem"
v-for=
"(item, columnIndex) in columnList"
:key=
"columnIndex"
>
<nut-picker-column
:listData=
"item.values"
:readonly=
"readonly"
:defaultIndex=
"item.defaultIndex"
:visibleItemCount=
"visibleItemCount"
:itemHeight=
"itemHeight"
:dataType=
"dataType"
@
change=
"
dataIndex =>
{
changeHandler(columnIndex, dataIndex);
}
"
>
</nut-picker-column>
</view-block>
</view-block>
</nut-popup>
</view-block>
<picker
mode=
"selector"
:range=
"listData"
@
change=
"onChange"
>
<slot></slot>
</picker>
</
template
>
<
script
lang=
"ts"
>
import
{
reactive
,
watch
,
computed
,
toRaw
,
toRefs
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/packages/utils/create
'
;
import
column
from
'
./Column.vue
'
;
import
popup
from
'
@/packages/__VUE/popup/index.vue
'
;
import
{
commonProps
}
from
'
./commonProps
'
;
import
{
PickerObjOpt
,
PickerOption
,
PickerObjectColumn
,
PickerObjectColumns
}
from
'
./types
'
;
const
{
create
,
componentName
}
=
createComponent
(
'
picker
'
);
<
script
lang=
"ts"
>
const
{
create
}
=
createComponent
(
'
picker
'
);
import
{
commonProps
}
from
'
../../../../../../packages/__VUE/picker/commonProps
'
;
import
{
createComponent
}
from
'
./../../../../../../packages/utils/create
'
;
export
default
create
({
components
:
{
[
column
.
name
]:
column
,
[
popup
.
name
]:
popup
},
props
:
{
visible
:
{
type
:
Boolean
,
default
:
false
},
title
:
{
type
:
String
,
default
:
''
},
...
commonProps
},
emits
:
[
'
c
lose
'
,
'
change
'
,
'
confirm
'
,
'
update:visible
'
],
emits
:
[
'
c
onfirm
'
],
setup
(
props
,
{
emit
})
{
const
childrenKey
=
'
children
'
;
const
valuesKey
=
'
values
'
;
const
state
=
reactive
({
show
:
false
,
formattedColumns
:
props
.
listData
as
PickerObjectColumn
[],
defaultIndex
:
props
.
defaultIndex
as
number
});
//临时变量,当点击确定时候赋值
let
_defaultIndex
=
props
.
defaultIndex
;
let
defaultIndexList
:
number
[]
=
[];
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
};
});
const
top
=
computed
(()
=>
{
return
(
Number
(
+
props
.
visibleItemCount
-
1
)
/
2
)
*
+
props
.
itemHeight
;
});
const
height
=
computed
(()
=>
{
return
Number
(
props
.
visibleItemCount
)
*
+
props
.
itemHeight
;
});
const
dataType
=
computed
(()
=>
{
const
firstColumn
=
state
.
formattedColumns
[
0
]
as
PickerObjectColumn
;
if
(
typeof
firstColumn
===
'
object
'
)
{
if
(
firstColumn
[
childrenKey
])
{
return
'
cascade
'
;
}
else
if
(
firstColumn
?.[
valuesKey
])
{
addDefaultIndexList
(
props
.
listData
as
PickerObjectColumn
[]);
return
'
multipleColumns
'
;
}
}
return
'
text
'
;
});
const
columnList
=
computed
(()
=>
{
if
(
dataType
.
value
===
'
text
'
)
{
return
[
{
values
:
state
.
formattedColumns
,
defaultIndex
:
state
.
defaultIndex
}
];
}
else
if
(
dataType
.
value
===
'
multipleColumns
'
)
{
return
state
.
formattedColumns
;
}
else
if
(
dataType
.
value
===
'
cascade
'
)
{
return
formatCascade
(
state
.
formattedColumns
as
PickerObjectColumn
[],
state
.
defaultIndex
);
}
return
state
.
formattedColumns
;
});
const
addDefaultIndexList
=
(
listData
:
PickerObjectColumn
[])
=>
{
defaultIndexList
=
[];
listData
.
forEach
(
res
=>
{
defaultIndexList
.
push
((
res
.
defaultIndex
as
number
)
||
0
);
});
const
onChange
=
(
e
:
any
)
=>
{
emit
(
'
confirm
'
,
props
.
listData
[
e
.
detail
.
value
]);
};
const
formatCascade
=
(
listData
:
PickerObjectColumn
[],
defaultIndex
:
number
)
=>
{
const
formatted
:
PickerObjectColumn
[]
=
[];
let
children
=
listData
as
PickerObjectColumns
;
children
.
defaultIndex
=
defaultIndex
;
while
(
children
)
{
formatted
.
push
({
values
:
children
,
defaultIndex
:
children
.
defaultIndex
||
0
});
children
=
children
?.[
children
.
defaultIndex
||
0
].
children
;
}
addDefaultIndexList
(
formatted
);
return
formatted
;
};
const
getCascadeData
=
(
listData
:
PickerObjectColumn
[],
defaultIndex
:
number
)
=>
{
let
arr
=
listData
as
PickerObjectColumns
;
arr
.
defaultIndex
=
defaultIndex
;
const
dataList
:
string
[]
=
[];
while
(
arr
)
{
const
item
=
arr
[
arr
.
defaultIndex
??
0
];
dataList
.
push
(
item
.
text
as
string
);
arr
=
item
.
children
;
}
return
dataList
;
};
const
close
=
()
=>
{
emit
(
'
close
'
);
emit
(
'
update:visible
'
,
false
);
};
const
changeHandler
=
(
columnIndex
:
number
,
dataIndex
:
number
)
=>
{
if
(
dataType
.
value
===
'
cascade
'
)
{
let
cursor
=
state
.
formattedColumns
as
PickerObjectColumns
;
if
(
columnIndex
===
0
)
{
state
.
defaultIndex
=
dataIndex
;
}
let
i
=
0
;
while
(
cursor
)
{
if
(
i
===
columnIndex
)
{
cursor
.
defaultIndex
=
dataIndex
;
}
else
if
(
i
>
columnIndex
)
{
cursor
.
defaultIndex
=
0
;
}
cursor
=
cursor
[
cursor
.
defaultIndex
||
0
].
children
;
i
++
;
}
}
else
if
(
dataType
.
value
===
'
text
'
)
{
_defaultIndex
=
dataIndex
;
}
else
if
(
dataType
.
value
===
'
multipleColumns
'
)
{
defaultIndexList
[
columnIndex
]
=
dataIndex
;
const
val
=
defaultIndexList
.
map
(
(
res
,
i
)
=>
toRaw
(
state
.
formattedColumns
as
PickerObjectColumns
)[
i
].
values
[
res
]
);
emit
(
'
change
'
,
val
);
}
};
const
confirm
=
()
=>
{
if
(
dataType
.
value
===
'
text
'
)
{
state
.
defaultIndex
=
_defaultIndex
as
number
;
emit
(
'
confirm
'
,
state
.
formattedColumns
[
_defaultIndex
as
number
]);
}
else
if
(
dataType
.
value
===
'
multipleColumns
'
)
{
for
(
let
i
=
0
;
i
<
defaultIndexList
.
length
;
i
++
)
{
state
.
formattedColumns
[
i
].
defaultIndex
=
defaultIndexList
[
i
];
}
const
checkedArr
=
toRaw
(
state
.
formattedColumns
).
map
(
(
res
:
PickerObjectColumn
)
=>
res
.
values
&&
res
.
values
[
res
.
defaultIndex
as
number
]
);
emit
(
'
confirm
'
,
checkedArr
);
}
else
if
(
dataType
.
value
===
'
cascade
'
)
{
emit
(
'
confirm
'
,
getCascadeData
(
toRaw
(
state
.
formattedColumns
),
state
.
defaultIndex
)
);
}
emit
(
'
update:visible
'
,
false
);
};
watch
(
()
=>
props
.
visible
,
val
=>
{
state
.
show
=
val
;
}
);
watch
(
()
=>
props
.
listData
,
val
=>
{
state
.
formattedColumns
=
val
as
PickerObjectColumns
;
}
);
return
{
classes
,
...
toRefs
(
state
),
column
,
dataType
,
columnList
,
top
,
height
,
close
,
changeHandler
,
confirm
confirm
,
onChange
};
}
});
</
script
>
<
style
lang=
"scss"
>
@import
'index.scss'
;
</
style
>
<
style
lang=
"scss"
scoped
></
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录