搜索 K

深色模式

Popup 弹出层 ​

弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。

基础使用 ​

  • 通过 show 属性控制弹出层是否显示。
  • 通过 title 属性设置标题。
  • 通过 默认 slot 插入内容。
  • 通过 footer slot 插入底部内容。
vue
<template>
    <!-- 弹窗 -->
    <hi-popup :show="show" @close="show = false" title="将进酒·君不见">
        <view class="popup-content">
            <view>君不见，黄河之水天上来，奔流到海不复回。</view>
            <view>君不见，高堂明镜悲白发，朝如青丝暮成雪。</view>
            <view>人生得意须尽欢，莫使金樽空对月。</view>
            <view>天生我材必有用，千金散尽还复来。</view>
            <view>烹羊宰牛且为乐，会须一饮三百杯。</view>
            <view>岑夫子，丹丘生，将进酒，杯莫停。</view>
            <view>与君歌一曲，请君为我倾耳听。</view>
            <view>钟鼓馔玉不足贵，但愿长醉不愿醒。</view>
            <view>古来圣贤皆寂寞，惟有饮者留其名。</view>
            <view>陈王昔时宴平乐，斗酒十千恣欢谑。</view>
            <view>主人何为言少钱，径须沽取对君酌。</view>
            <view>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</view>
        </view>
        <template #footer>
            <view class="footer">【作者】李白 【朝代】唐</view>
        </template>
    </hi-popup>

    <!-- 按钮 -->
    <hi-button @click="show = true">显示弹窗</hi-button>
</template>

<script setup>
    import { ref } from 'vue'

    // 显示状态
    const show = ref(false);
</script>

<style scoped>
.popup-content {
    padding: 2em;
    font-size: 14px;
}
</style>

弹窗 Header 包含左侧内容、标题和右侧内容。

  • 左侧内容可以通过 headerLeft 插槽来自定义内容。
  • 标题可以通过 title 属性设置或通过 title 插槽自定义内容。
  • 右侧内容可以通过 headerRight 插槽自定义内容。

如果不想显示 Header ，可以设置 header 为 false。

vue
<template>
    <hi-popup :show="show" @close="show = false" title="将进酒·君不见" :header="false">
        <template #headerLeft>
            <text class="cancel">取消</text>
        </template>
        <template #headerRight>
            <text class="confirm">确定</text>
        </template>
        <view class="popup-content">
            <view>君不见，黄河之水天上来，奔流到海不复回。</view>
            <!-- ... -->
        </view>
    </hi-popup>
</template>
  • 通过 footer 插槽可以自定义底部内容。
  • 通过 footer 属性可以控制是否显示底部内容。
vue
<template>
    <hi-popup :show="show" @close="show = false" title="将进酒·君不见">
        <view class="popup-content">
            <view>君不见，黄河之水天上来，奔流到海不复回。</view>
            <!-- ... -->
        </view>
        <template #footer>
            <view class="footer">【作者】李白 【朝代】唐</view>
        </template>
    </hi-popup>
</template>

内容显示位置 ​

通过 mode 属性设置弹窗内容显示的位置，可设置的值有：

  • top: 顶部居中；
  • bottom: 底部居中；
  • left: 左侧居中；
  • right: 右侧居中。
  • center: 中部居中。默认值。
vue
<template>
    <!-- 弹窗 -->
    <hi-popup :show="show" @close="show = false" title="将进酒·君不见" :mode="mode">
        <view class="popup-content">
            <view>君不见，黄河之水天上来，奔流到海不复回。</view>
            <!-- ... -->
        </view>
    </hi-popup>

    <!-- 切换内容显示位置 -->
    <hi-button text="top" @click="handleClick('top')"></hi-button>
    <hi-button text="bottom" @click="handleClick('bottom')"></hi-button>
    <hi-button text="left" @click="handleClick('left')"></hi-button>
    <hi-button text="bottom" @click="handleClick('bottom')"></hi-button>
    <hi-button text="center" @click="handleClick('center')"></hi-button>
</template>

<script setup>
    import { ref } from 'vue'

    // 显示状态
    const show = ref(false);

    // 内容显示位置
    const mode = ref('center');

    // 按钮点击事件
    function handleClick(_mode) {
        mode.value = _mode;
        show.value = true;
    }
</script>

关闭按钮 ​

  • 通过 close 属性设置是否显示关闭按钮。
  • 通过 closeIcon 属性设置关闭按钮图标。
  • 通过 closeColor 属性设置关闭按钮颜色。
  • 通过 closeSize 属性设置关闭按钮大小。
  • 通过 closeRight、closeTop、closeLeft、closeBottom 属性设置关闭按钮距离右边、上边、左边、下边的距离。
vue
<template>
    <!-- 弹窗 -->
    <hi-popup :show="show" @close="show = false" title="将进酒·君不见" closeIcon="close" coloseColor="#ff0000" closeSize="1.5em">
        <view class="popup-content">
            <view>君不见，黄河之水天上来，奔流到海不复回。</view>
            <!-- ... -->
        </view>
    </hi-popup>
</template>

Props ​

