新增各选项提示信息
This commit is contained in:
cloud
parent
ac5e59b0d4
commit
11328154b5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,8 +5,8 @@
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS3 Flexbox 在线演示---语言爱好网</title>
|
||||
<script type="module" crossorigin src="/assets/index.a7dc6faf.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index.17ce6544.css">
|
||||
<script type="module" crossorigin src="/assets/index.2e2d7739.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index.844ff92c.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue