cyber-web-ui
Version:
spring-cyber前端ui框架
163 lines (162 loc) • 7.08 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); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _icon = _interopRequireDefault(require("../icon"));
var _antDesignVue = require("ant-design-vue");
var _iconfont = _interopRequireDefault(require("../style/iconfont/iconfont.json"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
var _default2 = exports.default = (0, _vue.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 = (0, _vue.ref)();
var iconState = (0, _vue.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) {
(0, _vue.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 = (0, _vue.unref)(inputRef)) === null || _unref === void 0 || (_unref$focus = _unref.focus) === null || _unref$focus === void 0 || _unref$focus.call(_unref);
}, 200);
});
}
(0, _vue.watchEffect)(function () {
return iconState.value = props.value;
});
(0, _vue.watchEffect)(function () {
return emit('update:value', iconState.value);
});
(0, _vue.watchEffect)(function () {
var list = [_iconfont.default, props.icons].filter(function (item) {
return item;
});
disposeJson(list, iconState.searchValue);
});
return function () {
function defaultSlot() {
var inputSlots = {
prefix: function prefix() {
return iconState.value ? (0, _vue.createVNode)(_icon.default, {
"icon": iconState.value,
"isSvg": true,
"size": "16"
}, null) : undefined;
}
};
return (0, _vue.createVNode)(_antDesignVue.Input, _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 (0, _vue.createVNode)(_icon.default, {
"icon": "cyber-sousuo",
"size": "16",
"color": "#BDBDBD"
}, null);
}
};
return (0, _vue.createVNode)("div", {
"style": "width: 500px"
}, [(0, _vue.createVNode)(_antDesignVue.FormItemRest, null, {
default: function _default() {
return [(0, _vue.createVNode)(_antDesignVue.Input, {
"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)];
}
}), (0, _vue.createVNode)("div", {
"class": "icon-select-body"
}, [(0, _vue.createVNode)("div", {
"class": "icon-select-container"
}, [iconState.iconList.map(function (item) {
return (0, _vue.createVNode)("div", {
"class": "icon-select-item",
"onClick": function onClick() {
return iconClickHandler(item);
}
}, [(0, _vue.createVNode)(_icon.default, {
"size": "16",
"icon": item,
"isSvg": true
}, null), (0, _vue.createVNode)("span", null, [item])]);
})])])]);
}
return props.disabled ? defaultSlot() : (0, _vue.createVNode)(_antDesignVue.Popover, {
"visible": iconState.visible,
"onUpdate:visible": function onUpdateVisible($event) {
return iconState.visible = $event;
},
"trigger": "click",
"placement": "bottomLeft"
}, {
default: defaultSlot,
content: contentSlot
});
};
}
});