Vue-移动端actionSheet

最近有一个移动端actionSheet需求，找了很多第三方的插件，github上面也有都没有自己想要的，干脆自己写一个。直接上代码：

第一步：引入animate.css

npm install animate.css --save

然后再main.js里面使用

import animated from ‘animate.css’
Vue.use(animated)

第二步：看代码（复制粘贴即用）

由于我兼容了IOS全面屏所以会有一个安卓和全面屏的判断，不要着急，判断的逻辑在最下面哦~

/*
--------------------------------------------------
|  date:2020/10/16   time:18:34    author:WH       |
--------------------------------------------------
*/
<template>
  <div class="actionSheet animated" :class="actionSheetFlag ? 'fadeIn' : 'fadeOut'">
    <div class="bottomSheet animated"
         :class="[judgeBigScreen && androidOrIos === 'ios' ? 'bottom68' : 'bottom45',actionSheetFlag ? 'fadeInUpBig' : 'fadeOutDownBig']">
      <div v-for="(item,index) in limit" :key="index">
        <button class="limit-btn">{{item.name}}</button>
      </div>
      <button class="close-btn" @click="changeHandleActionSheetFlag">取消</button>
    </div>
  </div>
</template>

<script>
  import * as auth from "../../utils/auth";
  import androidOrIos from "../../utils/android-ios";

  export default {
    name: "actionSheet",
    props: {
      limit: {
        type: Array,
        default: [],
      },
      actionSheetFlag: {
        type: Boolean,
        default: false
      }
    },
    components: {},
    data() {
      return {
        judgeBigScreen: auth.judgeBigScreen(),
        androidOrIos: androidOrIos(),

      }
    },
    methods: {
      changeHandleActionSheetFlag() {
        this.$emit('changeHandleActionSheetFlag')
      }
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
  @import "src/assets/css/public";

  .actionSheet {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);

    .bottomSheet {
      background-color: rgba(255, 255, 255, 0);
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0;
      text-align: center;
      .limit-btn{
        margin-top: 10px;
        outline: none;
        border: none;
        width: 718px;
        height: 112px;
        background: rgba(249, 249, 249, 0.85);
        border-radius: 28px;
        font-size: 40px;
        font-family: $font-family-Medium-serif;
        font-weight: 500;
        color: #007AFF;
        line-height: 112px;
      }

      .close-btn {
        margin-top: 16px;
        outline: none;
        border: none;
        width: 718px;
        height: 112px;
        background: #FFFFFF;
        border-radius: 28px;
        font-size: 40px;
        font-family: $font-family-regular-sans-serif;
        font-weight: 400;
        color: #007AFF;
        line-height: 112px;
      }
    }
  }

  .bottom68 {
    padding-bottom: 113px;
  }

  .bottom45 {
    padding-bottom: 45px;
  }
</style>

这是判断是否是全面屏的

//判断是不试全面屏手机
export default function judgeBigScreen() {
  //，这里根据返回值 true 或false ,返回true的话 则为全面屏
  let result = false;
  const rate = window.screen.height / window.screen.width;
  const limit = window.screen.height === window.screen.availHeight ? 1.8 : 1.65; // 临界判断值

  // window.screen.height为屏幕高度
  //  window.screen.availHeight 为浏览器 可用高度
  if (rate > limit) {
    result = true;
  }
  return result;
}

这是判断当前设备系统类型的

const u = navigator.userAgent;

//Android终端
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;

//iOS终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

function androidOrIos() {
  if (isAndroid) {
    //如果为Android
    return 'android'
  } else if (isiOS) {
    //如果为iOS
    return 'ios'
  }
}

export default androidOrIos

来不及做gif图看效果了，只能截个图让大家看一下啦~