feat: disabled功能更新

devui/select/src/select.scss

@@ -41,6 +41,25 @@ $select-item-min-height: 36px;
  }
 }
 
+.devui-select-disabled {
+ cursor: not-allowed;
+ background-color: $devui-disabled-bg;
+ border-color: $devui-disabled-line;
+ color: $devui-disabled-text;
+
+ .devui-select-input {
+ cursor: not-allowed;
+ background-color: $devui-disabled-bg;
+ border-color: $devui-disabled-line;
+ color: $devui-disabled-text;
+ }
+
+ .devui-select-arrow {
+ cursor: not-allowed;
+ color: $devui-disabled-text;
+ }
+}
+
 .devui-select-open {
  .devui-select-arrow {
  transform: rotate3d(0, 0, 1, 180deg);
@@ -58,6 +77,7 @@ $select-item-min-height: 36px;
 
 .devui-select-selection {
  position: relative;
+ cursor: pointer;
 }
 
 .devui-select-input {
@@ -150,7 +170,7 @@ $select-item-min-height: 36px;
  color: $devui-text;
  cursor: pointer;
 
- &:hover:not(.active) {
+ &:hover:not(.active):not(.disabled) {
  color: $devui-list-item-hover-text;
  background-color: $devui-list-item-hover-bg;
  }
@@ -159,6 +179,12 @@ $select-item-min-height: 36px;
  color: $devui-list-item-active-text;
  background-color: $devui-list-item-active-bg;
  }
+
+ &.disabled {
+ cursor: not-allowed;
+ background-color: $devui-disabled-bg;
+ color: $devui-disabled-text;
+ }
 }
 
 .devui-scrollbar {

devui/select/src/select.tsx

@@ -1,9 +1,5 @@
-import { defineComponent, ref, Transition, toRefs, computed } from 'vue';
-import {
- selectProps,
- SelectProps,
- OptionObjectItem,
-} from './use-select';
+import { defineComponent, ref, Transition, computed } from 'vue';
+import { selectProps, SelectProps, OptionObjectItem } from './use-select';
 import { Icon } from '../../icon';
 import { Checkbox } from '../../checkbox';
 import { className } from './utils';
@@ -16,14 +12,15 @@ export default defineComponent({
  props: selectProps,
  emits: ['toggleChange', 'valueChange', 'update:modelValue'],
  setup(props: SelectProps, ctx) {
- const containerRef = ref(null)
- const dropdownRef = ref(null)
+ const containerRef = ref(null);
+ const dropdownRef = ref(null);
  const isOpen = ref<boolean>(false);
  function toggleChange(bool: boolean) {
+ if (props.disabled) return;
  isOpen.value = bool;
  ctx.emit('toggleChange', bool);
  }
- useSelectOutsideClick([containerRef, dropdownRef], isOpen, toggleChange)
+ useSelectOutsideClick([containerRef, dropdownRef], isOpen, toggleChange);
 
  const mergeOptions = computed(() => {
  return props.options.map((item) => {
@@ -32,14 +29,14 @@ export default defineComponent({
  option = {
  name: item.name ? item.name : item.value + '',
  value: item.value,
- checked: false,
+ _checked: false,
  ...item,
  };
  } else {
  option = {
  name: item + '',
  value: item,
- checked: false,
+ _checked: false,
  };
  }
 
@@ -56,14 +53,18 @@ export default defineComponent({
  } else if (!Array.isArray(props.modelValue)) {
  return getValuesOption([props.modelValue])[0]?.name || '';
  }
- return ''
+ return '';
  });
 
  function valueChange(item: OptionObjectItem, index: number) {
- let { modelValue } = props
- if (props.multiple) {
- item.checked = !item.checked
- modelValue = mergeOptions.value.filter(item => item.checked).map(item => item.value)
+ const { multiple, optionDisabledKey: disabledKey } = props;
+ let { modelValue } = props;
+ if (disabledKey && !!item[disabledKey]) return;
+ if (multiple) {
+ item._checked = !item._checked;
+ modelValue = mergeOptions.value
+ .filter((item) => item._checked)
+ .map((item) => item.value);
  ctx.emit('update:modelValue', modelValue);
  } else {
  ctx.emit('update:modelValue', item.value);
@@ -73,13 +74,14 @@ export default defineComponent({
  }
 
  function getItemClassName(item: OptionObjectItem) {
+ const { optionDisabledKey: disabledKey } = props;
  return className('devui-select-item', {
  active: item.value === props.modelValue,
+ disabled: disabledKey ? !!item[disabledKey] : false,
  });
  }
 
  return {
- ...toRefs(props),
  isOpen,
  containerRef,
  dropdownRef,
@@ -97,6 +99,8 @@ export default defineComponent({
  inputValue,
  size,
  multiple,
+ disabled,
+ optionDisabledKey: disabledKey,
  placeholder,
  overview,
  valueChange,
@@ -110,6 +114,7 @@ export default defineComponent({
  'devui-select-lg': size === 'lg',
  'devui-select-sm': size === 'sm',
  'devui-select-underlined': overview === 'underlined',
+ 'devui-select-disabled': disabled,
  });
 
  const inputClassName = className('devui-select-input', {
@@ -119,14 +124,17 @@ export default defineComponent({
 
  return (
  <div class={selectClassName} ref="containerRef">
- <div class="devui-select-selection">
+ <div
+ class="devui-select-selection"
+ onClick={() => toggleChange(!isOpen)}
+ >
  <input
  value={inputValue}
  type="text"
  class={inputClassName}
  placeholder={placeholder}
  readonly
- onClick={() => toggleChange(!isOpen)}
+ disabled={disabled}
  />
  <span class="devui-select-arrow">
  <Icon name="select-arrow" />
@@ -138,15 +146,19 @@ export default defineComponent({
  {mergeOptions.map((item, i) => (
  <li
  onClick={(e: MouseEvent) => {
- e.preventDefault()
- e.stopPropagation()
+ e.preventDefault();
+ e.stopPropagation();
  valueChange(item, i);
  }}
  class={getItemClassName(item)}
  key={i}
  >
  {multiple ? (
- <Checkbox modelValue={item.checked} label={item.name}/>
+ <Checkbox
+ modelValue={item._checked}
+ label={item.name}
+ disabled={disabledKey ? !!item[disabledKey] : false}
+ />
  ) : (
  item.name
  )}

devui/select/src/use-select.ts

@@ -3,7 +3,7 @@ import { PropType, ExtractPropTypes } from 'vue';
 export interface OptionObjectItem {
  name: string
  value: string | number
- checked: boolean
+ _checked: boolean
  [key: string]: any
 }
 
@@ -44,6 +44,14 @@ export const selectProps = {
  type: Boolean,
  default: false,
  },
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ optionDisabledKey: {
+ type: String,
+ default: ''
+ },
  onToggleChange: {
  type: Function as PropType<(bool: boolean) => void>,
  default: undefined,

sites/components/select/disabled-select-demo.vue

@@ -0,0 +1,53 @@
+<template>
+ <d-select v-model="value1" :options="options1" :disabled="true" />
+ <br>
+ <d-select v-model="value2" :options="options2" option-disabled-key="disabled" />
+ <br>
+ <d-select v-model="value3" :options="options3" :multiple="true" option-disabled-key="disabled" />
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from 'vue'
+
+export default defineComponent({
+ setup () {
+ const value1 = ref('动不了啦')
+ const options1 = reactive(['动不了啦'])
+
+ const value2 = ref('')
+ const options2 = reactive([
+ {
+ value: '试试'
+ }, {
+ value: '试试就逝世',
+ disabled: true
+ }
+ ])
+
+ const value3 = ref('')
+ const options3 = reactive([
+ {
+ name: '多选',
+ value: 0
+ }, {
+ name: '多选很重要呢',
+ value: 1,
+ disabled: true
+ }, {
+ name: '多选真的很重要呢',
+ value: 2,
+ disabled: false
+ }
+ ])
+
+ return {
+ value1,
+ options1,
+ value2,
+ options2,
+ value3,
+ options3
+ }
+ },
+})
+</script>

sites/components/select/index.md

@@ -38,6 +38,12 @@
 <MutipleSelectDemo/>
 <br/>
 
+#### Disabled
+
+<br/>
+<DisabledSelectDemo/>
+<br/>
+
 ```html
 <d-select v-model="baseSelectValue" :options="baseSelectOptions" size="lg"></d-select>
 
@@ -51,10 +57,12 @@
 <script lang="ts">
 import { defineComponent, ref, reactive } from 'vue'
 import MutipleSelectDemo from './mutiple-select-demo.vue'
+import DisabledSelectDemo from './disabled-select-demo.vue'
 
 export default defineComponent({
  components: {
- MutipleSelectDemo
+ MutipleSelectDemo,
+ DisabledSelectDemo
  },
  setup() {
  const selectValue1 = ref('')