prompt 温馨提示

解释: 温馨提示组件,可配置标题内容,提示内容,并可放置在页面的任何位置。

# 属性说明

属性名 类型 必填 默认值 说明
prompt-class String 提供开发外部样式类,供开发者自定义组件样式,可通过此 class 改变提示框外层样式
title-class String 提供开发外部样式类,供开发者自定义组件样式,可通过此 class 改变提示框标题样式
content-class String 提供开发外部样式类,供开发者自定义组件样式,可通过此 class 改变提示框内容样式

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例

    <view class="wrap">
        <view class="container">
            <view class="card-panel">
                <view class="comp-wrap">
                    <smt-prompt>
                        <view slot="title">标题名称</view>
                        <view slot="content">内容信息描述,支持多行信息展示,高度根据内容信息自适应</view>
                    </smt-prompt>
                </view>
            </view>
            <view class="card-panel">
                <view class="comp-wrap">
                    <smt-prompt content-class="prompt-content">
                        <view slot="title">标题名称</view>
                        <view slot="content">
                            内容信息描述,支持多行信息展示,高度根据内容信息自适应<view class="content-herf" bindtap="clkTextShow">文字链接</view>
                        </view>
                    </smt-prompt>
                </view>
            </view>
        </view>
    </view>
    
    
    {
        "navigationBarTitleText": "温馨提示",
        "navigationStyle": "default",
        "usingComponents": {
            "smt-prompt": "@smt-ui/component/src/prompt"
        }
    }
    
    
    Page({
    
        /**
         * 文字链接点击事件
         */
        clkTextShow() {
            swan.showToast({
                title: '暂未配置链接',
                icon: 'none'
            });
        }
    });
    
    
    .wrap {
        height: 100vh;
    }
    
    .smt-card-area {
        margin-top: 25.36rpx;
    }
    
    .card-panel:first-child {
        margin-top: 0;
    }
    
    .card-area {
        display: flex;
        margin: 90.58rpx 0 0;
        padding: 28.382rpx 30.797rpx;
        border: none;
        border-radius: 0;
        transition: background-color 200ms linear;
        align-items: center;
        justify-content: space-between;
    }
    
    .comp-wrap {
        background-color: #fff;
        margin-top: 25.362rpx;
        padding: 27.174rpx 30.797rpx;
    }
    
    .prompt-content {
        font-size: 25.362rpx;
        line-height: 1.5;
        color: #999;
    }
    
    .prompt-content .content-herf {
        color: #2772fb;
        display: inline;
    }