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

中秋假期回来,继续.

默认插槽设置默认值

通过插槽完成了内容的定制, 传什么显示什么, 但是如果不传, 则是空白.

封装组件时, 可以为预留的插槽提供默认内容.

<slot>默认内容</slot>

后面具名插槽等内容项目中暂时没见用到, 就先不看了, 精力有限, 用到再来研究.

vue系列之 插槽(Slot) 详解-阿里云开发者社区 (aliyun.com)
 

继续看同事封装的控件

<template>
	<view class="bg-white margin-b-10" @click="click">
		<view class="border-b padding-5 flex-row-nowrap flex-justify-sb">
			<view class="text-indent">
				<text v-if="card.head">{{card.head.name}} : {{card.head.value}}</text>
			</view>
			<view class="text-right margin-r-10">
				<text class="title margin-r-5" v-html="getStatusName()"></text>
				<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
	</view>
</template>

其中

.flex-row-nowrap {
		display: flex;弹性布局,能够扩展和收缩 flex 容器内的元素, 以最大限度地填充可用空间.可以自动适配各种设备的不同宽度,而不必依赖于传统的块状布局和浮动定位.
		flex-wrap: nowrap;flex 的元素被摆放到到一行，这可能导致 flex 容器溢出
	}

flex布局有点忘了,复习下,岁数大了,学啥都记不住.

别再用 float 布局了，flex 才是未来！-腾讯云开发者社区-腾讯云 (tencent.com)

flex布局有几个核心概念,分别是: 主轴与交叉轴、起始线和终止线、flex 容器与 flex 容器项.

在 flex 布局中有一个名为 flex-direction 的属性, 可以取四个值, 分别是:

• row
• row-reverse
• column
• column-reverse

row 或这 row-reverse, 主轴就是横向 x 轴, 交叉轴就是竖向 y 轴.

起始线和终止线

过去 css 的书写模式主要认为是水平从左到右的,现在不再假设一行文字是从左上开始向右下书写的.

如果 flex-direction 是 row, 并且我是在书写英文, 那么主轴的起始线是左边, 终止线是右边. 

如果书写阿拉伯文,

起始线和终止线决定了 flex 容器中的 flex 元素从哪个方向开始排列. 例如, 如果通过 direction:ltr 设置了文字书写方向是从左到右, 那么起始线就是左边, 终止线就是右边. 此时, 如果我们设置的 flex-direction 值是 row, 那么 flex 元素将会从左到右开始排列. 但如果我们设置的 flex-direction 值是 row-reverse, 那么 flex 元素将会从右到左开始排列.

也就是 flex-direction 决定了从起始线还是从终止线开始排列吧.

flex 容易与 flex 元素

把一个容器的 display 属性值改为 flex 或者 inline-flex 之后, 该容器就变成了 flex 容器, 而容器中的直系子元素就会变为 flex 元素. 那我们这段代码里第三行的view就是 flex 容器, 它的两个直系子元素就是 flex 元素.

<template>
	<view class="bg-white margin-b-10" @click="click">
		<view class="border-b padding-5 flex-row-nowrap flex-justify-sb">
			<view class="text-indent">
				<text v-if="card.head">{{card.head.name}} : {{card.head.value}}</text>
			</view>
			<view class="text-right margin-r-10">
				<text class="title margin-r-5" v-html="getStatusName()"></text>
				<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
	</view>
</template>

Flex 核心属性

flex-direction 主轴方向

flex 伸缩系数及初始值

justify-content 主轴方向对齐

align-items 交叉轴方向对齐

下面代码及效果

