# 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
#

内容区域是自定义的,因此组件仅实现弹框的动效、标题栏与底栏的视觉标准化。内容区域需要自行实现——毕竟我们不会帮你解决所有的业务问题。

# 属性

配置 用途 取值 使用描述
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时,点击按钮执行回调。
  • iOS
  • Android
  • Web
  • MP
v1.0.0