Popup

弹出面板，可自定义内容，通常作为基础组件被其他组件依赖。

示例
footer含两个操作按钮
  1. <nut-popup 
  2. :popupVisible.sync="visible1" 
  3. :configItems="popup[0]" 
  4. @cancel-btn-click="cancelBtnFn" 
  5. @ok-btn-click="okBtnFn" 
  6. @close-popup="closeMask">
  7. </nut-popup>

footer仅有一个按钮
  1. <nut-popup 
  2. :popupVisible.sync="visible2" 
  3. :configItems="popup[1]" 
  4. @onlyone-btn-click="onlyOneBtnFn">
  5. </nut-popup>

header含有两个操作按钮
  1. <nut-popup 
  2. :popupVisible.sync="visible3" 
  3. :configItems="popup[2]" 
  4. @cancel-click="cancelFn" 
  5. @ok-click="okFn">
  6. </nut-popup>

仅含有关闭按钮
  1. <nut-popup 
  2. :popupVisible.sync="visible4" 
  3. :configItems="popup[3]">
  4. </nut-popup>

默认示例
  1. <nut-popup 
  2. :popupVisible.sync="visible5" 
  3. :configItems="{}">
  4. </nut-popup>

  2. export default {
  3.     data(){
  4.         return{
  5.           visible1: false,
  6.           visible2: false,
  7.           visible3: false,
  8.           visible4: false,
  9.           visible5: false,
  10.           popup: [
  11.             {
  12.               randomId: '0',
  13.               hasCloseBtn: true,
  14.               btnAmount: 2,
  15.               popupHeight: {
  16.                 height: '100px'
  17.               },
  18.               cancelAutoClose: false
  19.             },
  20.             {
  21.               hasCloseBtn: true,
  22.               btnAmount: 1
  23.             },
  24.             {
  25.               hasCloseBtn: false,
  26.               popupFooterVisible: false
  27.             },
  28.             {
  29.               hasCloseBtn: true,
  30.               popupFooterVisible: false
  31.             }
  32.           ]
  33.         }
  34.     },
  35.     methods:{
  36.       popupDemo1() {
  37.         this.visible1 = true;
  38.       },
  39.       popupDemo2() {
  40.         this.visible2 = true;
  41.       },
  42.       popupDemo3() {
  43.         this.visible3 = true;
  44.       },
  45.       popupDemo4() {
  46.         this.visible4 = true;
  47.       },
  48.       popupDemo5() {
  49.         this.visible5 = true;
  50.       },
  51.       cancelBtnFn(e) {
  52.         console.log(e.target);
  53.       },
  54.       okBtnFn(e) {
  55.         console.log(e.target);
  56.       },
  57.       onlyOneBtnFn(e) {
  58.         console.log('onlyOneBtnFn')
  59.       },
  60.       cancelFn(e) { 
  61.         console.log('cancelFn');
  62.       },
  63.       okFn(e) {
  64.         console.log('okFn');
  65.       },
  66.       closeMask(e) {
  67.         console.log('closePopup');
  68.         this.visible1 = false;
  69.       }
  70.     }
  71. }
  72.

Props
参数说明类型默认值可选值
popupVisible.sync显示状态Booleanfalsefalse/true
configItems配置项Object{}—
configItems.randomId设置popup组件的顶层idString''—
configItems.autoClose是否自动关闭蒙层（如果是，需要将popupVisible增加.sync修饰符）Booleantruetrue/false
configItems.popupHeaderVisible是否显示头部Booleantruetrue/false
configItems.hasCloseBtn是否有关闭按钮Booleantruetrue/false
configItems.cancelText头部取消按钮文案String取消—
configItems.cancelClose点击头部取消是否关闭面板Booleantruetrue/false
configItems.okText头部确定按钮文案String确定—
configItems.popupFooterVisible是否显示底部Booleantruetrue/false
configItems.btnAmount底部展示按钮的数量Number22/1
configItems.onlyOneBtnText仅一个按钮文案String去购买—
configItems.cancelBtnText底部取消按钮文案String取消—
configItems.cancelAutoClose点击底部取消按钮是否关闭面板Booleantruetrue/false
configItems.okBtnText底部确定按钮文案String确定—
Events
事件名说明回调参数
cancel-click点击顶部取消按钮时触发返回Event对象
ok-click点击顶部确定按钮时触发返回Event对象
onlyone-btn-click点击底部仅有一个按钮时触发返回Event对象
cancel-btn-click点击底部取消按钮时触发返回Event对象
ok-btn-click点击底部取消按钮时触发返回Event对象