Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c98b185d 1 parent 66dbb5bb

下拉框其他输入项测试

Inline Side-by-side
Showing 3 changed files with 19 additions and 7 deletions
<!--
* @Date: 2022-08-30 11:34:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-01-30 12:40:36
* @LastEditTime: 2023-01-30 14:23:30
* @FilePath: /data-table/src/components/CheckboxField/index.vue
* @Description: 多项选择控件
-->
......@@ -34,7 +34,7 @@
style="margin-bottom: 0.25rem"
>{{ x.title }}</van-checkbox
>
<van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" />
<van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
</van-checkbox-group>
</template>
</van-field>
......@@ -61,7 +61,7 @@ const HideShow = computed(() => {
})
// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
// 绑定值发生变化时回调，处理选项为其他时的输入项录入
const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
const add_info = ref('');
const add_info_name = ref(props.item.key + '#');
const add_info_key = ref('其他'); // TODO: 以后动态获取
......
<!--
* @Date: 2022-08-30 13:46:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-12-21 11:25:55
* @LastEditTime: 2023-01-30 14:20:52
* @FilePath: /data-table/src/components/PickerField/index.vue
* @Description: 单列选择器组件
-->
......@@ -22,6 +22,7 @@
@click="showPicker = true"
:border="false"
/>
<van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" />
<van-popup v-model:show="showPicker" position="bottom">
<van-picker
:columns="item.component_props.options"
......@@ -37,7 +38,15 @@ const props = defineProps({
item: Object,
});
// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
// 绑定值发生变化时回调，处理选项为其他时的输入项录入
const has_add_info = ref(false); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
const add_info = ref('');
const add_info_name = ref(props.item.key + '#');
const add_info_key = ref('其他'); // TODO: 以后动态获取
onMounted(() => {
add_info_name.value = `${props.item.key}#${add_info_key.value}`
// props.item.component_props.options = props.item.component_props.options.map((opt) => {
// return {
// text: opt,
......@@ -52,6 +61,9 @@ const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
props.item.value = selectedOptions[0]?.value;
showPicker.value = false;
if (add_info_key.value === props.item.value) {
has_add_info.value = true;
}
};
// 隐藏显示
const HideShow = computed(() => {
......
<!--
* @Date: 2022-08-30 11:34:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-01-30 12:41:51
* @LastEditTime: 2023-01-30 14:22:57
* @FilePath: /data-table/src/components/RadioField/index.vue
* @Description: 单项选择控件
-->
......@@ -29,7 +29,7 @@
style="margin-bottom: 0.25rem"
>{{ x.title }}</van-radio
>
<van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" />
<van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
</van-radio-group>
</template>
</van-field>
......@@ -53,7 +53,7 @@ const HideShow = computed(() => {
})
// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
// 绑定值发生变化时回调，处理选项为其他时的输入项录入
const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
const add_info = ref('');
const add_info_name = ref(props.item.key + '#');
const add_info_key = ref('其他'); // TODO: 以后动态获取
......