抽屉组件(vue/wx)

  • (vue与微信两种实现方式)
  • 基于vue编写类似elementUi组件
  • 基于小程序语法写类似ivew组件
  1. 基于vue语法写组件(涉及:父子组件传值props,子父组件方法传递:this.$emit)
  2. 基于微信语法写组件(涉及:父子组件传值properties,子父方法传递:this.triggerEvent)

备注:

  • 编写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>

Logo

前往低代码交流专区

更多推荐