湖州市住房和城乡建设局网站,网站建设收费标准公司,全球最大的c2c平台,生鲜农产品网站建设文章目录组件介绍何时使用基本功能组件代码参数说明事件关于dxui组件库组件介绍
何时使用
弹出一个下拉菜单给用户选择操作#xff0c;用于代替原生的选择器#xff0c;或者需要一个更优雅的多选器时。 当选项少时#xff08;少于 5 项#xff09;#xff0c;建议直接将…
文章目录组件介绍何时使用基本功能组件代码参数说明事件关于dxui组件库组件介绍
何时使用
弹出一个下拉菜单给用户选择操作用于代替原生的选择器或者需要一个更优雅的多选器时。 当选项少时少于 5 项建议直接将选项平铺使用 Radio 是更好的选择。
基本功能
满足用户在多个选项中选择一个或者多个选项添加了搜索模式和tag模式也可以预设被选中的选项用户也可以直接按删除键删除掉最后一个选中的选项。
组件代码
templatedivclassdx-select-warpper:classselectDisabled ? dx-select-warpper-disabled : keydown.deletedeleteSlectedOptionsdiv clicktoggleSelectStatusdiv classdx-select-input!-- 当有选中的内容时 --div classdx-select-has-content v-showselectInputDataArray.length !showSearchInputdiv classdx-select-tag-warpper v-ifisTagTagcloseClickcloseTagClick(item)closablev-foritem in selectInputDataArray:keyitem.value{{ item.name }}/Tag/divspan v-else{{ selectInputValue }}/span!-- input typetext classdx-select-input-focus refinputFocus / --/divinputtypetextclassdx-select-input-focus:classshowSearchInput ? dx-select-input-search : refinputFocusv-modelselectSearchInputValueinputSearchInputValueChangeplaceholder请输入筛选条件/!-- 当没有选中的内容时 --span v-show!selectInputDataArray.length classdx-select-placeholder{{placeholder}}/span/divspan classdx-select-icon :classshowSearchInput ? dx-select-search-icon : /span/divdiv classdx-select-options-warpper v-showselectStatus focusdivclassdx-select-options-itemv-foritem in selectOptions.list:classselectInputDataArray.some((selectedItem) {return selectedItem.value item.value})? dx-options-item-active: :keyitem.name item.valueclicktoggleOptions(item, $event){{ item.name }}/div/div/div
/templatescript langts
import { ref, SetupContext, reactive, watch, onMounted, toRaw } from vue
import { Data, OptionItem } from ./types/index
// import { useRouter } from vue-router
import Tag from /components/tag/Tag.vueexport default {components: {Tag},props: {// 配置options的可选项options: {required: false,type: Array,default: function () {return []}},placeholder: {required: false,default: 请选择},// 单选或者多选 multiple | singletype: {required: false,default: single,type: String},// 是否支持搜索search: {required: false,default: false,type: Boolean},// 是否禁用disabled: {required: false,default: false,type: Boolean},// 是否启用标签模式mode: {required: false,default: normal,type: String}},setup(props: Data, context: SetupContext) {// const currentInstance: ComponentInternalInstance | null getCurrentInstance()// input字符串的值const selectInputValue ref()const inputFocus refany(null)// 当前的状态fcous或者blurconst selectStatus ref()// 可选的配置项optionsconst selectOptions reactive{ list: OptionItem[] }({list: props?.options})const showSearchInputKey ref(false)// 是否展示searchInput框const showSearchInput refboolean(props.search selectStatus.value focus showSearchInputKey.value)// 是否禁用const selectDisabled ref(props.disabled)// 是否是tag模式const isTag ref(props.mode tag)// 用户输入的select search字段const selectSearchInputValue ref()// 被选中的参数的保存值const selectInputDataArray reactiveOptionItem[](props?.options?.filter((item: OptionItem) {return item.selected true}) as OptionItem[])// 监测用户输入的search变化const SearchInputValueChange (e: any) {if (!showSearchInput.value) {selectSearchInputValue.value } else {const result props.options.filter((item: any) {return item.name.includes(e.target.value)})console.log(result)// selectOptions resultselectOptions.list result}}// const changeSelectStatus () {// selectStatus.value focus// }// 改变select的聚焦状态const toggleSelectStatus (e: Event) {if (props.disabled) {return}showSearchInputKey.value truee.stopPropagation()if (selectStatus.value focus) {selectStatus.value blur} else {selectStatus.value focus}}// 改变选项的选中状态const toggleOptions (item: OptionItem, e: Event) {if (props.disabled) {return}showSearchInputKey.value falsee.stopPropagation()inputFocus.value?.focus()if (props.type single) {selectStatus.value blurif (selectInputDataArray[0] selectInputDataArray[0].value item.value) {selectInputDataArray.shift()} else {selectInputDataArray[0] item}} else {const selectedIndex selectInputDataArray.findIndex((selectItem) {return selectItem.value item.value})if (selectedIndex -1) {selectInputDataArray.splice(selectedIndex, 1)} else {selectInputDataArray.push(item)}}context.emit(changeSelect, toRaw(selectInputDataArray))}// 删除被选中的optionconst deleteSlectedOptions () {inputFocus.value?.focus()if (showSearchInput.value) {return}if (selectStatus.value focus selectInputDataArray.length 0) {selectInputDataArray.pop()context.emit(changeSelect, toRaw(selectInputDataArray))}}// 点击tag的删除关闭选中项const closeTagClick (item: OptionItem) {inputFocus.value?.focus()const findIndex selectInputDataArray.findIndex((selectItem) {return selectItem.value item.value})selectInputDataArray.splice(findIndex, 1)context.emit(changeSelect, toRaw(selectInputDataArray))}watch(showSearchInputKey,(val) {showSearchInput.value props.search selectStatus.value focus val},{ immediate: true, deep: true })watch(selectInputDataArray,(a) {selectInputValue.value a.map((item) {return item?.name}).join(,)},{ immediate: true, deep: true })onMounted(() {watch(selectStatus, (val) {if (val focus) {inputFocus.value?.focus()} else {inputFocus.value?.blur()}showSearchInput.value props.search val focus showSearchInputKey})})document.body.addEventListener(click, () {selectStatus.value blur})return {selectInputValue,selectSearchInputValue,inputFocus,isTag,showSearchInput,// changeSelectStatus,toggleSelectStatus,selectOptions,toggleOptions,selectStatus,selectInputDataArray,selectDisabled,deleteSlectedOptions,closeTagClick,SearchInputValueChange}}
}
/scriptstyle langscss scoped
import /scss/layout.scss;
.dx-select-warpper {// display: inline-block;border: $border;padding: 0 12px;height: 32px;border-radius: 4px;cursor: pointer;position: relative;// min-width: 120px;:hover {border: 1px solid $blue-middle-color;}.dx-select-placeholder {display: inline-block;height: 100%;vertical-align: top;cursor: pointer;line-height: 30px;font-size: 14px;padding-right: 6px;width: calc(100% - 12px);}.dx-select-input {display: inline-block;height: 100%;vertical-align: top;cursor: pointer;line-height: 30px;font-size: 14px;margin-right: 6px;width: calc(100% - 24px);}.dx-select-has-content {display: inline-block;}.dx-select-tag-warpper {display: inline-block;line-height: initial;}.dx-select-input-focus {outline: none;border: none;width: 1px;font-size: 14px;line-height: 30px;overflow: hidden;}.dx-select-input-search {width: 100% !important;}.dx-select-placeholder {color: $grey-color;}.dx-select-icon {display: inline-block;height: 100%;line-height: 30px;font-size: 22px;color: $grey-color;::before {content: \2228;}}.dx-select-search-icon {display: inline-block;height: 100%;line-height: 30px;font-size: 12px;::before {content: \1F50D !important;}}// 改变滚动条的盒子::-webkit-scrollbar {width: 6px;background-color: #fff;}// 改变滚动条轨道::-webkit-scrollbar-track {// border-radius: 10px;display: none;}// 改变滚动条的内容::-webkit-scrollbar-thumb {border-radius: 6px;background-color: $grey-color;}/*定义最上方和最下方的按钮*/::-webkit-scrollbar-button {display: none;}.dx-select-options-warpper {width: 100%;position: absolute;left: 0;top: calc(100% 4px);padding: 4px 0;background: $white-color;box-shadow: 2px 2px 20px rgb(0 0 0 / 29%);border-radius: 4px;z-index: 1000;max-height: 120px;overflow-y: auto;.dx-select-options-item {line-height: 28px;padding: 0 12px;:hover {background: $background-color;}overflow: hidden;}.dx-select-options-item.dx-options-item-active {background: $blue-light-color;}}
}.dx-select-warpper-disabled {cursor: not-allowed !important;background: $border-color !important;:hover {border: $border;}.dx-select-input-focus {background: transparent !important;cursor: not-allowed !important;}.dx-select-input,.dx-select-placeholder {background: transparent !important;cursor: not-allowed !important;}
}::v-deep .dx-tag-warpper {margin: 0 8px 0 0;
}
/style
参数说明
参数名称说明options配置options的可选项placeholderselect的placeholdertype单选或者多选 multiple or singlesearch是否支持搜索 booleandisabled是否禁用整个selectmode是否启用标签模式 normal or tag
事件
事件名称说明changeSelect监听select组件被选中改变的回调会返回当前被选中的options
关于dxui组件库
如果你有任何疑问欢迎发送你的问题至我的邮箱757363985qq.com. 你也可以前往dxui的线上网站体验一下实际使用的效果. http://www.dxyx-together.cn/#/home/select 后面等时机成熟的时候我会将源码github库与大家一同分享.
