使用HBuilderX 开发微信小程序的日志（2.1）

前言：紧接着上一篇日志的自定义组件，我在这片日志里记录了为自定义组件添加自定义图标和点击事件。因为流程比较熟悉，没有花太多时间折腾，过程还是比较顺利的。

对了，今天是个特殊的日子：毛主席诞辰。祝大家快乐！

2024-12-26

扩展自定义输入框——添加右侧图标

用于参考的小程序，使用输入框右侧的图标作为打开扫码功能的按钮：

我在自定义输入框cm-input中添加了新的prop，r_icon icon_color和icon_size，用于定义图标的类型、大小和颜色：

<template>
	<view class="cm-form-input">
		<view class="title">{{title}}</view><input :placeholder="placeholder"/>
		<uni-icons style="width: 10%;" :type="r_icon" :size="icon_size" :color="icon_color"></uni-icons>
	</view>
</template>

export default {
    name:"cm-input",
    data() {
        return {

        };
    },
    props: {
    // ...
		r_icon: {
            type: String,
            default: ''
        },
        icon_size: {
            type: Number,
            default: 22
        },
        icon_color: {
            type: String,
            default: '#000'
        }
    }
    // ...

我重新调整了标题、输入框和图标组件的宽度占比。标题占20%，输入框占70%，右侧图标占10%。现在先搞得简单一些。

.cm-form-input .title {
	font-size: 30rpx;
	width: 20%;
}
.cm-form-input input {
	width: 70%;
/*	background-color: aqua;  这是我为了便于查看而填上的背景色 */
}

现在页面的组件是这样写的：

<view class="cm-form-item">
    <cm-input title="ISBN" placeholder="扫描或输入ISBN" r_icon="scan" icon_color="#A00000"></cm-input>
    <cm-input title="书名" placeholder="请输入书名"></cm-input>
    <cm-input title="作者" placeholder="请输入作者"></cm-input>
</view>

页面的外观是这样的：

接下来，我要设置图标点击后的事件。添加一个Function类型的prop，名称为on_icon_click（是不是必须使用下划线命名法？），然后在父组件中定义一个函数scan（我才发现我使用的是script setup的写法，这样看起来更清爽一点），接着在cm-input组件中绑定该函数（此时必须使用v-bind，也就是冒号写法）。

<!-- cm-input.vue -->
<uni-icons style="width: 10%;" :type="r_icon" :size="icon_size" :color="icon_color" @click="on_icon_click"></uni-icons>

<!-- cm-input.vue -->
on_icon_click: {
	type: Function
}

<!-- add.vue -->
<script setup>
	function scan () {
		console.log('启动扫码...');
	}
</script>

测试一下，成功了！

在做好以上工作的基础上，增加页面的一些内容，现在页面看上去是这样的：

看起来还挺有那么回事~