# PopUp 弹出层
自底部弹出的弹框
# 引入说明
TIP
import BottomSelector from "jimoui/components/BottomSelector/BottomSelector";
1
# 代码演示
TIP
<BottomSelector
v-model="showBottom"
:title="'标题'"
:subTitle="'副标题123123'"
:buttonText="'测试'"
:canceledOnTouchOutside="false"
>
<article class="list">
<p v-for="item in [1,2,3,4,5,6,7]">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsam ipsum iure iusto laborum modi. Accusantium aliquid, dolorum facere fuga nobis officiis perferendis quaerat quasi, quod, rem ullam vitae voluptatibus?</p>
</article>
</BottomSelector>
<script>
export default kayakVue({
name: "dev",
el: "container",
data() {
return {
showBottom: false
}
},
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#
内容区域是自定义的,因此组件仅实现弹框的动效、标题栏与底栏的视觉标准化。内容区域需要自行实现——毕竟我们不会帮你解决所有的业务问题。
# 属性
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
v-model | 控制弹框是否显示 | Boolean | / |
:title | 弹框标题文案 | String | 弹框标题文案。 通常该字段应该是必传的,如果不传则会隐藏头部 |
:subTitle | 弹框副标题文案 | String | 弹框副标题文案,非必传。 该字段传入时会自动撑开标题栏高度。 |
:subTitleColor | 弹框副标题颜色 | String | 默认#ff680a 非必传。 |
:mainColor | 按钮第一颜色颜色 | String | 非必传。 |
:secondColor | 按钮第二颜色 | String | 非必传。 |
:buttonText | 底部确定按钮文案 | Number | 弹框底部按钮文案。 该字段若不传入则不显示确定按钮。 |
:canSubmit | 提交按钮是否置灰不可点击 | Boolean | 参数为true时按钮高亮可点击,默认为true。 false时则为禁用,不可点击。此时将派发tapDisable回调。 |
:popHeight | 设置弹出层高度 | String | 默认为""。 组件有默认最大高度和最小高度,也可自行设置高 |
:canceledOnTouchOutside | 点击弹框以外的区域是否关闭 | Boolean | 默认为false。 传入值为true时,点击阴影区域将关闭弹框。 |
@tapSubmit | 点击提交按钮时的回调方法 | Function | $event。 传入buttonText时,点击按钮将执行回调。 |
@tapDisable | 提交按钮置灰时,点击按钮执行回调 | Function | $event。 传入buttonText且canSubmit为false时,点击按钮执行回调。 |