Mp-components NPM

npm install mp-components

Components

mp-nav-bar
mp-tab
mp-ellipsis
mp-popup
mp-dropdown-menu
mp-dropdown-menu-item
mp-button
mp-button-group
mp-box
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-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

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

properties

disabled: Boolean、 padding: String、 loading: Boolean、 loadingSize: Boolean、 dark: Boolean、 ghostDark: Boolean、 ghostLight: Boolean

event

tap

<mp-button bindtap="handleTap">
	填充按钮
</mp-button>

Effect

mp-button-group

properties

gap: String

<mp-button-group>
	<mp-button ghostLight>了解详情</mp-button>
	<mp-button ghostDark>立即订购</mp-button>
</mp-button-group>

mp-box

properties

ratio: Number

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

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"