mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 01:33:05 +00:00
fix: 修复选项卡提交后设置为禁用 (#1748)
This commit is contained in:
parent
289e12ccdf
commit
7b1449f1d7
|
|
@ -5,8 +5,8 @@
|
|||
:key="item.value"
|
||||
class="item"
|
||||
shadow="never"
|
||||
:class="[modelValue == item[valueField] ? 'active' : '']"
|
||||
@click="selected(item[valueField])"
|
||||
:class="[inputDisabled ? 'is-disabled' : '', modelValue == item[valueField] ? 'active' : '']"
|
||||
@click="inputDisabled ? () => {} : selected(item[valueField])"
|
||||
>
|
||||
{{ item[textField] }}
|
||||
</el-card>
|
||||
|
|
@ -15,6 +15,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import type { FormField } from '@/components/dynamics-form/type'
|
||||
import { useFormDisabled } from 'element-plus'
|
||||
const inputDisabled = useFormDisabled()
|
||||
|
||||
const props = defineProps<{
|
||||
formValue?: any
|
||||
formfieldList?: Array<FormField>
|
||||
|
|
@ -24,6 +27,7 @@ const props = defineProps<{
|
|||
view?: boolean
|
||||
// 选中的值
|
||||
modelValue?: any
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const selected = (activeValue: string | number) => {
|
||||
|
|
@ -66,6 +70,16 @@ const option_list = computed(() => {
|
|||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
|
||||
.is-disabled {
|
||||
border: 1px solid var(--el-card-border-color);
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-text-color-placeholder);
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
v-for="item in option_list"
|
||||
:key="item.value"
|
||||
class="item"
|
||||
:class="[modelValue == item[valueField] ? 'active' : '']"
|
||||
:class="[inputDisabled ? 'is-disabled' : '', modelValue == item[valueField] ? 'active' : '']"
|
||||
@click="selected(item[valueField])"
|
||||
>
|
||||
{{ item[textField] }}
|
||||
|
|
@ -14,6 +14,8 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import type { FormField } from '@/components/dynamics-form/type'
|
||||
import { useFormDisabled } from 'element-plus'
|
||||
const inputDisabled = useFormDisabled()
|
||||
const props = defineProps<{
|
||||
formValue?: any
|
||||
formfieldList?: Array<FormField>
|
||||
|
|
@ -54,7 +56,15 @@ const option_list = computed(() => {
|
|||
padding: 3px 4px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
.is-disabled {
|
||||
border: 1px solid var(--el-card-border-color);
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-text-color-placeholder);
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
|
|
|
|||
Loading…
Reference in New Issue