平台兼容性

引入

import xtBottomDialog from "@/components/xt-bottom-dialog/xt-bottom-dialog.vue"
components: {xtBottomDialog}

基本用法

  <xt-bottom-dialog ref="xiangtaoDialog" title="基本用法" @confirm="confirm" @cancel="cancel" showTitle="true" showFooter="true"></xt-bottom-dialog>

显示

  this.$refs.xiangtaoDialog.showDialog();

制作ActionSheet(可以去源码中更改最大显示高度，或者设置可滑动，则可以显示很多个菜单)

<xt-bottom-dialog ref="xiangtaoDialog" title="ActionSheet" @confirm="confirm" @cancel="cancel" showTitle="false" showFooter="true">
    <button>操作1</button><button>操作2</button><button>操作3</button>
    <button>操作4</button><button>操作5</button><button>操作6</button>
    <button>操作7</button><button>操作8</button><button>操作9</button>
</xt-bottom-dialog>

样式可以自己调节

配合picker-view制作底部弹出时间

<xt-bottom-dialog ref="xiangtaoDialog" :title="showSelectTime" @confirm="confirm" @cancel="cancel" showTitle="true" showFooter="false">
    <picker-view indicator-style="height: 40px" :value="value" @change="bindChange">
        <picker-view-column>
            <view class="item" v-for="(item,index) in 21" :key="index">{{item}}时</view>
        </picker-view-column>
        <picker-view-column>
            <view class="item" v-for="(item,index) in 60" :key="index">{{item}}分</view>
        </picker-view-column>
    </picker-view>
</xt-bottom-dialog>