20240912uniapp学习工作-自定义控件

昨天看到 search 样式,继续.

<template>
	<view class="content">
		<view class="search">
			<input type="text" placeholder="搜索关键字" v-model="key" class="input bg-white font12" />
			<image src="@/static/icon/xxx.png" class="image" @click="clearKey"></image>
			<button class="button font12" @click="search">搜索</button>
		</view>
	</view>
</template>

这句是文本输入,其中 v-model 用于在表单输入元素或组件上创建双向绑定. 是vue的内置指令

<input type="text" placeholder="搜索关键字" v-model="key" class="input bg-white font12" />

创建绑定后,下面脚本中的key发生改变,搜索框中的内容就会跟着改变了.

<script>
	export default {
		name: "custom-search-input",
		data() {
			return {
				key: ''
			};
		},
	}
</script>

下面这句, @是根路径, @click="clearkey" 是 vue 事件处理的监听事件, 我们可以使用 v-on 指令(简写为 @) 来监听 DOM 事件, 并在事件出发时执行对应的 JS.用法: v-on:click="handler" 或 @click="handler". 事件处理器 handler 可以是:

1 内联事件处理器: 事件被处罚时执行的内联 JS 语句(与 onClick 类似)

2 方法事件处理器: 一个指向组件上定义的方法的属性名或是路径.

<image src="@/static/icon/xxx.png" class="image" @click="clearKey"></image>

这里就是指向 script 中定义的 clearkey 方法:

<script>
	export default {
		name: "custom-search-input",
		data() {
			return {
				key: ''
			};
		},
		methods: {
			clearKey() {
				this.key = '';
			},
		}
	}
</script>

class="image" 就是设置样式, absolute 是绝对定位, 元素会被移出正常文档流,并不为元素预留空间, 通过指定元素相对于最近的非 static 定位祖先元素(这里是search)的偏移, 来确定元素位置. 这里设置绝对定位, 才能让image位于input上面. 也就是偏移是相对父元素的, 自然能覆盖在兄弟元素上.

.image {
		position: absolute;
		top: 5px;
		right: 8px;
		width: 22px;
		height: 22px;
	}

至于button, 样式如下,

.button {
		width: 45px;
		height: 26px;
		line-height: 26px;
		padding: 0px;
		border: 1px solid #ff7b0f;
		border-radius: 5px;
		color: #ff7b0f;
		position: absolute;
		top: 3px;
		right: -52px;
	}

其他都容易懂, 只有这个line-height 需要学习一下.

WangMin 写的一篇文章https://www.cnblogs.com/wmbuke/p/17824246.html, 学习一下, 

CSS中的行高（line-height）是指网页中每行文字之间的距离，就是对于同一行内的不同内容，行高决定它们之间的间距。

这第一句就让人有点懵, 既然是行高, 怎么又成了"同一行内的不同内容之间的间距" 了. 我理解应该是同一行块的不同文字行之间的间距.

换一句话来说，在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距，所以行高指的是文字的高度+上下间距。

换一句话来说，在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距，所以行高指的是文字的高度+上下间距。

从上面这句看,我理解的应该是对的.

文本中存在有四条线: 顶线、中线、基线、底线

顶线，在中文汉字的顶部位置就是顶线的位置！就是图中绿色线条所在的位置

中线，css中有一个概念叫x-height，意思是小写字母x的高度! 在css中，有些属性值的定义就和这个x-height有关, 最有代表性的就是vertical-align的属性值middle。这里的middle就是中间的意思，指的其实就是基线 往上1/2的位置，也就是小写x字母的中间交叉点那个位置！这里横过小写英文字母x中间交叉点的线就是中线。就是图中蓝色线条所在的位置

基线往上1/2小写x高度的位置就是中线.

基线，要了解基线 ，需要知道在英文中的26个字母当中 ，有一个小写的x字母在CSS中是相当特殊的，基线就是小写x字母的下边缘(线) ！ 就是图中红色线条所在的位置

底线，在中文汉字的底部位置 就是底线的位置 ！就是图中紫色线条所在的位置

那么从上图中我们就可以看到其实行高 line-height 指的是上下文本行的两条基线之间的距离，即图中两条红线之间的距离。

使用像素单位设置行高是最常见的方法，也是最容易理解的。可以通过以下方式来设定行高

<style>
p{
  font-size: 16px;
  line-height: 32px;
}
</style>

设置行高之前：

设置行高之后：

可以看到每行文字之间明显出现了一定的距离，对比之下，一定是设置行高之后文字看起来更加清晰。

在上述例子中，字体大小font-size为16px，行高line-height为32px，也就是说一行文字的高度为32个像素。用这种方式设置行高时，行高最好是文字大小的2倍。当然这不是强制性的，你可以根据自己的需求来调整。

我们的button, 文字高度12px, button 高度26px, line-height设为26px, 效果如下,

可以看到文字上边距比下边距大, 这里文字之所以没有居中, 是因为 height 指的是包括边框的距离, 而 line-height 设为区域内容高度时才会居中, 所以 line-height = height - border * 2, 这样设置才会居中,比如把 line-height 设为24px, 效果如下

 

到这里, 这个自定义控件就搞明白了.

4点半, 还有一小时下班, 剩点时间继续看看vue吧,

调用函数​

可以在绑定的表达式中使用一个组件暴露的方法, toTitleDate() 和 formatDate() 应该就是组件暴露的方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>