feat: 可清除功能；完善多选功能

.gitignore

@@ -4,6 +4,7 @@ dist
 dist-ssr
 *.local
 package-lock.json
+pnpm-lock.yaml
 .history
 .vscode
 devui/vue-devui.ts

devui/select/src/select.scss

@@ -122,6 +122,17 @@ $select-item-min-height: 36px;
  }
 }
 
+.devui-select-clearable:hover {
+ .devui-select-clear {
+ display: inline-flex;
+ }
+
+ .devui-select-arrow {
+ display: none;
+ }
+}
+
+.devui-select-clear,
 .devui-select-arrow {
  position: absolute;
  right: 0;
@@ -130,6 +141,17 @@ $select-item-min-height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
+}
+
+.devui-select-clear {
+ display: none;
+
+ &:hover {
+ color: $devui-icon-fill-active;
+ }
+}
+
+.devui-select-arrow {
  transform: rotate3d(0, 0, 1, 0deg);
  transition: transform $transition-base-time ease-out;
 }

devui/select/src/select.tsx

@@ -23,6 +23,7 @@ export default defineComponent({
  useSelectOutsideClick([containerRef, dropdownRef], isOpen, toggleChange);
 
  const mergeOptions = computed(() => {
+ const { multiple, modelValue} = props
  return props.options.map((item) => {
  let option: OptionObjectItem;
  if (typeof item === 'object') {
@@ -39,14 +40,21 @@ export default defineComponent({
  _checked: false,
  };
  }
+ if (multiple) {
+ if (Array.isArray(modelValue)) {
+ option._checked = modelValue.includes(option.name)
+ } else {
+ option._checked = false
+ }
+ }
 
  return option;
  });
  });
 
  const getValuesOption = useCacheOptions(mergeOptions);
 
- const inputValue = computed(() => {
+ const inputValue = computed<string>(() => {
  if (props.multiple && Array.isArray(props.modelValue)) {
  const selectedOptions = getValuesOption(props.modelValue);
  return selectedOptions.map((item) => item.name).join(',');
@@ -56,6 +64,10 @@ export default defineComponent({
  return '';
  });
 
+ const mergeClearable = computed<boolean>(() => {
+ return !props.disabled && props.allowClear && inputValue.value.length > 0
+ })
+
  function valueChange(item: OptionObjectItem, index: number) {
  const { multiple, optionDisabledKey: disabledKey } = props;
  let { modelValue } = props;
@@ -81,15 +93,28 @@ export default defineComponent({
  });
  }
 
+ function handleClear (e: MouseEvent) {
+ e.preventDefault()
+ e.stopPropagation()
+ if (props.multiple) {
+ ctx.emit('update:modelValue', [])
+
+ } else {
+ ctx.emit('update:modelValue', '')
+ }
+ }
+
  return {
  isOpen,
  containerRef,
  dropdownRef,
  inputValue,
  mergeOptions,
+ mergeClearable,
  valueChange,
  toggleChange,
  getItemClassName,
+ handleClear,
  };
  },
  render() {
@@ -106,9 +131,11 @@ export default defineComponent({
  valueChange,
  toggleChange,
  getItemClassName,
+ mergeClearable,
+ handleClear,
  } = this;
 
- const selectClassName = className('devui-select', {
+ const selectCls = className('devui-select', {
  'devui-select-open': isOpen,
  'devui-dropdown-menu-multiple': multiple,
  'devui-select-lg': size === 'lg',
@@ -117,25 +144,32 @@ export default defineComponent({
  'devui-select-disabled': disabled,
  });
 
- const inputClassName = className('devui-select-input', {
+ const inputCls = className('devui-select-input', {
  'devui-select-input-lg': size === 'lg',
  'devui-select-input-sm': size === 'sm',
  });
 
+ const selectionCls = className('devui-select-selection', {
+ 'devui-select-clearable': mergeClearable
+ })
+
  return (
- <div class={selectClassName} ref="containerRef">
+ <div class={selectCls} ref="containerRef">
  <div
- class="devui-select-selection"
+ class={selectionCls}
  onClick={() => toggleChange(!isOpen)}
  >
  <input
  value={inputValue}
  type="text"
- class={inputClassName}
+ class={inputCls}
  placeholder={placeholder}
  readonly
  disabled={disabled}
  />
+ <span onClick={handleClear} class="devui-select-clear">
+ <Icon name="close" />
+ </span>
  <span class="devui-select-arrow">
  <Icon name="select-arrow" />
  </span>

devui/select/src/use-select.ts

@@ -48,6 +48,10 @@ export const selectProps = {
  type: Boolean,
  default: false
  },
+ allowClear: {
+ type: Boolean,
+ default: false
+ },
  optionDisabledKey: {
  type: String,
  default: ''

sites/components/select/allow-clear-select-demo.vue

@@ -0,0 +1,27 @@
+<template>
+ <d-select v-model="value1" :options="options1" :allow-clear="true" />
+ <br>
+ <d-select v-model="value2" :options="options2" :multiple="true" :allow-clear="true" />
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from 'vue'
+
+export default defineComponent({
+ setup () {
+ const value1 = ref('')
+ const options1 = reactive(['可以清除',2,3])
+ let value2 = ref(['多选','当然','也可以','清除'])
+ const options2 = reactive(['多选','当然','也可以','清除'])
+ console.log(value2);
+ 
+
+ return {
+ value1,
+ options1,
+ value2,
+ options2
+ }
+ },
+})
+</script>

sites/components/select/index.md

@@ -44,6 +44,12 @@
 <DisabledSelectDemo/>
 <br/>
 
+#### AllowClear
+
+<br/>
+<AllowClearSelectDemo/>
+<br/>
+
 ```html
 <d-select v-model="baseSelectValue" :options="baseSelectOptions" size="lg"></d-select>
 
@@ -58,11 +64,13 @@
 import { defineComponent, ref, reactive } from 'vue'
 import MutipleSelectDemo from './mutiple-select-demo.vue'
 import DisabledSelectDemo from './disabled-select-demo.vue'
+import AllowClearSelectDemo from './allow-clear-select-demo.vue'
 
 export default defineComponent({
  components: {
  MutipleSelectDemo,
- DisabledSelectDemo
+ DisabledSelectDemo,
+ AllowClearSelectDemo
  },
  setup() {
  const selectValue1 = ref('')