新增各选项提示信息
This commit is contained in:
68
src/App.vue
68
src/App.vue
@ -16,26 +16,35 @@ const flexContainerForm: { [key: string]: any } = reactive({
|
||||
const flexContainerList = {
|
||||
"flex-direction": {
|
||||
title: "flex-direction",
|
||||
titleTooltip: "排列方向",
|
||||
list: ["row", "row-reverse", "column", "column-reverse"],
|
||||
modelValue: "row",
|
||||
tooltip: ["主轴为水平方向，起点在左端", "row反方向", "主轴为垂直方向，起点在上沿", "column反方向"],
|
||||
modelValue: "row"
|
||||
},
|
||||
"flex-wrap": {
|
||||
title: "flex-wrap",
|
||||
titleTooltip: "排不下，换行",
|
||||
list: ["nowrap", "wrap", "wrap-reverse"],
|
||||
tooltip: ["不换行", "换行，第一行在上方", "换行，第一行在下方"],
|
||||
modelValue: "nowrap",
|
||||
},
|
||||
"justify-content": {
|
||||
title: "justify-content",
|
||||
titleTooltip: "主轴上的对齐方式",
|
||||
list: ["flex-start", "flex-end", "center", "space-between", "space-around"],
|
||||
tooltip: ["左对齐", "右对齐", "居中", "两端对齐，项目之间的间隔都相等", "每个项目两侧的间隔相等"],
|
||||
modelValue: "flex-start",
|
||||
},
|
||||
"align-items": {
|
||||
title: "align-items",
|
||||
titleTooltip: "交叉轴上如何对齐",
|
||||
list: ["stretch", "flex-start", "flex-end", "center", "baseline"],
|
||||
tooltip: ["项目未设置高度或设为auto，将占满整个容器的高度", "交叉轴的起点对齐", "交叉轴的终点对齐", "交叉轴的中点对齐", "目的第一行文字的基线对齐"],
|
||||
modelValue: "stretch",
|
||||
},
|
||||
"align-content": {
|
||||
title: "align-content",
|
||||
titleTooltip: "多根轴线的对齐方式",
|
||||
list: [
|
||||
"stretch",
|
||||
"flex-start",
|
||||
@ -44,6 +53,7 @@ const flexContainerList = {
|
||||
"space-between",
|
||||
"space-around",
|
||||
],
|
||||
tooltip: ["轴线占满整个交叉轴", "与交叉轴的起点对齐", "与交叉轴的终点对齐", "与交叉轴的中点对齐", "与交叉轴两端对齐，轴线之间的间隔平均分布", "每根轴线两侧的间隔都相等"],
|
||||
modelValue: "stretch",
|
||||
},
|
||||
};
|
||||
@ -70,6 +80,14 @@ const itemAlignSelf = [
|
||||
"flex-end",
|
||||
"baseline",
|
||||
];
|
||||
const itemAlignSelfTooltip = [
|
||||
"为父元素的align-items值，没有父容器，则为stretch",
|
||||
"适合容器",
|
||||
"容器的中央",
|
||||
"容器的开头",
|
||||
"容器的末端",
|
||||
"容器的基线",
|
||||
];
|
||||
|
||||
/** 子项列表 JSON 数据 */
|
||||
let flexItemForm: {
|
||||
@ -274,19 +292,28 @@ setInterval(() => {
|
||||
:key="key"
|
||||
>
|
||||
<h4>
|
||||
<strong>{{ item.title }}</strong>
|
||||
<a-tooltip
|
||||
:content="item.titleTooltip"
|
||||
background-color="goldenrod"
|
||||
:mini="true">
|
||||
<strong>{{ item.title }}</strong>
|
||||
</a-tooltip>
|
||||
</h4>
|
||||
<a-radio-group
|
||||
direction="vertical"
|
||||
v-model="flexContainerForm[key]"
|
||||
>
|
||||
<a-radio
|
||||
<a-tooltip
|
||||
v-for="(value, keys) in item.list"
|
||||
:value="value"
|
||||
:key="keys"
|
||||
:content="item.tooltip[keys]"
|
||||
background-color="#00bd7e"
|
||||
:mini="true"
|
||||
>
|
||||
{{ value }}
|
||||
</a-radio>
|
||||
<a-radio :value="value">
|
||||
{{ value }}
|
||||
</a-radio>
|
||||
</a-tooltip>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -339,7 +366,7 @@ setInterval(() => {
|
||||
:key="index"
|
||||
:style="flexItemFormStyle[indexKey]"
|
||||
>
|
||||
<a-card :title="(index + 1).toString()" :bordered="false">
|
||||
<a-card :title="(index + 1).toString() +`】`" :bordered="false">
|
||||
<template #extra>
|
||||
<a-button
|
||||
type="text"
|
||||
@ -351,7 +378,7 @@ setInterval(() => {
|
||||
</template>
|
||||
<a-list>
|
||||
<a-list-item>
|
||||
<a-tooltip content="order">
|
||||
<a-tooltip content="order：排列顺序，数值越小，排列越靠前" :mini="true">
|
||||
<a-input-number
|
||||
v-model="flexItemForm[indexKey].order"
|
||||
:min="0"
|
||||
@ -360,7 +387,7 @@ setInterval(() => {
|
||||
</a-tooltip>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-tooltip content="flex-grow">
|
||||
<a-tooltip content="flex-grow：项目的放大比例" :mini="true">
|
||||
<a-input-number
|
||||
v-model="flexItemForm[indexKey]['flex-grow']"
|
||||
:min="0"
|
||||
@ -369,7 +396,7 @@ setInterval(() => {
|
||||
</a-tooltip>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-tooltip content="flex-shrink">
|
||||
<a-tooltip content="flex-shrink：项目的缩小比例" :mini="true">
|
||||
<a-input-number
|
||||
v-model="flexItemForm[indexKey]['flex-shrink']"
|
||||
:min="1"
|
||||
@ -379,7 +406,9 @@ setInterval(() => {
|
||||
</a-tooltip>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-tooltip content="flex-basis">
|
||||
<a-tooltip
|
||||
content="flex-basis：计算主轴是否有多余空间，设为跟width或height属性一样的值，将占据固定空间"
|
||||
:mini="true">
|
||||
<a-input
|
||||
v-model="flexItemForm[indexKey]['flex-basis']"
|
||||
allow-clear
|
||||
@ -387,16 +416,21 @@ setInterval(() => {
|
||||
</a-tooltip>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-tooltip content="align-self">
|
||||
<a-tooltip content="align-self：单个项目有与其他项目不一样的对齐方式，覆盖align-items属性"
|
||||
:mini="true">
|
||||
<a-select
|
||||
v-model="flexItemForm[indexKey]['align-self']"
|
||||
>
|
||||
<a-option
|
||||
v-for="ikeys in itemAlignSelf"
|
||||
<a-tooltip
|
||||
v-for="(ivalue,ikeys) in itemAlignSelf"
|
||||
:key="ikeys"
|
||||
>
|
||||
{{ ikeys }}
|
||||
</a-option>
|
||||
:content="itemAlignSelfTooltip[ikeys]"
|
||||
:mini="true"
|
||||
background-color="#00bd7e">
|
||||
<a-option>
|
||||
{{ ivalue }}
|
||||
</a-option>
|
||||
</a-tooltip>
|
||||
</a-select>
|
||||
</a-tooltip>
|
||||
</a-list-item>
|
||||
|
||||
Reference in New Issue
Block a user