Popup 弹出层

介绍
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示

基本功能

<nut-cell isLink title="展示弹出层" :showIcon="true" @click.native="show= true">
</nut-cell>
<nut-popup :style="{ padding: '30px 50px' }" v-model="show">正文</nut-popup>

export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    }
  }
};

弹出位置

通过 position 属性设置弹出位置，默认居中弹出(center)，可以设置为 top、bottom、left、right、center、none
注意：在某些情况下使用center可能会出现定位偏移问题，例如在组件样式中设置top、left等定位等，这时可以可以设置为none。由组件调用者设置样式;

<nut-popup v-model="show" position="top" :style="{ height: '20%' }" />

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置

<nut-popup position="bottom" closeable  close-icon="tick" v-model="showCloseIcon" :style="{ height: '20%' }" close-icon-position="top-left"></nut-popup>

圆角弹窗

设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式

<nut-popup v-model="show" round position="bottom" :style="{ height: '20%' }" />

指定挂载位置

弹出层默认挂载到组件所在位置，可以通过get-container属性指定挂载位置

<!-- 挂载到 body 节点下 -->
<nut-popup v-model="show" get-container="body" />
<!-- 挂载到 #app 节点下 -->
<nut-popup v-model="show" get-container="#app" />

API

Event