2024-12-30
前言:今天这篇日志记录了我添加表单选择器的过程。中途我发现了 picker 组件可以通过改变 value 值来改变聚焦的条目。
添加选择器
接下来,我准备做选择器,类似这样:
我可以使用picker组件实现这种效果。但picker只包括了从底部弹出的这个选择器,并不包括触发弹出的组件和显示数据的组件。
因此,可以使用我之前写好的 cm-input 组件(“cm”是“common”的缩写,hhh),它可以通过中间的input组件显示数据,也可以通过点击右侧的图标触发弹出事件。
<template>
<!-- ... -->
<picker @change="bindPickerChange_type" :value="type_i" :range="types">
<cm-input title="分类" placeholder="请选择书籍分类" r_icon="down" :value="types[type_i]" :disabled="true"></cm-input>
</picker>
<!-- ... -->
</template>
<script>
export default {
name:"cm-input",
data() {
return {
types: ['未分类', '文学', '考研', '四级'],
type_i: 0,
// ...
methods: {
bindPickerC