wx小程序尝试 组件扩展 mpx中

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}, {})
    }
  }
})

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