cyber-web-ui
Version:
spring-cyber前端ui框架
157 lines • 6.73 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import Icon from '../icon';
import { Input as AInput, Popover as APopover, FormItemRest as AFormItemRest } from 'ant-design-vue';
import { defineComponent, reactive, watchEffect, ref, unref, nextTick } from 'vue';
import iconJson from '../style/iconfont/iconfont.json';
export default defineComponent({
name: 'CIconSelect',
props: {
value: String,
icons: Object,
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请点击选择图标'
}
},
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
slots = _ref.slots,
emit = _ref.emit,
expose = _ref.expose;
var inputRef = ref();
var iconState = reactive({
value: undefined,
visible: false,
searchValue: undefined,
iconList: [],
timeout: undefined
});
function iconClickHandler(icon) {
iconState.value = icon;
iconState.visible = false;
}
function disposeJson(list, value) {
iconState.timeout && clearTimeout(iconState.timeout);
iconState.timeout = setTimeout(function () {
iconState.iconList = [];
list.forEach(function (item) {
var prefix = item.css_prefix_text;
item.glyphs.forEach(function (citem) {
var icon = "".concat(prefix).concat(citem.font_class);
if (!value || icon.includes(value)) {
iconState.iconList.push(icon);
}
});
});
});
}
function onFocus(e) {
nextTick(function () {
var _e$target$blur, _e$target;
(_e$target$blur = (_e$target = e.target).blur) === null || _e$target$blur === void 0 || _e$target$blur.call(_e$target);
setTimeout(function () {
var _unref, _unref$focus;
(_unref = unref(inputRef)) === null || _unref === void 0 || (_unref$focus = _unref.focus) === null || _unref$focus === void 0 || _unref$focus.call(_unref);
}, 200);
});
}
watchEffect(function () {
return iconState.value = props.value;
});
watchEffect(function () {
return emit('update:value', iconState.value);
});
watchEffect(function () {
var list = [iconJson, props.icons].filter(function (item) {
return item;
});
disposeJson(list, iconState.searchValue);
});
return function () {
function defaultSlot() {
var inputSlots = {
prefix: function prefix() {
return iconState.value ? _createVNode(Icon, {
"icon": iconState.value,
"isSvg": true,
"size": "16"
}, null) : undefined;
}
};
return _createVNode(AInput, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, attrs), {}, {
'onUpdate:value': undefined
})), {}, {
"disabled": props.disabled,
"placeholder": props.placeholder,
"value": iconState.value,
"onUpdate:value": function onUpdateValue($event) {
return iconState.value = $event;
},
"onFocus": onFocus
}), inputSlots);
}
function contentSlot() {
var inputSlots = {
suffix: function suffix() {
return _createVNode(Icon, {
"icon": "cyber-sousuo",
"size": "16",
"color": "#BDBDBD"
}, null);
}
};
return _createVNode("div", {
"style": "width: 500px"
}, [_createVNode(AFormItemRest, null, {
default: function _default() {
return [_createVNode(AInput, {
"ref": inputRef,
"value": iconState.searchValue,
"onUpdate:value": function onUpdateValue($event) {
return iconState.searchValue = $event;
},
"allowClear": true,
"placeholder": "\u8BF7\u8F93\u5165\u56FE\u6807\u540D\u79F0"
}, inputSlots)];
}
}), _createVNode("div", {
"class": "icon-select-body"
}, [_createVNode("div", {
"class": "icon-select-container"
}, [iconState.iconList.map(function (item) {
return _createVNode("div", {
"class": "icon-select-item",
"onClick": function onClick() {
return iconClickHandler(item);
}
}, [_createVNode(Icon, {
"size": "16",
"icon": item,
"isSvg": true
}, null), _createVNode("span", null, [item])]);
})])])]);
}
return props.disabled ? defaultSlot() : _createVNode(APopover, {
"visible": iconState.visible,
"onUpdate:visible": function onUpdateVisible($event) {
return iconState.visible = $event;
},
"trigger": "click",
"placement": "bottomLeft"
}, {
default: defaultSlot,
content: contentSlot
});
};
}
});