Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
97172cb4
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 搜索 >>
提交
97172cb4
编写于
6月 04, 2021
作者:
G
guoxiaoxiao8
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'taro-vue-test' of
https://github.com/jdf2e/nutui
into taro-vue-test
上级
5bf16fc8
08debba7
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
91 addition
and
82 deletion
+91
-82
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
+27
-79
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue
+64
-3
未找到文件。
src/sites/mobile-taro/vue/src/pages/picker/demo.vue
浏览文件 @
97172cb4
<
template
>
<div
class=
"demo"
>
<h2>
基础用法
</h2>
<nut-picker
:list-data=
"listData1"
@
confirm=
"confirm"
>
<nut-picker
mode=
"selector"
: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>
-->
<nut-picker
mode=
"multiSelector"
:list-data=
"listData2"
@
confirm=
"confirm2"
>
<nut-cell
title=
"请选择时间"
:desc=
"desc2"
></nut-cell>
</nut-picker>
<!--
<h2>
多级联动
</h2>
<nut-picker
:list-data=
"listData3"
@
confirm=
"confirm3"
>
<nut-cell
title=
"请选择地址"
:desc=
"desc3"
></nut-cell>
</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
'
;
...
...
@@ -46,83 +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
descList
=
[
desc
,
desc2
,
desc3
];
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
浏览文件 @
97172cb4
<
template
>
<picker
mode=
"selector"
:range=
"listData"
@
change=
"onChange"
>
<picker
:mode=
"mode"
:range=
"range"
@
change=
"onChange"
@
columnChange=
"onColumnChange"
:value=
"value"
>
<slot></slot>
</picker>
</
template
>
<
script
lang=
"ts"
>
import
{
onUpdated
,
ref
,
watch
}
from
'
vue
'
;
const
{
create
}
=
createComponent
(
'
picker
'
);
import
{
commonProps
}
from
'
../../../../../../packages/__VUE/picker/commonProps
'
;
import
{
createComponent
}
from
'
./../../../../../../packages/utils/create
'
;
export
default
create
({
props
:
{
mode
:
{
type
:
String
,
default
:
'
selector
'
},
...
commonProps
},
emits
:
[
'
confirm
'
],
setup
(
props
,
{
emit
})
{
let
value
=
ref
<
any
>
([]);
let
range
=
ref
<
any
>
([]);
onUpdated
(()
=>
{
console
.
log
(
'
updated
'
,
props
.
listData
);
});
const
onChange
=
(
e
:
any
)
=>
{
emit
(
'
confirm
'
,
props
.
listData
[
e
.
detail
.
value
]);
let
ret
;
if
(
props
.
mode
===
'
selector
'
)
{
ret
=
props
.
listData
[
e
.
detail
.
value
];
}
else
if
(
props
.
mode
===
'
multiSelector
'
)
{
ret
=
range
.
value
?.
map
((
item
:
any
,
idx
:
number
)
=>
item
[
e
.
detail
.
value
[
idx
]])
.
filter
((
res
:
any
)
=>
res
);
}
console
.
log
(
e
.
detail
.
value
,
ret
);
emit
(
'
confirm
'
,
e
.
detail
.
value
,
ret
);
};
watch
(
props
.
listData
,
(
val
:
any
)
=>
{
console
.
log
(
'
change
'
);
try
{
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
:
any
)
=>
{
console
.
log
(
'
修改的列为
'
,
e
.
detail
.
column
,
'
,值为
'
,
e
.
detail
.
value
);
};
return
{
confirm
,
onChange
onChange
,
value
,
range
,
onColumnChange
};
}
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录