创建一个创建对象添加一些方法
export default Behavior({
definitionFilter ( defFields ) {
// console.log(defFields);
defFields.methods.messageBoxShow = function (val ) {
this.isShowMessage = val;
}
defFields.methods.emit = function(str,params = {}){
if ( typeof params !== 'object' ) {
console.warn('params not Object')
return
}
this.triggerEvent(str, {...params}, {})
}
}
})
behaviors 小程序提供的组件扩建对象
<template>
<view class="messagebox" hidden="{{!show}}">
<view class="messagebox-model"></view>
<view class="messagebox-container" wx:class="{{ {'messagebox-container-show' : isShowMessage} }}">
<view class="messagebox-title">
{{title}}
</view>
<view class="messagebox-ctx">
{{message}}
</view>
<view class="messagebox-btn">
<view class="messagebox-btn-item bg-default" bind:tap="handleCancel">{{contextCancel}}</view>
<view class="messagebox-btn-item bg-confirm" bind:tap="handleConfirm">{{contextConfirm}}</view>
</view>
</view>
</view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
import be from './message'
createComponent({
//上下组件节点关联
relations : {},
mixins : [],
behaviors:[be],
//组件值传递
properties : {
show:Boolean,
title:{
type:String,
value:'提醒'
},
message:String,
contextCancel:{
type:String,
value:'取消'
},
contextConfirm:{
type:String,
value:'确定'
}
},
watch:{
show(val){
this.messageBoxShow(val)
},
},
data : {
isShowMessage : false,
},
computed : {
classes () {
return this.isShowMessage ? 'messagebox-show' : ''
},
classesScale () {
return this.isShowMessage ? 'messagebox-container-show' : ''
}
},
ready () {},
methods : {
handleConfirm(){
this.emit('confirm')
},
handleCancel(){
this.emit('cancel')
},
}
})
</script>
<style lang="less">
.messagebox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
&-container {
margin: 40% auto 0;
position: relative;
width: 85%;
z-index: 2003;
background: #fff;
transform: scale(0);
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-webkit-animation: showScale .3s;
animation: showScale .3s;
}
&-container-show {
transform: scale(1);
}
&-title {
padding: 20px;
font-size: 16px;
font-weight: bold;
color: #1a1a1f;
border-bottom: 1px solid #f1f1f1;
}
&-ctx {
padding: 48px 0;
width: 100%;
text-align: center;
font-size: 16px;
color: #1a1a1f;
}
&-btn {
display: -webkit-flex;
display: flex;
width: 100%;
border-top: 1px solid #f1f1f1;
&-item {
-webkit-flex: 1;
flex: 1;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #1a1a1f;
}
}
}
@keyframes showScale {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
.messagebox-model {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .51);
}
.bg-default {
background: #fff;
color: #1a1a1f;
border-color: #c9caca;
}
.bg-default:hover, bg-default:focus {
background: #f1f1f1;
color: #1a1a1f;
border-color: #c9caca;
}
.bg-confirm {
color: #fff;
background-color: #37b48d;
}
.bg-confirm:hover, bg-confirm:focus {
background: #309F7A;
color: #fff;
border-color: transparent;
}
</style>
<script type="application/json">
{}
</script>