Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fac0ebda 1 parent 6afa6db5

fix Bob需求调整，只要文字周围的颜色背景

Inline Side-by-side
Showing 3 changed files with 20 additions and 12 deletions
......@@ -20,7 +20,7 @@
<template #input>
<van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction"
:max="item.component_props.max" style="width: 100%">
<div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper" :style="{ border: item.component_props.readonly ? 0 : '', backgroundColor: x.background_color || ''}">
<div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
<!-- <div v-if="item.component_props.readonly">
<div v-if="checkbox_value.includes(x.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
<div v-else role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="false" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style=""></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
......@@ -29,7 +29,11 @@
:checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox> -->
<van-config-provider :theme-vars="{ checkboxLabelColor: x.color }">
<van-checkbox @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
:checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
:checked-color="themeVars.radioColor">
<template #default>
<span :style="{ backgroundColor: x.background_color || '', padding: '0.25rem', borderRadius: '0.25rem' }">{{ x.title }}</span>
</template>
</van-checkbox>
</van-config-provider>
<van-field v-if="checkbox_value.includes(x.value) && x.is_input" :name="'_' + item.key" @blur="onBlur(x)" v-model="x.affix"
label=" " label-width="5px" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''"
......
<!--
* @Date: 2022-08-30 11:34:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-02-25 15:49:20
* @LastEditTime: 2025-03-03 15:03:48
* @FilePath: /data-table/src/components/GenderField/index.vue
* @Description: 性别选择控件
-->
......@@ -22,7 +22,7 @@
>
<template #input>
<van-radio-group @change="onChange(item)" v-model="gender_value" :direction="item.component_props.direction" style="width: 100%">
<div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ backgroundColor: x.background_color || '' }">
<div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
<!-- <div v-if="item.component_props.readonly">
<div v-if="item.component_props.default === x.value" role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="true" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"></i></div><span class="van-radio__label">{{ x.title }}</span></div>
<div v-else role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="false" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success"></i></div><span class="van-radio__label">{{ x.title }}</span></div>
......@@ -30,8 +30,11 @@
<van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> -->
<van-config-provider :theme-vars="{ radioLabelColor: x.color }">
<van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
<van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" style="margin-bottom: 0rem">
<template #default>
<span :style="{ backgroundColor: x.background_color || '', padding: '0.25rem', borderRadius: '0.25rem' }">{{ x.title }}</span>
</template>
</van-radio>
</van-config-provider>
</div>
</van-radio-group>
......
......@@ -17,7 +17,7 @@
<template #input>
<van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction"
style="width: 100%">
<div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ border: item.component_props.readonly ? 0 : '', backgroundColor: x.background_color || ''}">
<div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
<div v-if="item.component_props.readonly">
<div v-if="default_value === x.value" role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="true" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"></i></div><span class="van-radio__label">{{ x.title }}</span></div>
<div v-else role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="false" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success"></i></div><span class="van-radio__label">{{ x.title }}</span></div>
......@@ -29,17 +29,18 @@
:name="x.value"
icon-size="1rem"
:checked-color="themeVars.radioColor"
style="margin-bottom: 0.25rem"
>
{{ x.title }}
<template #default>
<span :style="{ backgroundColor: x.background_color || '', padding: '0.25rem', borderRadius: '0.25rem' }">{{ x.title }}</span>
</template>
</van-radio>
</van-config-provider>
<div v-if="x.desc_text" class="van-multi-ellipsis--l3 rule-desc-text" :style="x.color ? { color: x.color } : {}">{{ x.desc_text }}</div>
<div v-if="x.desc_type === 'text'" class="rule-box" :style="x.color ? { color: x.color } : {}" @click="showRule(x)">
<div v-if="x.desc_text" class="van-multi-ellipsis--l3 rule-desc-text">{{ x.desc_text }}</div>
<div v-if="x.desc_type === 'text'" class="rule-box" @click="showRule(x)">
{{ x.desc_btn_name }}&nbsp;>>
</div>
<div v-if="x.desc_type === 'url'" class="rule-box" :style="x.color ? { color: x.color } : {}" @click="showUrl(x)">
<div v-if="x.desc_type === 'url'" class="rule-box" @click="showUrl(x)">
{{ x.desc_btn_name }}&nbsp;<van-icon name="link-o" />
</div>
<van-field
......