抽屉组件（vuewx）-基于vue编写类似elementUi组件，基于小程序语法写类似ivew组件

抽屉组件（vue/wx）

（vue与微信两种实现方式）基于vue编写类似elementUi组件基于小程序语法写类似ivew组件 基于vue语法写组件（涉及：父子组件传值props，子父组件方法传递：this.$emit）基于微信语法写组件（涉及：父子组件传值properties，子父方法传递：this.triggerEvent） Vue的相关用法请查看官方文档，这里提供mpvue文档地址（很不错的基于vue的语法写小程序，目前不支持插槽） http://mpvue.com/mpvue/微信小程序的相关用法请查看小程序开发者文档： https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

备注：

编写vue组件经常遇到多层级组件的关系嵌套，数据传递，采用边界处理provide（顶层组件抛出），和inject（底层组件注入接收）编写小程序同理对于多层级组件，数据传递，采用relations-》type，回调中this.getRelationNodes(‘path/to/custom-li’)获取子组件循环)

效果图vue：

效果图wx：

以下代码例子Vue：demo.vue

<template> <cb-page title="Drawer 抽屉"> <cb-button @click="showLeft = true" color="light" >默认左侧</cb-button> <cb-button @click="showLefta = true" >左侧</cb-button> <cb-button @click="showRight = true" color="light" >右侧默认</cb-button> <cb-button @click="showRighta = true" >右侧</cb-button> <cb-drawer :open.sync="showLeft" :close-by-out-side-click="true" @change="changeClick"> <p>默认左侧</p> </cb-drawer> <cb-drawer :open.sync="showLefta"> <p>左侧</p> <cb-button @click="showLefta = false" >关闭</cb-button> </cb-drawer> <cb-drawer position="right" :open.sync="showRight" :close-by-out-side-click="true"> <p>右侧默认侧</p> </cb-drawer> <cb-drawer position="right" :open.sync="showRighta"> <p>右侧</p> <cb-button @click="showRighta = false" >关闭</cb-button> </cb-drawer> </cb-page> </template> <script> export default { name: 'drawer', data() { return { showLeft: false, showLefta: false, showRight: false, showRighta: false } }, methods: { changeClick() { console.log('hell draw'); } } } </script> <style scoped lang="less"> </style>

组件代码compdraw.vue：

<template> <div class="cb-drawer"> <div v-if="open" :class="position === 'left' ? (open ? 'cb-drawer-open-mode': 'cb-drawer-close-mode') : ( open ? 'cb-drawer-open-mode-right': 'cb-drawer-close-mode-right')" @click="modeClick"> </div> <div :class="position === 'left' ? (open ? 'cb-drawer-open-content' : 'cb-drawer-close-content') : (open ? 'cb-drawer-open-content-right' :'cb-drawer-close-content-right') "> <slot></slot> </div> </div> </template> <script> export default { componentName: "cb-drawer", props: { //控制遮罩是否可以点击隐藏抽屉组件 closeByOutSideClick: { type: Boolean, default: false }, //抽屉滑动方向 position: { type: String, default: 'left' }, width: { type: String, default: '50' }, //抽屉遮罩层是否显示 open: { type: Boolean } }, methods: { modeClick() { if (this.closeByOutSideClick) { this.$emit('update:open',false); this.$emit('change'); } } } } </script> <style scoped lang="less"> @import "../../mp/cb-drawer/cb-drawer"; .cb-drawer-open-content,.cb-drawer-close-content{ padding: 30px 0px 0px 0px; } .cb-drawer-open-content-right,.cb-drawer-close-content-right{ padding: 30px 0px 0px 0px; } </style>

组件less：

.cb-drawer{ &-close-content,&-open-content, &-close-content-right,&-open-content-right, &-close-mode ,&-open-mode,&-close-mode-right,&-open-mode-right{ position: fixed; top: 0; height: 100%; } &-close-content,&-open-content,&-close-content-right,&-open-content-right{ width: 50%; background: #fff; z-index: 99 } &-open-mode,&-close-mode,&-close-mode-right,&-open-mode-right{ background: #222222; opacity: 0.8; z-index: 9; width: 100%; right: 0; left: 0; } &-close-content{ opacity:0; left: 0%; transform: translate3d(-100%, 0, 0); transition: all .5s; } &-open-content{ opacity:1; left: 0%; transform: translate3d(0, 0, 0); transition:all .5s; } &-close-content-right{ right: -50%; transition: right .5s; } &-open-content-right{ right: 0; transition: right .5s; } &-close-mode{ opacity:0; transition: opacity .5s; } &-open-mode{ opacity: 0.7; transition: opacity .5s; } &-close-mode-right{ opacity:0; transition: opacity .5s; } &-open-mode-right{ opacity: 0.7; transition: opacity .5s; } }

WX小程序例子：demo.wxml

<view class="draw"> <button bind:tap="showLeft = true">左边默认</button> <button bind:tap="showLefta = true" type="warn">左边</button> <button bind:tap="showRight = true">右边默认</button> <button bind:tap="showRighta = true" type="warn">右边</button> <view> <draw open="showLeft" closeByOutSideClick="{{true}}"> <text>单击遮罩层关闭</text> </draw> </view> <view> <draw open="showLefta"> <text>单击遮罩层关闭</text> <button bind:tap="showLefta = true" type="warn">关闭</button> </draw> </view> <view> <draw closeByOutSideClick="{{true}}" open="showRight" position="{{'right'}}"> <text>单击遮罩层关闭</text> </draw> </view> <view> <draw position="{{'right'}}" open="showRighta"> <text>单击遮罩层关闭</text> <button bind:tap="showRighta = false" type="warn">关闭</button> </draw> </view> </view>

WX小程序例子：Demo.js

// pages/draw/draw.js Page({ data: { showLeft:false, showLeft1:false, showRight:false, showRight1:false } })

WX小程序组件：draw.js

Component({ externalClasses: ['cb-class'], properties: { //控制遮罩是否可以点击隐藏抽屉组件 closeByOutSideClick: { type: Boolean, value: false }, //抽屉滑动方向 position: { type: String, value: 'left' }, //抽屉遮罩层是否显示 open: { type: Boolean } }, methods: { modeClick() { if (this.data.closeByOutSideClick) { this.triggerEvent('updateopen',false); let myOptionEvent={} this.triggerEvent('change'); } else { return; } } } });

WX小程序组件：draw.wxml

<view class="cb-drawer"> <view wx:if = "{{open}}" class="{{position === 'left' ? (open ? 'cb-drawer-open-mode': 'cb-drawer-close-mode' ):( open ? 'cb-drawer-open-mode-right' : 'cb-drawer-close-mode-right')}}" bind:tap = "modeClick"></view> <view class = "{{ position === 'left' ? ( open ? 'cb-drawer-open-content' : 'cb-drawer-close-content') : ( open ? 'cb-drawer-open-content-right' : 'cb-drawer-close-content-right')}}"> <slot></slot> </view> </view>