弹出选择 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: function() {
        // 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(this.selectData)
          }, 500)
        })
      },
      selectChange: function (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: function() {
        // 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(this.selectionData)
          }, 500)
        })
      },
      selectionChange: function(obj) {
        this.selectionData = obj.selection
      }
    }
}
</script>

弹出选择自定义宽高

弹出选择自定义宽高

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

<title>弹出选择自定义宽高</title>
<describe>弹出自定义的选择界面进行数据的选择</describe>
<template>
    <hc-look-popup
      :popup-confirm="handleSelectPopupConfirm"
      :popup-size="popupSize"
      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:{},
         popupSize: { width: 600, height: 600}
      }
    },
    methods: {
      handleSelectPopupConfirm: function() {
        // 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(this.selectData)
          }, 500)
        })
      },
      selectChange: function(obj) {
        this.selectData = obj.select
      }
    }
}
</script>

属性及事件

LookPopup属性

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

LookPopup插槽

名称	说明
default	弹出内容

LookPopup事件

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

• 弹出选择
• 弹出选择（多选）
• 弹出选择自定义宽高
• 属性及事件
  • LookPopup属性
  • LookPopup插槽
  • LookPopup事件

登录