Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
weixin_45791545
uni-app
提交
ad5c0172
U
uni-app
项目概览
weixin_45791545
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
ad5c0172
编写于
9月 25, 2018
作者:
H
hulin
提交者:
GitHub
9月 25, 2018
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #52 from zhetengbiji/master
优化示例
上级
c305dd7a
443466c9
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
111 addition
and
76 deletion
+111
-76
examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue
...hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue
+111
-76
未找到文件。
examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue
浏览文件 @
ad5c0172
<
template
>
<view
class=
"mvpue-picker"
>
<view
class=
"page-hd"
>
<view
class=
"page-title"
>
mvpue-picker 使用示例
</view>
<view
class=
"page__desc"
>
选中的值:
</view>
<view
class=
"picker-text"
>
{{
pickerText
}}
</view>
</view>
<view
class=
"page-bd"
>
<button
type=
"default"
@
click=
"showMulLinkageTwoPicker"
>
二级联动示例
</button>
<button
type=
"default"
@
click=
"showMulLinkageThreePicker"
>
三级联动示例
</button>
</view>
<mpvue-picker
:themeColor=
"themeColor"
ref=
"mpvuePicker"
mode=
"multiLinkageSelector"
:deepLength=
"2"
:pickerValueDefault=
"pickerValueDefault"
@
onConfirm=
"onConfirm"
@
onCancel=
"onCancel"
:pickerValueArray=
"pickerValueArray"
></mpvue-picker>
<mpvue-city-picker
:themeColor=
"themeColor"
ref=
"mpvueCityPicker"
:pickerValueDefault=
"cityPickerValueDefault"
@
onCancel=
"onCancel"
@
onConfirm=
"onConfirm"
></mpvue-city-picker>
</view>
<view
class=
"mvpue-picker"
>
<view
class=
"page-hd"
>
<view
class=
"page-title"
>
mvpue-picker 使用示例
</view>
<view
class=
"page__desc"
>
选中的值:
</view>
<view
class=
"picker-text"
>
{{
pickerText
}}
</view>
</view>
<view
class=
"page-bd"
>
<button
type=
"default"
@
click=
"showSinglePicker"
>
单列选择
</button>
<button
type=
"default"
@
click=
"showMulLinkageTwoPicker"
>
二级联动
</button>
<button
type=
"default"
@
click=
"showMulLinkageThreePicker"
>
三级城市联动
</button>
</view>
<mpvue-picker
:themeColor=
"themeColor"
ref=
"mpvuePicker"
:mode=
"mode"
:deepLength=
"deepLength"
:pickerValueDefault=
"pickerValueDefault"
@
onConfirm=
"onConfirm"
@
onCancel=
"onCancel"
:pickerValueArray=
"pickerValueArray"
></mpvue-picker>
<mpvue-city-picker
:themeColor=
"themeColor"
ref=
"mpvueCityPicker"
:pickerValueDefault=
"cityPickerValueDefault"
@
onCancel=
"onCancel"
@
onConfirm=
"onConfirm"
></mpvue-city-picker>
</view>
</
template
>
<
script
>
import
mpvuePicker
from
'
../../../components/mpvue-picker/mpvuePicker.vue
'
;
import
mpvueCityPicker
from
'
../../../components/mpvue-citypicker/mpvueCityPicker.vue
'
import
cityData
from
'
../../../common/city.data.js
'
;
// https://github.com/zhetengbiji/mpvue-picker
import
mpvuePicker
from
'
../../../components/mpvue-picker/mpvuePicker.vue
'
;
// https://github.com/zhetengbiji/mpvue-citypicker
import
mpvueCityPicker
from
'
../../../components/mpvue-citypicker/mpvueCityPicker.vue
'
import
cityData
from
'
../../../common/city.data.js
'
;
export
default
{
components
:
{
mpvuePicker
,
mpvueCityPicker
},
data
()
{
return
{
pickerValueDefault
:
[
0
,
0
],
pickerValueArray
:
cityData
,
cityPickerValueDefault
:
[
0
,
0
,
1
],
themeColor
:
'
#007AFF
'
,
pickerText
:
''
};
},
methods
:
{
onCancel
(
e
)
{
console
.
log
(
e
);
},
// 二级联动选择
showMulLinkageTwoPicker
()
{
this
.
$refs
.
mpvuePicker
.
show
();
},
// 三级联动选择
showMulLinkageThreePicker
()
{
this
.
$refs
.
mpvueCityPicker
.
show
();
},
onConfirm
(
e
)
{
this
.
pickerText
=
JSON
.
stringify
(
e
);
}
},
onUnload
()
{
if
(
this
.
$refs
.
mpvuePicker
.
showPicker
)
{
this
.
$refs
.
mpvuePicker
.
pickerCancel
()
}
if
(
this
.
$refs
.
mpvueCityPicker
.
showPicker
)
{
this
.
$refs
.
mpvueCityPicker
.
pickerCancel
()
}
}
};
export
default
{
components
:
{
mpvuePicker
,
mpvueCityPicker
},
data
()
{
return
{
pickerValueDefault
:
[
0
,
0
],
pickerSingleArray
:
[{
label
:
'
中国
'
,
value
:
1
},
{
label
:
'
俄罗斯
'
,
value
:
2
},
{
label
:
'
美国
'
,
value
:
3
},
{
label
:
'
日本
'
,
value
:
4
}
],
mulLinkageTwoPicker
:
cityData
,
cityPickerValueDefault
:
[
0
,
0
,
1
],
themeColor
:
'
#007AFF
'
,
pickerText
:
''
,
mode
:
''
,
deepLength
:
1
,
pickerValueDefault
:
[
0
]
};
},
methods
:
{
onCancel
(
e
)
{
console
.
log
(
e
)
},
// 单列
showSinglePicker
()
{
this
.
pickerValueArray
=
this
.
pickerSingleArray
this
.
mode
=
'
selector
'
this
.
deepLength
=
1
this
.
pickerValueDefault
=
[
0
]
this
.
$refs
.
mpvuePicker
.
show
()
},
// 二级联动选择
showMulLinkageTwoPicker
()
{
this
.
pickerValueArray
=
this
.
mulLinkageTwoPicker
this
.
mode
=
'
multiLinkageSelector
'
this
.
deepLength
=
2
this
.
pickerValueDefault
=
[
0
,
0
]
this
.
$refs
.
mpvuePicker
.
show
()
},
// 三级联动选择
showMulLinkageThreePicker
()
{
this
.
$refs
.
mpvueCityPicker
.
show
()
},
onConfirm
(
e
)
{
this
.
pickerText
=
JSON
.
stringify
(
e
)
}
},
onUnload
()
{
if
(
this
.
$refs
.
mpvuePicker
.
showPicker
)
{
this
.
$refs
.
mpvuePicker
.
pickerCancel
()
}
if
(
this
.
$refs
.
mpvueCityPicker
.
showPicker
)
{
this
.
$refs
.
mpvueCityPicker
.
pickerCancel
()
}
}
};
</
script
>
<
style
>
.page-hd
{
padding
:
80
upx
;
}
.page-hd
{
padding
:
80
upx
;
}
.page-title
{
font-size
:
40
upx
;
font-weight
:
800
upx
;
}
.page-title
{
font-size
:
40
upx
;
font-weight
:
800
upx
;
}
.page-bd
{
padding
:
30
upx
;
}
.page-bd
{
padding
:
30
upx
;
}
.page__desc
{
margin-top
:
20
upx
;
}
.page__desc
{
margin-top
:
20
upx
;
}
.picker-text
{
color
:
#6D6D6D
;
}
.picker-text
{
color
:
#6D6D6D
;
}
button
{
margin-top
:
30
upx
;
}
button
{
margin-top
:
30
upx
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录