1 line
8.5 KiB
Plaintext
1 line
8.5 KiB
Plaintext
|
{"version":3,"file":"wd-search.js","sources":["../../../../../../../node_modules/wot-design-uni/components/wd-search/wd-search.vue","../../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL25vZGVfbW9kdWxlcy93b3QtZGVzaWduLXVuaS9jb21wb25lbnRzL3dkLXNlYXJjaC93ZC1zZWFyY2gudnVl"],"sourcesContent":["<template>\n <view :class=\"rootClass\" :style=\"customStyle\">\n <!--自定义label插槽-->\n <!--搜索框主体-->\n <view class=\"wd-search__block\">\n <slot name=\"prefix\"></slot>\n <view class=\"wd-search__field\">\n <view v-if=\"!placeholderLeft\" :style=\"coverStyle\" class=\"wd-search__cover\" @click=\"closeCover\">\n <wd-icon name=\"search\" size=\"18px\" custom-class=\"wd-search__search-icon\"></wd-icon>\n <text class=\"wd-search__placeholder-txt\">{{ placeholder || translate('search') }}</text>\n </view>\n <!--icon:search-->\n <wd-icon v-if=\"showInput || str || placeholderLeft\" name=\"search\" size=\"18px\" custom-class=\"wd-search__search-left-icon\"></wd-icon>\n <!--搜索框-->\n <input\n v-if=\"showInput || str || placeholderLeft\"\n :placeholder=\"placeholder || translate('search')\"\n placeholder-class=\"wd-search__placeholder-txt\"\n confirm-type=\"search\"\n v-model=\"str\"\n class=\"wd-search__input\"\n @focus=\"searchFocus\"\n @input=\"inputValue\"\n @blur=\"searchBlur\"\n @confirm=\"search\"\n :disabled=\"disabled\"\n :maxlength=\"maxlength\"\n :focus=\"isFocused\"\n />\n <!--icon:clear-->\n <wd-icon v-if=\"str\" custom-class=\"wd-search__clear wd-search__clear-icon\" name=\"error-fill\" size=\"16px\" @click=\"clearSearch\" />\n </view>\n </view>\n <!--the button behind input,care for hideCancel without displaying-->\n\n <slot v-if=\"!hideCancel\" name=\"suffix\">\n <!--默认button-->\n <view class=\"wd-search__cancel\" @click=\"handleCancel\">\n {{ cancelTxt || translate('cancel') }}\n </view>\n </slot>\n </view>\n</template>\n\n<script lang=\"ts\">\nexport default {\n name: 'wd-search',\n options: {\n virtualHost: true,\n addGlobalClass: true,\n styleIsolation: 'shared'\n }\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { type CSSProperties, computed, onMounted, ref, watch } from 'vue'\nimport { objToStyle, requestAnimationFrame } from '../common/util'\nimport { useTranslate } from '../composables/useTranslate'\nimport { searchProps } from './types'\n\nconst props = defineProps(searchProps)\nconst emit = defineEmits(['update:modelValue', 'change', 'clear', 'search', 'focus', 'blur', 'cancel'])\n\nconst { translate } = useTranslate('search')\n\nconst isFocused = ref<boolean>(false) // 是否聚焦中\nconst showInput = ref<boolean>(false) // 是否显示输入框 用于实现聚焦的hack\nconst str = ref('')\nconst showPlaceHolder = ref<boolean>(true)\nconst clearing = ref<boolean>(false)\n\nwatch(\n () => props.modelValue,\n (newValue) => {\n str.value = newValue\n if (newValue) {\n showInput.value = true\n }\n },\n { immediate: true }\n)\n\nwatch(\n () => props.focus,\n (newValue) => {\n if (newValue) {\n if (props.disabled) return\n closeCover()\n }\n }\n)\n\nonMounted(() => {\n if (props.focus) {\n closeCover()\n }\n})\n\nconst rootClass = computed(() => {\n return `wd-search ${props.light ? 'is-light' : ''} ${props.hideCancel ? 'is-without-cancel' : ''} ${props.customClass}`\n})\n\nconst coverStyle = computed(() => {\n const coverStyle: CSSProperties = {\n display: str.value === '' && showPlaceHolder.value ? 'flex' : 'none'\n }\n\n return objToStyle(coverStyle)\n})\n\nfunction hackFocus(focus: boolean) {\n showInput.value = focus\n requestAnimationFrame(() => {\n isFocused.value = focus\n })\n}\n\nfunction closeCover() {\n if (props.disabled) return\n requestAnimationFrame()\n .then(() => requestAnimationFrame())\n .then(() => requestAnimationFrame())\
|