抽屉组件（vue/wx）-基于vue编写类似elementUi组件，基于小程序语法写类似ivew组件
- 基于vue语法写组件（涉及：父子组件传值props，子父组件方法传递：this.$emit）- 基于微信语法写组件（涉及：父子组件传值properties，子父方法传递：this.triggerEvent）
·
抽屉组件（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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)