❤
npm
Sign UpSign In

mp-components

0.0.145 • Public • Published 
npm install mp-components

Utils

Name Type Description
reachBottom Function(root, target, callback) Listen to the bottom of the target element and execute the callback function when it is reached.
countDown Function(fn, seconds) Count Down

Components

mp-nav-bar

mp-tab

mp-ellipsis

mp-popup

mp-dropdown-menu

mp-dropdown-menu-item

mp-dots

mp-pk-card

mp-pk-progress-bar

mp-image

mp-nav-bar-home

mp-line

mp-text-line

mp-tab-panel

mp-tab-panel-item

mp-expand

mp-action-sheet

mp-expand-enhanced

mp-collapse

mp-count-down

mp-popup-v2

mp-safe-bottom

mp-toast

mp-nav-bar

  • properties

bg: String、 zIndex: Number、 custom: Boolean

  • events

height

  • slots

left、title、 default

Tip: If the custom property is true, the left and title slots are invalid

mp-popup-v2

Prop Type default describe
enable Boolean true 是否从页面中脱离出来
mask-closable Boolean true 是否点击背景时关闭
bg String rgba(0, 0, 0, .7) 背景色
duration Number 0.2 动效时长(秒)
top String 0 距离顶部距离
bottom String 0 距离底部距离
right String 0 距离右侧距离
left String 0 距离左侧距离
edge String bottom 内容位置 (bottom, top, left, right, center)
fade Boolean false 是否开启淡入淡出效果 (如果开启，则不会有上、下、左、右滑入滑出效果)

  • Methods

    Method Description
    toggle 关闭、打开弹窗
    open 打开弹窗
    close 关闭弹窗

  • Events

    Event Description
    bind:open 弹窗打开
    bind:close 弹窗关闭

mp-bound-info

  • Methods

    Method Description
    getBound 获取元素的边界信息 (注意: 该方法的调用时机， 以免获取值都是初始值； 推荐使用 Event 绑定获取)

  • Events

    Event Description
    bind:bound 元素边界信息获取成功

mp-safe-bottom

mp-toast

Prop Type default describe
duration Number 2 显示时长(秒)
speedDuration Number 0.1 0-1 出现toast的时长
bg String rgba(26, 23, 27, 0.90) 内容背景色
radius String 12rpx 内容圆角
message String 内容
top String null 距离顶部距离
bottom String null 距离底部距离
safe-top Boolean false 是否启用顶部安全区域
safe-bottom Boolean false 是否启用底部安全区域
  • Methods
    Method Options Description
    toast {message: string, duration: number, top: string, bottom: string} 显示 toast

Demo


<mp-nav-bar custom="{{true}}">
    <view slot="left">back</view>
    <view slot="title">title</view>
    <view>custom</view>
</mp-nav-bar>

mp-ellipsis

  • properties

content: String、 contentClass: String、 contentStyle: String、 rows: Number、 size: String、 lineHeight: String、ellipsisColor: String、forceShowSlot： Boolean, forceShowSlotPosition: 'end' | 'suffix', isAsync: Boolean, offset: Number

  • slot

default

Demo


<mp-ellipsis content="what???" rows="{{2}}">
    <view>Slot</view>
</mp-ellipsis>

mp-tab

  • properties

data: Array、 labelField: String | null、 active: Number、 height: String、gap: String、size: String、activeSize: String、color: String、 activeColor: String、 activeLineHeight: String、 activeLineColor: String、 border: String、 borderColor: String、 justifyBetween: Boolean、itemStyle: String、activeItemStyle: String、 startSize: Number、endSize: Number => font-size animation scale from size to start and then end

  • events

change

Demo


<comp data="{{['tab1', 'tab2']}}" height="120rpx" active="{{curTab}}" itemClass="item" catch:change='onChange'></comp>

mp-popup

  • properties

visible: Boolean、 bg: String、 maskClosable: Boolean、 duration: Number、 type: String、 contentClass: String

type -> bottom、top、left、right、center、center-scale

  • events

open、opened、close、 closed

  • slot

default

mp-dropdown-menu

  • properties

duration: Number、 bg: String、 maskClosable: Boolean

  • events

open、opened、close、 closed、 change

  • methods

close

  • slot

default

mp-dropdown-menu-item

  • slot

default、 title


