抽屜元件（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>
  <div class="draw">

    <button @click="toggleLeft" style="background:#999">左邊預設</button>
    <compdraw :isShow="showLeft"  :closeMode="true" @mode="toggleLeft">
      <p>單擊遮罩層關閉</p>
    </compdraw>
    
    <
 
button @click="toggleLefta" >左邊預設</button>
    <compdraw :isShow="showLeft1"   @mode="toggleLefta">
      <p>單擊遮罩層關閉</p>
      <button @click="toggleLefta" >關閉</button>
    </compdraw>

    <button @click="toggleRight" style="background:#999">右邊預設</button>
 

    <compdraw :isShow="showRight"  mode="right" :closeMode="true" @mode="toggleRight">
      <p>單擊遮罩層關閉</p>
    </compdraw>

    <button @click="toggleRighta" >右邊</button>
    <compdraw :isShow="showRight1" mode="right"    @mode="toggleRighta">
      <p>單擊遮罩層關閉</p>
      <button @click="toggleRighta" >關閉</button>
    </compdraw>
  </div>
</template>
<script>
import compdraw from './compdraw';
export default {
  name: 'draw',
  data () {
    return {
      showLeft:false,
      showLeft1:false,
      showRight:false,
      showRight1:false
    }
  },
  methods:{
    toggleLeft(){
      this.showLeft = !this.showLeft;
    },
    toggleLefta(){
      this.showLeft1 = !this.showLeft1;
    },
    toggleRight(){
      this.showRight = !this.showRight;
    },
    toggleRighta(){
       this.showRight1 = !this.showRight1;
    }
  },
  components:{
    compdraw
  }
}
</script>
<style scoped>
  *{
    box-sizing: border-box;
  }
  button{
    padding:10px 0; 
    width: 100%;
    background: blue;
    color: #fff;
    border: none;
    margin: 10px 0;
    outline: none;
  }
</style>

元件程式碼compdraw.vue：

<template>
  <div class="compdraw">
      <div class="drawitem">
          <div :class="isShow?'modea':'mode'" @click="modeClick"></div>
          <div :class="mode === 'left'?(isShow?'contenta':'content'):(isShow?'contentRighta':'contentRight')">
            <slot></slot>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'compdraw',
  data () {
    return {}
  },
  props:{
    // 控制點選遮罩是否隱藏
    closeMode:{
      type:Boolean,
      default:false
    },
    mode:{
      type:String,
      default:'left'
    },
    isShow:{
      type:Boolean
    }
  },
  methods:{
    modeClick(){
      if(this.closeMode){
        this.$emit('mode')
        console.error(this)
      }else{
        return;
      }
    }
  }
}
</script>
<style scoped>
  .content{
    position: fixed;
    left: -50%;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #fff;
    color: #333;
    transition: left .5s;
    z-index: 99;
    overflow: hidden;
  }
  .contenta{
    position: fixed;
    left: 0;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #fff;
    color: #333;
    z-index: 99;
    transition: left .5s;
    overflow: hidden;
  }

  .contentRight{
    right: -100%;
    position: fixed;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #fff;
    color: #333;
    transition: right .5s;
    padding: 10px;
    z-index: 99
  }

  .contentRighta{
    right: 0;
    position: fixed;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #fff;
    color: #333;
    transition: right .5s;
    padding: 10px;
    z-index: 99
  }
  .mode{
    position: fixed;
    left: -100%;
    right: 0px;
    top: 0;
    width: 100%;
    background: #222;
    opacity: .8;
    height: 100%;
    transition: left .5s;
    z-index: 9
  }
  .modea{
    position: fixed;
    left: 0;
    right: 0px;
    top: 0;
    width: 100%;
    background: #222;
    opacity: .8;
    height: 100%;
    transition: left .5s;
    z-index: 9
  }
</style>

WX小程式例子：demo.wxml

<view class="draw">
    <button bind:tap="toggleLeft">左邊預設</button>
    <button bind:tap="toggleLefta" type="warn">左邊</button>

    <button bind:tap="toggleRight">右邊預設</button>
    <button bind:tap="toggleRighta" type="warn">右邊</button>

    <view wx:if="{{showLeft}}">
      <draw  closeMode="{{true}}" bindmode="toggleLeft">
        <text>單擊遮罩層關閉</text>
      </draw>
    </view>

    <view wx:if="{{showLeft1}}">
      <draw   bindmode="toggleLeft" >
        <text>單擊遮罩層關閉</text>
        <button bind:tap="toggleLefta" type="warn">關閉</button>
      </draw>
    </view>

    <view wx:if="{{showRight}}">
      <draw  closeMode="{{true}}" bindmode="toggleRight" mode="{{'right'}}">
        <text>單擊遮罩層關閉</text>
      </draw>
    </view>

    <view wx:if="{{showRight1}}">
      <draw  mode="{{'right'}}">
        <text>單擊遮罩層關閉</text>
        <button bind:tap="toggleRighta" type="warn">關閉</button>
      </draw>
    </view>
</view>

WX小程式例子：Demo.js

// pages/draw/draw.js
Page({
  data: {
      showLeft:false,
      showLeft1:false,
      showRight:false,
      showRight1:false
  },
  toggleLeft(){
    var widthLength=wx.getSystemInfoSync().windowWidth/2;
    this.animation.translateX(widthLength).step()
    this.setData({animation: this.animation.export()})
    this.setData({
      showLeft:!this.data.showLeft
    });
  },
  toggleLefta(){
    this.setData({
      showLeft1:!this.data.showLeft1
    });
  },
  toggleRight(){
    this.setData({
      showRight:!this.data.showRight
    });
  },
  toggleRighta(){
    this.setData({
      showRight1:!this.data.showRight1
    });
  }
})

WX小程式元件：draw.js

Component({
  properties: {
    // 控制點選遮罩是否隱藏
    closeMode:{
      type:Boolean,
      value:false
    },
    mode:{
      type:String,
      value:'left'
    }
  },
  methods:{
    modeClick(){
      if(this.data.closeMode){
        this.triggerEvent('mode')
      }else{
        return;
      }
    }
  }
WX小程式元件：draw.css
.drawitem{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  .content{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #fff;
    color: #333;
    padding: 10px;
    z-index: 99
  }
  .contentRight{
    right: 0px;
    position: fixed;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #fff;
    color: #333;
    padding: 10px;
    z-index: 99
  }
  .mode{
    position: fixed;
    left: 0;
    right: 0px;
    top: 0;
    background: #222;
    opacity: .8;
    height: 100%;
    z-index: 9
  }

WX小程式元件：draw.wxml

<view class="compdraw">
  <view class="drawitem">
    <view class="mode" bind:tap="modeClick"></view>
    {{mode}}
    <view class="{{ mode == 'left' ? 'content' : 'contentRight' }}">
      <slot></slot>
    </view>
  </view>
</view>