UNPKG

@frontend_worker/search-selector

Version:

《远程搜索+单选》组件区别于element-ui或iview组件库的select远程搜索, ①将头部显示的值和下拉选项显示的值独立开来, ②避免远程加载时头部默认值显示异常, ③支持插槽自定义 ④将搜索框值放置于下拉弹框里面

71 lines (61 loc) 1.95 kB
import Vue from 'vue'; import Spin from './spin.vue'; import { transferIndex, transferIncrease } from '../../utils/transfer-queue'; function handleGetIndex() { transferIncrease(); return transferIndex; } let tIndex = handleGetIndex(); Spin.newInstance = properties => { const _props = properties || {}; const Instance = new Vue({ data: Object.assign({}, _props, { }), render (h) { let vnode = ''; if (this.render) { vnode = h(Spin, { props: { fix: true, fullscreen: true } }, [this.render(h)]); } else { vnode = h(Spin, { props: { size: 'large', fix: true, fullscreen: true } }); } return h('div', { 'class': 'zz-spin-fullscreen zz-spin-fullscreen-wrapper', 'style': { 'z-index': 2010 + tIndex } }, [vnode]); } }); const component = Instance.$mount(); document.body.appendChild(component.$el); const spin = Instance.$children[0]; return { show () { spin.visible = true; tIndex = handleGetIndex(); }, remove (cb) { spin.visible = false; setTimeout(function() { spin.$parent.$destroy(); if (document.getElementsByClassName('zz-spin-fullscreen')[0] !== undefined) { document.body.removeChild(document.getElementsByClassName('zz-spin-fullscreen')[0]); } cb(); }, 500); }, component: spin }; }; export default Spin;