<mp-dropdown-menu maskClosable="{{true}}" catch:change="onMenuChange" catch:close="close" catch:closed="closed"
                  catch:open="open" catch:opened="opened">
    <mp-dropdown-menu-item>
        <view slot="title" class="menu-item">One</view>
        <view style="background: #ffffff;">Content</view>
    </mp-dropdown-menu-item>
    <mp-dropdown-menu-item>
        <view slot="title" class="menu-item">Two</view>
        <view style="background: #ffffff;">Content2</view>
    </mp-dropdown-menu-item>
    <mp-dropdown-menu-item>
        <view slot="title" class="menu-item">Three</view>
        <view style="background: #ffffff;">Content3</view>
    </mp-dropdown-menu-item>
</mp-dropdown-menu>

.menu-item {
    width: 100%;
    padding: 20rpx 0;
}

mp-dots

  • properties

count: Number、current: Number、 radius: String、 gap: String、color: String、activeColor: String、 activeWidth: String、width: String、height: String、radius: String

  • event

change

mp-pk-card

  • properties

bg: String、bgOpacity: Number、 images: Array、 gap: String、 deg: Number、 pLeft: String

  • slot

left、right

  • events

offset

demo


<view style="height: 500rpx;">
    <mp-pk-card deg="{{-10}}">
        <view slot="left" style="height: 100%; width: 100%; color: red; display: flex; align-items: flex-end;">
            Left
        </view>
        <view slot="right"
              style="height: 100%; width: 100%; color: red; display: flex; align-items: flex-end; justify-content: flex-end;">
            Right
        </view>
    </mp-pk-card>
</view>

mp-pk-progress-bar

  • properties

height: String、 radius: String、 bg: String、 chunkWidth: String、 value: String、 left: String、 right: String、 deg: Number

mp-image

  • properties

src: String、 lazy: Boolean、 mode: String、 radius: String、bg: String

mp-nav-bar-home

  • properties

bg: String, iconStyle: String, backStyle: String, homeStyle: String, backIcon: String, homeIcon: String, homePath: String, homePathIsTabBar: Boolean, duration: Number, customBackEvent: Boolean, placeholder: Boolean

  • events

height

back

<!-- bg, iconStyle, backStyle, homeStyle, backIcon, homeIcon, homePath, homePathIsTabBar, duration => default value -->

<mp-nav-bar-home>
    <view>Title</view>
</mp-nav-bar-home>

<!-- with default value -->
<mp-nav-bar-home
    bg="rgba(255, 255, 255, 1)"
    iconStyle="margin-left: 32rpx;"
    backStyle="width: 56rpx; height: 56rpx;"
    homeStyle="width: 40rpx; height: 40rpx;"
    backIcon="https://source-1259320891.cos.ap-shanghai.myqcloud.com/medias/nav-back.png"
    homeIcon="https://source-1259320891.cos.ap-shanghai.myqcloud.com/medias/home-icon.png"
    homePath=""
    homePathIsTabBar="{{true}}"
    duration="{{400}}"
>
    <view>Title</view>
</mp-nav-bar-home>

mp-line

  • properties

top: Boolean, right: Boolean, bottom: Boolean, left: Boolean, radius: String, color: String, shadow: String


<view style="width: 50%; margin: 0 auto;">
    <mp-box>
        <mp-line top right bottom left color="blue" shadow="0 8rpx 16rpx 0 blue" radius="8rpx">
            <mp-box>
                <view bindtap="log">???</view>
            </mp-box>
        </mp-line>
    </mp-box>
</view>
<view style="height: 60rpx;"></view>
<mp-line top right bottom left color="blue" shadow="box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.06)">
    <mp-box>
        <view bindtap="log">???</view>
    </mp-box>
</mp-line>

<view style="height: 20rpx;"></view>
<view style="border: 1rpx solid purple; border-radius: 8rpx;">
    <mp-box></mp-box>
</view>
<view style="height: 20rpx;"></view>

<mp-line top color="red">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line left color="blue">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line bottom color="yellow">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line right color="green">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>

mp-text-line

  • properties

line: Number, text: String

mp-tab-panel、mp-tab-panel-item

有些场景只用到左右切换页面，并且不支持手势切换，可以用这个组件
  • properties

height: String、 current: Number、 duration: Number


