diff --git a/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx b/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx index fca1fd86e012e6d4212fba86e610750018d0b901..e6f7966952f6cda52a5950ca33bcae597bfabe40 100644 --- a/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx +++ b/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx @@ -1,4 +1,4 @@ -import { Ref, computed, ref } from 'vue'; +import { Ref, computed, ref, watch } from 'vue'; import FTags from '@farris/ui-vue/components/tags'; import { ButtonEditProps } from '../button-edit.props'; import { UseTextBox } from '../composition/types'; @@ -20,8 +20,18 @@ export default function ( changeTextBoxValue(tags.map((tag: any) => tag.name).join(separator.value), true); } + watch(() => props.separator, (newValue) => { + separator.value = newValue; + }); + + const canDeleteTag = ref(!props.disable && !props.readonly); + + watch([() => props.disable, () => props.readonly], ([newDisabled, newReadonly],[oldDisabled, oldReadonly]) => { + canDeleteTag.value = !newDisabled && !newReadonly; + }); + return () => { - return ; }; } diff --git a/packages/ui-vue/components/common/text-box/composition/use-text-box.ts b/packages/ui-vue/components/common/text-box/composition/use-text-box.ts index 66ffbc5e569a60b3eeeaed563ba46cdc2b3e6053..b7b2546f922abce4a4c6d1c423c4517070219a79 100644 --- a/packages/ui-vue/components/common/text-box/composition/use-text-box.ts +++ b/packages/ui-vue/components/common/text-box/composition/use-text-box.ts @@ -126,7 +126,7 @@ export function useTextBox( } function onFocus(payload: FocusEvent) { - if (props.disabled) { + if (disabled.value || readonly.value) { return; } if (showBorder.value) { diff --git a/packages/ui-vue/components/input-group/src/components/extend.component.tsx b/packages/ui-vue/components/input-group/src/components/extend.component.tsx index 0bbeeb6e2451d185c16db3fabe0ca708147bd596..0943e45a47180cba212b9d9a9997daca5802dd89 100644 --- a/packages/ui-vue/components/input-group/src/components/extend.component.tsx +++ b/packages/ui-vue/components/input-group/src/components/extend.component.tsx @@ -1,13 +1,20 @@ -import { SetupContext, computed, reactive } from 'vue'; +import { SetupContext, computed, reactive, ref, watch } from 'vue'; import { InputGroupProps } from '../input-group.props'; export default function ( props: InputGroupProps, context: SetupContext ) { + + const extendInfo = ref(props.extendInfo); + const showExtend = computed(() => props.useExtendInfo && !!props.extendInfo); - const tooltipOption = reactive({ - content: props.extendInfo + const tooltipOption = computed(() => { + return { content: extendInfo.value }; + }); + + watch(() => props.extendInfo, (value) => { + extendInfo.value = value; }); function onMouseOverInExtentInfo() { @@ -15,7 +22,7 @@ export default function ( } return () => showExtend.value && ( - + ); diff --git a/packages/ui-vue/components/input-group/src/composition/use-appended-button.ts b/packages/ui-vue/components/input-group/src/composition/use-appended-button.ts index 008f6ec4c8a2150f62f867356f58b1a06807ea71..7998801e35fb5b7f7a5120c3af5c4b965846dc3d 100644 --- a/packages/ui-vue/components/input-group/src/composition/use-appended-button.ts +++ b/packages/ui-vue/components/input-group/src/composition/use-appended-button.ts @@ -10,7 +10,7 @@ export function useAppendedButton( const forcedToShowAppendedButton = computed(() => props.showButtonWhenDisabled && (props.readonly || props.disabled)); - const shouldShowAppendedButton = computed(() => props.enableClear || !!props.groupText); + const shouldShowAppendedButton = computed(() => props.type === 'password' || props.enableClear || !!props.groupText || forcedToShowAppendedButton.value); const appendedButtonClass = computed(() => { const classObject = { diff --git a/packages/ui-vue/components/input-group/src/composition/use-text-box.ts b/packages/ui-vue/components/input-group/src/composition/use-text-box.ts index 033bbf16b6c7952c60aa1ba2c15957ee8f881fbc..c7196ed74af9d179a89ce4aa9041621bdfdcdc5f 100644 --- a/packages/ui-vue/components/input-group/src/composition/use-text-box.ts +++ b/packages/ui-vue/components/input-group/src/composition/use-text-box.ts @@ -78,7 +78,7 @@ export function useTextBox( } function onInputFocus($event: FocusEvent) { - if (!props.disabled) { + if (!props.disabled && !props.readonly) { if (showBorder.value) { document.documentElement.classList.add(focusCls); } diff --git a/packages/ui-vue/components/tags/src/tags.component.tsx b/packages/ui-vue/components/tags/src/tags.component.tsx index 3a19033dc44cd90d66ce72b9c5ec47b217cd634c..a43614228bb8b9a898fce98e069df2ded6b411e0 100644 --- a/packages/ui-vue/components/tags/src/tags.component.tsx +++ b/packages/ui-vue/components/tags/src/tags.component.tsx @@ -71,6 +71,11 @@ export default defineComponent({ activeTag.value = newValue; }); + watch(() => props.showClose, (newValue) => { + showClose.value = newValue; + }); + + /** * 监听是否显示添加文本框 */ diff --git a/packages/ui-vue/demos/button-edit/clear.vue b/packages/ui-vue/demos/button-edit/clear.vue index a6be71a6cca87b6519c42937a13a1f99011dcbe7..c8cbdf268bcf6d131be95a30102c61aa1e98b916 100644 --- a/packages/ui-vue/demos/button-edit/clear.vue +++ b/packages/ui-vue/demos/button-edit/clear.vue @@ -9,6 +9,7 @@ const enableClear = ref(true);
显示清空按钮:
+
只读状态: diff --git a/packages/ui-vue/demos/button-edit/inputType.vue b/packages/ui-vue/demos/button-edit/inputType.vue index df37902455cd847f51d71098ea685e7f10fecc6d..f50833de74afceb17d135f725ead6334fa07f57d 100644 --- a/packages/ui-vue/demos/button-edit/inputType.vue +++ b/packages/ui-vue/demos/button-edit/inputType.vue @@ -3,6 +3,7 @@ import { ref } from 'vue'; const text = ref('aaa,bbb,ccc'); const text2 = ref('aaa,bbb,ccc'); +const disabled = ref(false); diff --git a/packages/ui-vue/demos/input-group/basic.vue b/packages/ui-vue/demos/input-group/basic.vue index 1f97df66c503c0fb13b79e33cab247bcab215fba..0dfa61d55a191b2ec5cd6a5521716219ecb2237a 100644 --- a/packages/ui-vue/demos/input-group/basic.vue +++ b/packages/ui-vue/demos/input-group/basic.vue @@ -35,7 +35,7 @@ const textareaValue = ref('我是一个多行文本框，内容比较多，可
-
+
diff --git a/packages/ui-vue/demos/input-group/extend.vue b/packages/ui-vue/demos/input-group/extend.vue index 3b4b86116a77652fb5ddc3ed3f25ae9e8084dea9..305a4615e4d154a9b1b51bc2388dc90c7a9e4ffd 100644 --- a/packages/ui-vue/demos/input-group/extend.vue +++ b/packages/ui-vue/demos/input-group/extend.vue @@ -5,6 +5,8 @@ const groupIcon = '' const groupText = '查询' const bindValue = ref('文本内容') const extendInfo = ref('这是扩展') + +const useExtendInfo = ref(true); function onClickGroupText() { alert('click group text') } @@ -60,12 +62,30 @@ function onUpdateExtendInfo() {
+
+
+
+
+
+ +
+
+
+ +
+
diff --git a/packages/ui-vue/demos/input-group/placeholder.vue b/packages/ui-vue/demos/input-group/placeholder.vue index 51fda953ae737cc4f5ff0eb03d650dc444d33839..b056c1ba28d2494b62e53a706135bcb7db9229c9 100644 --- a/packages/ui-vue/demos/input-group/placeholder.vue +++ b/packages/ui-vue/demos/input-group/placeholder.vue @@ -22,7 +22,7 @@ const bindDisableValue = ref('');
- +
@@ -32,7 +32,7 @@ const bindDisableValue = ref('');
- +
diff --git a/packages/ui-vue/demos/input-group/state.vue b/packages/ui-vue/demos/input-group/state.vue index a43258c1f4f529669b401bc28f0ff60b9b45a87b..7786556e44455261f57cbc04b0d9b8ef94d271e7 100644 --- a/packages/ui-vue/demos/input-group/state.vue +++ b/packages/ui-vue/demos/input-group/state.vue @@ -3,7 +3,7 @@ import { ref } from 'vue'; /** 绑定值 */ const bindValue = ref('文本'); -const groupIcon = ''; +const groupIcon = '';