.box {
  display: flex;
  flex-direction: row-reverse;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

flex 伸缩系数及初始值

flex 布局可以很方便地进行响应式布局, 其实就是通过 flex 属性来实现的. flex 属性即 flex-grow、flex-shrink、flex-basis 这三个参数的缩写形式:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
/* 上面的设置等价于下面 flex 属性的设置 */
flex: 1 1 200px;

在考虑这几个属性的作用之前, 需要先了解一下可用空间 available space 这个概念. 这几个属性的作用其实是改变了 flex 容器中的可用空间的行为.

假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下，flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。

如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。

flex-basis

flex-basis 属性用于设置 Flex 元素的大小，其默认值是 auto。此时浏览器会检查元素是否有确定的尺寸，如果有确定的尺寸则用该尺寸作为 Flex 元素的尺寸，否则就采用元素内容的尺寸。

flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

举个例子，上面的例子中有 a、b、c 3个 Flex 元素。如果我们给上例中的所有元素设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。

但很多时候，我们可能都需要按照比例来划分剩余的空间。此时如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有 1/4（各 50px）。

flex-shrink

flex-grow 属性是处理 flex 元素在主轴上增加空间的问题，相反 flex-shrink 属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素 flex-shrink 属性设置为正整数，以此来缩小它所占空间到 flex-basis 以下。

与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

justify-content 主轴方向对齐

justify-content 属性用来使元素在主轴方向上对齐, 它的初始值是 flex-start, 即元素从容器的起始线排列. justify-content 属性有如下5个不同的值:

• flex-start: 从起始线开始排列, 默认值.
• flex-end: 从终止线开始排列
• center: 在中间排列
• space-around: 每个元素左右空间相等.
• space-between: 把元素排列好之后, 剩余的空间平均分配到元素之间.

flex-start:

flex-end:

center:

space-around:

space-between:

align-items 交叉轴方向对齐

align-items 属性可以使元素在交叉轴方向对齐，它的初始值是 stretch，即拉伸到最高元素的高度。align-items 属性有如下 5 个不同的值：

• stretch: 拉伸到最高元素的高度,默认值
• flex-start: 按 flex 容器起始位置对齐
• flex-end: 按 flex 容器结束位置对齐
• center: 居中对齐
• baseline: 始终按文字基线对齐

stretch:

flex-start:

flex-end:

center:

要注意的是，无论 align-items 还是 justify-content，它们都是以主轴或者交叉轴为参考的，而不是横向和竖向为参考的，明白这点很重要。

Flex 默认属性

由于所有 CSS 属性都会有一个初始值，所以当没有设置任何默认值时，flex 容器中的所有 flex 元素都会有下列行为：

• 元素排列为一行 (flex-direction 属性的初始值是 row)。
• 元素从主轴的起始线开始。
• 元素不会在主维度方向拉伸，但是可以缩小。
• 元素被拉伸来填充交叉轴大小。
• flex-basis 属性为 auto。
• flex-wrap 属性为 nowrap。

估计很快还会忘, 需要了再学.

现在这个就能看懂了,

.flex-justify-sb {
		justify-content: space-between;把元素排列好之后,剩余的空间平均分配到元素之间
	}

继续看自定义控件

<template>
	<view class="bg-white margin-b-10" @click="click">
		<view class="border-b padding-5 flex-row-nowrap flex-justify-sb">
			<view class="text-indent">
				<text v-if="card.head">{{card.head.name}} : {{card.head.value}}</text>
			</view>
			<view class="text-right margin-r-10">
				<text class="title margin-r-5" v-html="getStatusName()"></text>
				<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
	</view>
</template>

上面第四行的 text-intent 是下面的样式:

.text-indent {
		text-indent: 10px;属性定义一个块元素首行文本内容之前的缩进量。
	}

下面这句中的 v-if 比较熟悉了,就是 card.head 为真这个 text 就会渲染出来, 否则就不会渲染.

<text v-if="card.head">{{card.head.name}} : {{card.head.value}}</text>

后面的几个样式:

.text-right {
		text-align: right; 右对齐
	}
.margin-r-10 {
		margin-right: 10px;右外边距10px
	}

v-html 的内容直接作为普通 HTML 插入.

今天就学到这里了. 累了.