<mp-tab-panel current="{{current}}">
    <mp-tab-panel-item>One</mp-tab-panel-item>
    <mp-tab-panel-item>Two</mp-tab-panel-item>
    <mp-tab-panel-item>Three</mp-tab-panel-item>
</mp-tab-panel>

mp-expand

  • properties

custom: Boolean 可以自定义 默认显示的内容

direction: "top"、"bottom"、"left"、"right"; default is "top"

duration: Number; default is 300ms

iconBg: String

bg: String

  • events

toggle

  • slot

default 默认显示的内容 custom 自定义显示的内容 (properties 传入 custom="{{true}}" 时生效)


<view class="add-feed-box">
    <mp-expand catch:toggle="toggle">
        <view class="add-feed-icon-2 {{expandVisible ? 'expand' : ''}}">
            <image class="icon-item" mode="aspectFill"
                   src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/feed-image-icon.png"></image>
            <image class="icon-item" mode="aspectFill"
                   src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/feed-video-icon.png"></image>
            <view class="icon-item"></view>
        </view>
    </mp-expand>
</view>

Page({
	data: {
		expandVisible: false,
	},
	toggle({ detail }) {
		this.setData({ expandVisible: detail.visible })
	},
})
.add-feed-icon-2 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    transition: height 0.3s ease;
    background-color: rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.add-feed-icon-2.expand {
    height: 364rpx;
}

.icon-item {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    margin-bottom: 32rpx;
}

Effect

mp-action-sheet

  • properties

zIndex: Number, topBg: String, bottomBg: String, gap: String

  • slot

top、bottom


<mp-action-sheet>
    <view slot="top" class="initial">
        <view style="padding: 40rpx 0 0 0; display: flex; align-items: center; justify-content: space-between;">
            <view>
                <block wx:if="{{visible}}">
                    <text>微信用户昵称：杨苏州</text>
                </block>
            </view>
            <image style="width: 56rpx; height: 56rpx;"
                   src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/clear-screen-icon.png"
                   bind:tap="toggle2"></image>
        </view>
        <mp-collapse visible="{{visible}}">
            <mp-expand-enhanced style="color: #ffffff;" text="{{text}}" expand="{{expand}}" initialLine="2">
                <view slot="left">
                    <button>话题</button>
                    <button>地址</button>
                </view>
                <view slot="right" style="background: #6E1013; padding: 4rpx 2rpx;" bind:tap="toggle">
                    {{expand ? '收起' : '展开'}}
                </view>
            </mp-expand-enhanced>
        </mp-collapse>
    </view>
    <view slot="bottom" class="initial">
        <Inp/>
    </view>
</mp-action-sheet>

Page({
	data: {
		expand: false,
		visible: true,
		text: '嘿嘿嘿好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊嘿嘿嘿好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊',
		src: 'https://qa-data.roxmotor.com/ccms-service/1747543957778604032-video/1718171849640.mp4?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDKTLyKPDk11kBOL1QZR2MfneEYcPvA9tM%26q-sign-time%3D1718187731%3B1718191331%26q-key-time%3D1718187731%3B1718191331%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Ddb47f518df071526bf861b7c5af48d8f6e5fffb1',
	},
	toggle: function () {
		this.setData({ expand: !this.data.expand })
	},
	toggle2: function () {
		this.setData({ visible: !this.data.visible })
	},
	onLoad: function (options) {
	},
})

mp-expand-enhanced

  • properties

expand: Boolean, text: String, initialLine: Number, gap: String, position: String, initExpandVisible: Boolean

position 可选值 "start"、"center"、"end"，默认 "end"

  • slot

left、right、default

mp-collapse

  • properties

visible: Boolean, duration: Number

  • slot

default

mp-fade-slide-up

  • properties

absolute: Boolean, fixed: Boolean, position: String, visible: Boolean, duration: Number, offset: String, shadow: String, radius: String, bg: String

  • slot

default

mp-count-down

  • properties

seconds: Number | String

  • slot

before

default

after

Readme

Keywords

Package Sidebar

Install

npm i mp-components

Repository

gitcode.net/weixin_38726348/mp-components.git

Weekly Downloads

9

Version

0.0.145

License

MIT

Unpacked Size

104 kB

Total Files

116

Last publish

Collaborators

  • a-drowned-fish
Try on RunKit
Report malware