系统弹窗

系统弹窗

系统模态弹窗，在浮层中间显示，引导用户进行相关操作。

使用规则

居中弹窗默认基于iOS系统弹窗规范设计执行，宽度原则上按规范保持270pt，高度可自适应。

#示例：

<template>
  <scroller class="wrapper">
    <dof-minibar title="拖拽组件" @dofMinibarLeftButtonClicked="back"></dof-minibar>
    <midea-drag-list-view ref="dragListView" class="drag" :data="data"> </midea-drag-list-view>
    <text class="btn" @click="getDataList">获取数据</text>
  </scroller>
</template>

<script>
var modal = weex.requireModule('modal')
export default {
  data() {
    return {
      data: {
        itemViewHeight: 100, // 行高
        itemViewMarginTop: 10, //行间距
        imageMarginTop: 10, //图片距离顶部的的距离
        textMarginTop: 10, // 文字与图片的距离
        textColor: 'blue', //文字颜色
        textSize: 16, //文字大小
        imageSize: 60, //图片大小
        spanCount: 4, //列数
        isEditable: false, //控制整个列表是否可编辑，默认是false, 为true时才显示编辑按钮
        editIcon: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg', //编辑按钮图标地址
        listData: [
          {
            id: '1', //item的标识
            imageSrc: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg', //图标url
            label: 'test1', //文本描述
            isEditable: true //控制是否显示该编辑按钮，默认为false, 为true则显示
          },
          {
            id: '2',
            imageSrc: 'https://alifei03.cfp.cn/creative/icon/512/VCG25i3639132.jpg',
            label: 'test2'
          },
          {
            id: '3',
            imageSrc: 'https://alifei04.cfp.cn/creative/icon/512/VCG25i3639133.jpg',
            label: 'test3',
            isEditable: true //控制是否显示该编辑按钮，默认为false, 为true则显示
          },
          {
            id: '4',
            imageSrc: 'https://alifei05.cfp.cn/creative/icon/512/VCG25i3639134.jpg',
            label: 'test4',
            isEditable: true //
          },
          {
            id: '5',
            imageSrc: 'https://tenfei01.cfp.cn/creative/icon/512/VCG25i3639135.jpg',
            label: 'test5',
            isEditable: true
          }
        ]
      }
    }
  },

  methods: {
    getDataList(event) {
      let that = this
      this.$refs.dragListView.getListData(function(data) {
        that.data = {
          listData: [
            {
              id: '1',
              imageSrc: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg',
              label: 'test1qerqerqwerqwrwerqwerqwrwrqwrwrqwerwr'
            },
            {
              id: '2',
              imageSrc: 'https://alifei03.cfp.cn/creative/icon/512/VCG25i3639132.jpg',
              label: 'test2'
            },
            {
              id: '3',
              imageSrc: 'https://alifei04.cfp.cn/creative/icon/512/VCG25i3639133.jpg',
              label: 'test3'
            },
            {
              id: '4',
              imageSrc: 'https://alifei05.cfp.cn/creative/icon/512/VCG25i3639134.jpg',
              label: 'test4'
            },
            {
              id: '5',
              imageSrc: 'https://tenfei01.cfp.cn/creative/icon/512/VCG25i3639135.jpg',
              label: 'test5'
            },
            {
              id: '6',
              isEditable: true,
              imageSrc: 'https://tenfei02.cfp.cn/creative/icon/512/VCG25i3639136.jpg',
              label: 'test6'
            },
            {
              id: '7',
              isEditable: true,
              imageSrc: 'https://tenfei03.cfp.cn/creative/icon/512/VCG25i3639137.jpg',
              label: 'test7'
            },
            {
              id: '8',
              imageSrc: 'https://tenfei04.cfp.cn/creative/icon/512/VCG25i3639138.jpg',
              label: 'test8'
            },
            {
              id: '9',
              isEditable: true,
              imageSrc: 'https://tenfei05.cfp.cn/creative/icon/512/VCG25i3639139.jpg',
              label: 'test9'
            },
            {
              id: '10',
              imageSrc: 'https://alifei01.cfp.cn/creative/icon/512/VCG25i3639140.jpg',
              label: 'test10'
            },
            {
              id: '11',
              isEditable: true,
              imageSrc: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639141.jpg',
              label: 'test11'
            },
            {
              id: '1',
              imageSrc: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg',
              label: 'test1qerqerqwerqwrwerqwerqwrwrqwrwrqwerwr'
            },
            {
              id: '2',
              imageSrc: 'https://alifei03.cfp.cn/creative/icon/512/VCG25i3639132.jpg',
              label: 'test2'
            },
            {
              id: '3',
              imageSrc: 'https://alifei04.cfp.cn/creative/icon/512/VCG25i3639133.jpg',
              label: 'test3'
            },
            {
              id: '4',
              imageSrc: 'https://alifei05.cfp.cn/creative/icon/512/VCG25i3639134.jpg',
              label: 'test4'
            },
            {
              id: '5',
              imageSrc: 'https://tenfei01.cfp.cn/creative/icon/512/VCG25i3639135.jpg',
              label: 'test5'
            },
            {
              id: '6',
              isEditable: true,
              imageSrc: 'https://tenfei02.cfp.cn/creative/icon/512/VCG25i3639136.jpg',
              label: 'test6'
            },
            {
              id: '7',
              isEditable: true,
              imageSrc: 'https://tenfei03.cfp.cn/creative/icon/512/VCG25i3639137.jpg',
              label: 'test7'
            },
            {
              id: '8',
              imageSrc: 'https://tenfei04.cfp.cn/creative/icon/512/VCG25i3639138.jpg',
              label: 'test8'
            },
            {
              id: '9',
              isEditable: true,
              imageSrc: 'https://tenfei05.cfp.cn/creative/icon/512/VCG25i3639139.jpg',
              label: 'test9'
            },
            {
              id: '10',
              imageSrc: 'https://alifei01.cfp.cn/creative/icon/512/VCG25i3639140.jpg',
              label: 'test10'
            },
            {
              id: '11',
              isEditable: true,
              imageSrc: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639141.jpg',
              label: 'test11'
            }
          ],
          itemViewHeight: 100, // 行高
          itemViewMarginTop: 10, //行间距
          imageMarginTop: 10, //图片距离顶部的的距离
          textMarginTop: 10, // 文字与图片的距离
          textColor: 'blue', //文字颜色
          textSize: 16, //文字大小
          imageSize: 40, //图片大小
          spanCount: 4, //列数
          isEditable: true, //控制整个列表是否可编辑，默认是false, 为true时才显示编辑按钮
          editIcon: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg'
        }

        modal.alert({
          message: data,
          okTitle: '确认'
        })
      })
    },
    slideChange(event) {}
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
}
.drag {
  background-color: lightblue;
  width: 730px;
  height: 480px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 200px;
}
.btn {
  width: 200px;
  height: 80px;
  top: 100px;
  margin-left: 100px;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  margin-left: 150px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-width: 2px;
  border-style: solid;
  color: #666666;
  border-color: #dddddd;
  background-color: #f5f5f5;
}

.btn2 {
  width: 200px;
  height: 80px;
  top: 400px;
  margin-left: 100px;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  margin-left: 150px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-width: 2px;
  border-style: solid;
  color: #666666;
  border-color: #dddddd;
  background-color: #f5f5f5;
}
</style>

#属性（data）

Prop	Type	Required	Default	Description
itemViewHeight	Number	N	-1	行高
itemViewMarginTop	Number	N	10	行间距
imageMarginTop	Number	N	10	图片距离顶部的的距离
textMarginTop	Number	N	12	文字与图片的距离
textColor	String	N	#000000	文字颜色
textSize	Number	N	12	文字大小
imageSize	Number	N	60	图片大小
spanCount	Number	N	4	列数
isEditAble	Boolean	N	false	控制整个列表是否可编辑,为true时才显示编辑按钮
editIcon	String	N	''	编辑按钮图标地址
listData	Array	N	[]	列表项（见注1）

系统弹窗

扫码预览