無圖無真相！８菊！

lz-sheet.png

組件 LzSheet.vue

<template>
  <div class="wrapper" v-if="p_visiable">
    <div class="lz-dialog" ref="box" @click.stop="">
      <div v-if="p_title != null" class="lz-title">
        {{ p_title }}
      </div>

      <div class="lz-items">
        <div v-for="(item, index) in p_sheetItems" :key="index" @click="clickOnSheetItem(item)" class="lz-item">
          <div>{{ item.name }}</div>
          <div class="lz-line"></div>
        </div>
      </div>
      <div class="lz-cancel" @click="dimiss()">取消</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lz-sheet",
  props: {
    p_title: null,
    p_cancelable: {
      type: Boolean,
      default: true,
    },
    p_visiable: false,
    p_sheetItems: Array,
  },
  data() {
    return {};
  },
  methods: {
    dismiss() {
      this.$emit("update:p_visiable", false);
    },
    clickOnSheetItem(obj) {
        this.dismiss();
        this.$emit("clickOnSheet", obj);
    }
  },
};
</script>

<style >
.wrapper {
  background: #000000ff;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: bottom;
}
.lz-dialog {
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  margin: auto;
  overflow: hidden;
  padding: 10px 0px;
  width: 100%;
}
.lz-title {
  color: #111;
  font-weight: bolder;
}
.lz-items {
  padding: 10px 0px;
}
.lz-item {
  color: #333;
  height: 2.2rem;
  line-height: 2.2rem;
  font-weight: bolder;
}
.lz-line {
  background: #f2f2f2;
  height: 1px;
}
.lz-cancel {
  color: red;
  height: 2rem;
  line-height: 2rem;
}
</style>

使用方法

<template>
  <div>
    <h1>測試自定義組件 </h1>
    <div @click="showSheet()">彈1個按鈕框</div>
    <lz-sheet :p_visiable.sync="iShow" :p_title="iTitle" :p_sheetItems="sheetItems"  @clickOnSheet="clickOnSheet"/>
    
    <hr />

  </div>
</template>


<script>
import LzSheet from '../components/LzSheet.vue';

export default {
  components: {
    LzSheet
  },
  data() {
    return {
      iTitle: "選擇性別",
      iLeft: "取消",
      iShow: false,
      sheetItems:[
        {
          id: 1,
          name: "男",
        },        {
          id: 2,
          name: "女",
        },
        
      ],
    };
  },
  methods: {
      showSheet() {
        this.iShow = true;
      },
      clickOnSheet(obj) {
          console.log(obj.name);
      },
  },
};
</script>

<style>
</style>