属性名说明类型默认值可选值版本
hover指定关闭按钮按下去的样式类Stringhi-hover--
show显示状态Booleanfalsetrue-
mode内容显示位置Stringcenter见上方说明-
height内容高度String---
maxHeight内容最大高度String---
width内容宽度String---
maxWidth内容最大宽度String---
mask是否显示遮罩层Booleantruefalse-
maskClickable遮罩层是否可点击Booleantruefalse-
maskBg遮罩层背景颜String---
header是否显示 HeaderBooleantruefalse-
title标题String---
titleColor标题颜色String---
titleFontSize标题字体大小String---
titleFontWeight标题字体粗细String---
close是否显示关闭按钮Booleantruefalse-
closeIcon关闭按钮图标String__shanchu--
closeColor关闭按钮颜色String---
closeSize关闭按钮大小String---
closeRight关闭按钮距离右边距离String---
closeTop关闭按钮距离上边距离String---
closeLeft关闭按钮距离左边距离String---
closeBottom关闭按钮距离下边距离String---
footer是否显示 FooterBooleantruefalse-
bg内容背景String---
radius内容圆角大小String---
headerHeightHeader 高度String---
headerBorder是否显示 Header 下边框Booleanfalsetrue-
headerBorderColorHeader 下边框颜色String---
headerBorderWidthHeader 下边框宽度String---
headerBorderStyleHeader 下边框类型String---
footerHeightFooter 高度String---
footerBorder是否显示 Footer 上边框Booleanfalsetrue-
footerBorderColorFooter 上边框颜色String---
footerBorderWidthFooter 上边框宽度String---
footerBorderStyleFooter 上边框类型String---

Event ​

事件名说明回调参数版本
close点击关闭按钮或遮罩触发的关闭事件--
scroll内容滚动事件--
scrolltolower内容滚动到底部触发事件--

Slots ​

名称说明参数版本
default内容插槽--
headerLeftHeader 左侧内容插槽--
headerRightHeader 右侧内容插槽--
title标题插槽--
close关闭按钮插槽--
footerFooter 内容插槽--
top顶部（Header 和内容之间的部分）插槽--
bottom底部（Footer 和内容之间的部分）插槽--

样式变量 ​

组件提供了以下样式变量，可以在使用时设置这些变量来修改组件的样式。

变量名默认值版本
--hi-popup-mask-positionfixed-
--hi-popup-mask-width100%-
--hi-popup-mask-height100%-
--hi-popup-mask-top0-
--hi-popup-mask-left0-
--hi-popup-mask-right0-
--hi-popup-mask-bottom0-
--hi-popup-mask-z-indexvar(--hi-index-upper)-
--hi-popup-mask-backgroundvar(--hi-background-overlay)-
--hi-popup-mask-overflowhidden-
--hi-popup-mask-animation-duration300ms-
--hi-popup-mask-animation-timing-functionlinear-
--hi-popup-mask-animation-fill-modeforwards-
--hi-popup-content-width100% / auto-
--hi-popup-content-max-width80% / 100%-
--hi-popup-content-heightauto-
--hi-popup-content-max-height80% / 100%-
--hi-popup-content-backgroundvar(--hi-background-element)-
--hi-popup-content-border-radius10px / 0 0 10px 10px / 10px 10px 0 0 / 0 10px 10px 0 / 10px 0 0 10px-
--hi-popup-content-displayflex-
--hi-popup-content-flex-directioncolumn-
--hi-popup-content-overflowhidden-
--hi-popup-content-positionfixed-
--hi-popup-content-leftauto / 50% / 0-
--hi-popup-content-topauto / 50% / 0-
--hi-popup-content-rightauto / 0-
--hi-popup-content-bottomauto / 0-
--hi-popup-content-transforminitial / translate(-50%, -50%) / translate(-50%, 0) / translate(0, -50%)-
--hi-popup-content-z-indexvar(--hi-index-upper)-
--hi-popup-content-padding0-
--hi-popup-content-animation-duration300ms-
--hi-popup-content-animation-timing-functionlinear-
--hi-popup-content-animation-fill-modeforwards-
--hi-popup-header-heightauto-
--hi-popup-header-padding12px 15px-
--hi-popup-header-text-aligncenter-
--hi-popup-header-font-size1.25em-
--hi-popup-header-font-weight700-
--hi-popup-header-positionrelative-
--hi-popup-header-displayflex-
--hi-popup-header-align-itemscenter-
--hi-popup-header-justify-contentcenter-
--hi-popup-header-flex-shrink0-
--hi-popup-header-border-width0-
--hi-popup-header-border-stylesolid-
--hi-popup-header-border-colorvar(--hi-border-color)-
--hi-popup-title-colorinherit-
--hi-popup-title-font-sizeinherit-
--hi-popup-title-font-weightinherit-
--hi-popup-title-flex1-
--hi-popup-close-positionabsolute-
--hi-popup-close-colorinherit-
--hi-popup-close-size1.25em-
--hi-popup-close-right10px-
--hi-popup-close-leftauto-
--hi-popup-close-top15px-
--hi-popup-close-bottomauto-
--hi-popup-close-z-index8-
--hi-popup-close-displayflex-
--hi-popup-close-align-itemscenter-
--hi-popup-close-justify-contentcenter-
--hi-popup-close-font-weight700-
--hi-popup-body-flex1-
--hi-popup-body-overflowhidden-
--hi-popup-body-displayflex-
--hi-popup-scroll-view-width100%-
--hi-popup-footer-flex-shrink0-
--hi-popup-footer-displayflex-
--hi-popup-footer-align-itemscenter-
--hi-popup-footer-heightauto-
--hi-popup-footer-border-width0-
--hi-popup-footer-border-stylesolid-
--hi-popup-footer-border-colorvar(--hi-border-color)-

基于 MIT 许可发布

版权所有 © 2024-2029 济南晨霜信息技术有限公司