平台兼容性

YYT-popup 弹层组件

参数说明

:open Boolean 控制显示
:position String 位置 top bottom left right center ad
:background String 背景颜色 #fff
:percent Number 宽高百分比 center top bottom ad 对应高度 left right对应宽度 0为自适应
@close 关闭/回调

例子

<template>
  <view class="content">
    <view class="title">点击演示</view>
    <view class="select">
      <button @click="open('top')">顶部弹出</button>
      <button @click="open('bottom')">底部弹出</button>
      <button @click="open('left')">左边弹出</button>
      <button @click="open('right')">右边弹出</button>
      <button @click="open('center')">中间弹出</button>
      <button @click="open('ad')">中间弹出(AD)</button>
      <button @click="openAdPopup = true">中间弹出(广告图片)</button>
    </view>
    <popup :open="openPopup" :position="position" :percent="percent" :background="background" @close="openPopup = false">
      <view style="padding:10px;">
        <button @touchstart="changeBgColor" @touchend="touchend">改变背景颜色(长按)</button>
        <button @touchstart="changeSize" @touchend="touchend" style="margin-top:10px">改变窗体大小(长按)</button>
        <button @click="showText = true" style="margin-top:10px">显示文本</button>
        <button type="primary" @click="reset()" style="margin-top:10px">复原</button>
        <view v-show="showText" style="margin-top:10px">
          为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
          页面文件遵循 Vue 单文件组件 (SFC) 规范
          组件标签靠近小程序规范，详见uni-app 组件规范
          接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
          数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
          为兼容多端运行，建议使用flex布局进行开发
        </view>
      </view>
    </popup>

    <popup :open="openAdPopup" background="none" position="ad" @close="openAdPopup = false">
      <view style="text-align: center;">
        <image src="/static/logo.png" style="width: 500upx;height: 500upx;"></image>
      </view>
    </popup>

  </view>
</template>

<script>
  import popup from '../../components/YYT-popup/YYT-popup.vue';

  export default {
    components: {
      popup
    },

    data() {
      return {
        openPopup: false,
        position: '',
        background: '#fff',
        openAdPopup: false,
        percent: 0,
        showText: false,
        change: false,
        loopTimer: false,
        sizeSort: 'asc'
      }
    },

    methods: {
      open: function(position) {
        this.position = position;
        this.openPopup = true;
      },
      touchend: function() {
        clearInterval(this.loopTimer)
      },
      changeBgColor: function(e) {
        clearInterval(this.loopTimer);
        this.loopTimer = setInterval(() => {
          let r = Math.floor(Math.random() * 256);
          let g = Math.floor(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          let color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
          this.background = color
        }, 300)
      },
      changeSize: function() {
        clearInterval(this.loopTimer);
        this.loopTimer = setInterval(() => {
          let percents = [40, 45, 50, 55, 60, 65, 70, 75, 80];

          if (this.percent <= 40) this.sizeSort = 'asc';
          if (this.percent >= 80) this.sizeSort = 'desc';
          if (this.sizeSort == 'desc') percents = percents.reverse();

          for (let i = 0; i <= percents.length; i++) {
            if (this.sizeSort == 'desc') {
              if (this.percent > percents[i]) {
                this.percent = percents[i];
                break;
              }
            } else {
              if (this.percent < percents[i]) {
                this.percent = percents[i];
                break;
              }
            }
          }
        }, 200)
      },
      reset: function() {
        this.percent = 0;
        this.background = '#fff';
        this.showText = false;
      }
    }
  }
</script>

<style>
  .select button {
    margin-top: 40upx;
  }

  .title {
    font-size: 36upx;
    color: #8f8f94;
    text-align: center;
    margin: 20px 0 20px 0;
  }

  .content {
    padding: 0 40upx 0 40upx;
  }
</style>