# 弹出选择 LookPopup

一种用于跨页面的数据选择组件,一般用于大量数据的选择。

# 弹出选择

弹出选择

弹出自定义的选择界面进行数据的选择

<title>弹出选择</title>
<describe>弹出自定义的选择界面进行数据的选择</describe>
<template>
    <hc-look-popup
      :popup-confirm="handleSelectPopupConfirm"
      popup-size="small"
      popup-title="用户选择"
      type="lookpopup"
      v-model="value"
      :text.sync="text"
      style="width: 300px;"
    >
      <div slot="popup">
         <hc-grid
          :data="data"
          id-field="id"
          @select-change="selectChange"
          ref="select"
        >
          <hc-grid-columns>
            <hc-grid-column label="text" field="text"></hc-grid-column>
            <hc-grid-column label="value" field="value"></hc-grid-column>
          </hc-grid-columns>
        </hc-grid>
      </div>
    </hc-look-popup>
</template>
<script>
export default {
    data: function() {
      return {
        value: '',
        text: '',
        data:[
          { text: '11', value: '1' },
          { text: '12', value: '2' },
          { text: '13', value: '3' },
          { text: '14', value: '4' }
        ],
        selectData:{}
      }
    },
    methods: {
      handleSelectPopupConfirm() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(this.selectData)
          }, 500)
        })
      },
      selectChange(obj) {
        this.selectData = obj.select
      }
    }
}
</script>

# 弹出选择(多选)

弹出选择(多选)

弹出自定义的选择界面进行数据的多选择

<title>弹出选择(多选)</title>
<describe>弹出自定义的选择界面进行数据的多选择</describe>
<template>
     <hc-look-popup
      :popup-confirm="handleSelectionPopupConfirm"
      popup-size="small"
      popup-title="用户选择"
      type="lookpopup"
      v-model="value"
      :text.sync="text"
      multiple
    >
      <div slot="popup">
         <hc-grid
          :data="data"
          id-field="id"
          @selection-change="selectionChange"
          ref="selection"
          multiple
        >
          <hc-grid-columns>
            <hc-grid-column label="text" field="text"></hc-grid-column>
            <hc-grid-column label="value" field="value"></hc-grid-column>
          </hc-grid-columns>
        </hc-grid>
      </div>
    </hc-look-popup>
</template>
<script>
export default {
    data: function() {
      return {
        value: '',
        text: '',
        data:[
          { text: '11', value: '1' },
          { text: '12', value: '2' },
          { text: '13', value: '3' },
          { text: '14', value: '4' }
        ],
        selectionData:[]
      }
    },
    methods: {
      handleSelectionPopupConfirm() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(this.selectionData)
          }, 500)
        })
      },
      selectionChange(obj) {
        this.selectionData = obj.selection
      }
    }
}
</script>

# 属性及事件

# LookPopup属性

属性 说明 类型 可选值 默认值
value 值, 多选时为逗号分隔文本,支持v-model使用 string -- --
placeholder 为空提示 string -- --
multiple 是否多选 boolean -- false
popup-title 弹出选择标题 string -- --
popup-size 弹出选择大小 string mini / small / normal / large / normal
popup-confirm 选择框确认回调事件,支持返回异步对象或者对象 function -- --
before-open 打开弹窗前回调事件,支持返回异步对象或者对象 function -- --
after-close 关闭弹窗后回调事件,支持返回异步对象或者对象 function -- --
viewable 是否查看状态 boolean -- false

# LookPopup插槽

名称 说明
default 弹出内容

# LookPopup事件

事件 说明 回调参数
change 用户选择值确认时触发 {value,text,data}