Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
08debba7
N
nutui
项目概览
京东前端
/
nutui
通知
36
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 搜索 >>
提交
08debba7
编写于
6月 04, 2021
作者:
J
jerry
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: picker多列
上级
c7f8e82a
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
56 addition
and
83 deletion
+56
-83
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
+21
-62
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
+35
-21
未找到文件。
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
浏览文件 @
08debba7
...
...
@@ -8,14 +8,14 @@
<nut-picker
mode=
"multiSelector"
:list-data=
"listData2"
@
confirm=
"confirm2"
>
<nut-cell
title=
"请选择时间"
:desc=
"desc2"
></nut-cell>
</nut-picker>
<h2>
多级联动
</h2>
<
!--
<
h2>
多级联动
</h2>
<nut-picker
:list-data=
"listData3"
@
confirm=
"confirm3"
>
<nut-cell
title=
"请选择地址"
:desc=
"desc3"
></nut-cell>
</nut-picker>
</nut-picker>
-->
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
toRefs
,
ref
}
from
'
vue
'
;
import
{
ref
}
from
'
vue
'
;
import
{
createComponent
}
from
'
./../../../../../../packages/utils/create
'
;
import
Picker
from
'
./index.taro.vue
'
;
import
Cell
from
'
./../cell/index.taro.vue
'
;
...
...
@@ -36,82 +36,41 @@ export default createDemo({
'
浙江市
'
,
'
江苏市
'
];
const
listData2
=
[
const
listData2
=
ref
(
[
{
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
]
`
${
listData2
.
value
[
0
].
values
[
listData2
.
value
[
0
].
defaultIndex
]}
${
listData2
.
value
[
1
].
values
[
listData2
.
value
[
1
].
defaultIndex
]
}
`
);
const
desc3
=
ref
(
`
${
listData3
[
0
].
text
}
${
listData3
[
0
].
children
[
0
].
text
}
${
listData3
[
0
].
children
[
0
].
children
[
0
].
text
}
`
);
const
confirm
=
(
value
:
any
,
res
:
any
)
=>
{
desc
.
value
=
res
;
};
const
confirm2
=
(
value
:
any
,
res
:
any
)
=>
{
desc2
.
value
=
res
.
join
(
'
'
);
listData2
.
value
.
forEach
((
item
,
idx
)
=>
{
item
.
defaultIndex
=
value
[
idx
];
});
};
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
(
'
'
);
}
confirm
,
confirm2
};
}
});
...
...
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
浏览文件 @
08debba7
<
template
>
<picker
:mode=
"mode"
:range=
"
computedData
"
:range=
"
range
"
@
change=
"onChange"
@
columnChange=
"onColumnChange"
:value=
"value"
...
...
@@ -11,7 +11,7 @@
</
template
>
<
script
lang=
"ts"
>
import
{
toRefs
,
onMounted
,
reactive
,
computed
,
CSSProperties
,
ref
}
from
'
vue
'
;
import
{
onUpdated
,
ref
,
watch
}
from
'
vue
'
;
const
{
create
}
=
createComponent
(
'
picker
'
);
import
{
commonProps
}
from
'
../../../../../../packages/__VUE/picker/commonProps
'
;
import
{
createComponent
}
from
'
./../../../../../../packages/utils/create
'
;
...
...
@@ -26,47 +26,61 @@ export default create({
emits
:
[
'
confirm
'
],
setup
(
props
,
{
emit
})
{
let
value
=
ref
<
any
>
([]);
let
range
=
ref
<
any
>
([]);
onUpdated
(()
=>
{
console
.
log
(
'
updated
'
,
props
.
listData
);
});
const
onChange
=
(
e
:
any
)
=>
{
let
ret
;
if
(
props
.
mode
===
'
selector
'
)
{
ret
=
props
.
listData
[
e
.
detail
.
value
];
}
else
if
(
props
.
mode
===
'
multiSelector
'
)
{
ret
=
computedData
.
value
?.
map
(
(
item
:
any
,
idx
)
=>
item
[
e
.
detail
.
value
[
idx
]]
);
ret
=
range
.
value
?.
map
((
item
:
any
,
idx
:
number
)
=>
item
[
e
.
detail
.
value
[
idx
]])
.
filter
((
res
:
any
)
=>
res
);
}
emit
(
'
confirm
'
,
ret
);
console
.
log
(
e
.
detail
.
value
,
ret
);
emit
(
'
confirm
'
,
e
.
detail
.
value
,
ret
);
};
const
computedData
=
computed
(()
=>
{
if
(
props
.
mode
===
'
selector
'
)
{
return
props
.
listData
;
}
else
if
(
props
.
mode
===
'
multiSelector
'
)
{
watch
(
props
.
listData
,
(
val
:
any
)
=>
{
console
.
log
(
'
change
'
);
try
{
if
(
props
.
listData
.
length
)
{
const
range
:
object
[]
=
[];
// 构造range
props
.
listData
.
forEach
((
item
:
any
,
idx
:
number
)
=>
{
value
.
value
.
push
(
item
.
defaultIndex
);
range
.
push
(
item
.
values
);
});
return
range
;
if
(
val
.
length
)
{
value
.
value
=
[];
range
.
value
=
[];
if
(
props
.
mode
===
'
selector
'
)
{
range
.
value
=
props
.
listData
;
}
else
if
(
props
.
mode
===
'
multiSelector
'
)
{
val
.
forEach
((
item
:
any
)
=>
{
value
.
value
.
push
(
item
.
defaultIndex
);
range
.
value
.
push
(
item
.
values
);
});
}
}
}
catch
(
error
)
{
console
.
log
(
'
listData参数格式错误
'
,
error
);
}
}
});
},
{
immediate
:
true
,
deep
:
true
}
);
const
onColumnChange
=
e
=>
{
const
onColumnChange
=
(
e
:
any
)
=>
{
console
.
log
(
'
修改的列为
'
,
e
.
detail
.
column
,
'
,值为
'
,
e
.
detail
.
value
);
};
return
{
confirm
,
onChange
,
computedData
,
value
,
range
,
onColumnChange
};
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录