@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
162 lines (159 loc) • 6.25 kB
JavaScript
import { defineComponent, computed, useAttrs, ref, resolveComponent, createElementBlock, openBlock, createVNode, mergeProps, isRef, unref, createSlots, withCtx, createBlock, createCommentVNode, createElementVNode, Fragment, renderList, normalizeClass, resolveDynamicComponent, toDisplayString } from 'vue';
import * as Icons from '@element-plus/icons-vue';
const _hoisted_1 = { class: "t_select_icon" };
const _hoisted_2 = { class: "icon-list" };
const _hoisted_3 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "TSelectIcon"
},
__name: "index",
props: {
modelValue: { default: "" },
prefixIcon: { default: "Search" },
selectBind: { default: () => ({}) },
isShowSearch: { type: Boolean, default: true },
isShowIcon: { type: Boolean, default: true }
},
emits: ["update:modelValue", "select"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
let valueIcon = computed({
get() {
return props.modelValue;
},
set(val) {
emit("update:modelValue", val);
}
});
const $attrs = useAttrs();
const attrs = computed(() => {
const selectBind = {
"prefix-icon": customIcons[props.prefixIcon],
placeholder: "\u8BF7\u9009\u62E9\u56FE\u6807",
dialogTitle: "\u8BF7\u9009\u62E9\u56FE\u6807",
searchPlaceholder: "\u641C\u7D22\u56FE\u6807",
emptyDescription: "\u672A\u641C\u7D22\u5230\u60A8\u8981\u627E\u7684\u56FE\u6807",
clearable: true,
width: "50%",
...props.selectBind
};
return { ...$attrs, ...selectBind };
});
const dialogVisible = ref(false);
const selectIcon = (item) => {
dialogVisible.value = false;
valueIcon.value = item.name;
emit("update:modelValue", item.name);
emit("select", item.name);
};
const inputRef = ref();
const clearIcon = () => {
valueIcon.value = "";
emit("update:modelValue", "");
setTimeout(() => inputRef.value.blur(), 0);
};
const inputValue = ref("");
const customIcons = Icons;
const iconsList = computed(() => {
if (!inputValue.value) return Icons;
let result = {};
for (const key in customIcons) {
if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1)
result[key] = customIcons[key];
}
return result;
});
__expose({ clearIcon });
return (_ctx, _cache) => {
const _component_el_button = resolveComponent("el-button");
const _component_el_input = resolveComponent("el-input");
const _component_el_scrollbar = resolveComponent("el-scrollbar");
const _component_el_empty = resolveComponent("el-empty");
const _component_el_dialog = resolveComponent("el-dialog");
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_el_input, mergeProps({
ref_key: "inputRef",
ref: inputRef,
modelValue: unref(valueIcon),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(valueIcon) ? valueIcon.value = $event : valueIcon = $event)
}, attrs.value, {
onClear: clearIcon,
onClick: _cache[1] || (_cache[1] = () => {
;
dialogVisible.value = true, inputValue.value = "";
})
}), createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.isShowIcon ? {
name: "append",
fn: withCtx(() => [
createVNode(_component_el_button, {
icon: unref(customIcons)[_ctx.modelValue]
}, null, 8, ["icon"])
]),
key: "0"
} : void 0
]), 1040, ["modelValue"]),
createVNode(_component_el_dialog, {
modelValue: dialogVisible.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => dialogVisible.value = $event),
title: attrs.value.dialogTitle,
draggable: "",
width: attrs.value.width,
class: "t_select_icon_dialog"
}, {
default: withCtx(() => [
_ctx.isShowSearch ? (openBlock(), createBlock(_component_el_input, {
key: 0,
modelValue: inputValue.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => inputValue.value = $event),
placeholder: attrs.value.searchPlaceholder,
clearable: "",
"prefix-icon": Icons.Search
}, null, 8, ["modelValue", "placeholder", "prefix-icon"])) : createCommentVNode("v-if", true),
Object.keys(iconsList.value).length ? (openBlock(), createBlock(_component_el_scrollbar, { key: 1 }, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(iconsList.value, (item) => {
return openBlock(), createElementBlock("div", {
key: item,
class: normalizeClass(["icon-item", { "icon-active": item.name == unref(valueIcon) }]),
onClick: ($event) => selectIcon(item)
}, [
(openBlock(), createBlock(resolveDynamicComponent(item))),
createElementVNode(
"span",
null,
toDisplayString(item.name),
1
/* TEXT */
)
], 10, _hoisted_3);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 1
/* STABLE */
})) : (openBlock(), createBlock(_component_el_empty, {
key: 2,
description: attrs.value.emptyDescription
}, null, 8, ["description"]))
]),
_: 1
/* STABLE */
}, 8, ["modelValue", "title", "width"])
]);
};
}
});
export { _sfc_main as default };