cloud/flexbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码调整优化

Browse Source
This commit is contained in:
cloud
2022-11-06 13:07:36 +08:00
parent 8e556c3ba7
commit b6207089ae
9 changed files with 2334 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

441
src/App.vue
View File

@@ -128,7 +128,7 @@ let flexContainerFormStyle: { [key: string]: any } = reactive({});
const flexContainerFormStyleFun = () => {
Object.keys(flexContainerForm).forEach((key) => {
flexContainerFormStyle["display"] = "flex";
flexContainerFormStyle["height"] = "95%";
flexContainerFormStyle["height"] = "100%";
flexContainerFormStyle["minHeight"] = "160px";
flexContainerFormStyle["padding"] = "10px";
flexContainerFormStyle["backgroundColor"] = "goldenrod";
@@ -198,8 +198,9 @@ const fiexSubmitHtml = () => {
const fiexSubmitCss = () => {
/** 增加CSS外层{} */
const addKuohao = (css: string) => {
return `{` + css + `}`;
return `{` + '\n' + css + '\n' + `}`;
};
const flexboxitemDom = fiexBoxDom.value.querySelectorAll(".flexboxitem");
let css: string = ".flex-item{display: inline-block; min-height: 80px; background-color: cornsilk; margin: 5px; overflow: hidden;}";
flexboxitemDom.forEach((dom: any, index: string) => {
@@ -265,98 +266,107 @@ setInterval(() => {
</script>
<template>
<div class="layout">
<a-layout>
<a-layout-header>
<h1><strong>CSS3 Flexbox 在线演示</strong></h1>
</a-layout-header>
<a-layout-content>
<a-row class="flexrow">
<a-col class="arcocol">
<h3>子项宽度</h3>
<div>
<span>Width：{{ itemWidth }}</span>
<a-layout class="layout">
<a-layout-header>
<a-typography-title bold>CSS3 Flexbox 在线演示</a-typography-title>
</a-layout-header>
<a-layout-content>
<a-row class="layout-content-box" justify="justify-content" :wrap="false" :gutter="15"
:style="{ alignItems: 'stretch',flexGrow:1}">
<a-col :md="12" :span="24">
<div class="mainContent">
<a-typography-title :heading="4" bold>子项宽度</a-typography-title>
<a-space fill size="medium" class="itemWidth">
<a-typography-text>宽度</a-typography-text>
<a-input-number
:style="{ width: '80px' }"
:min="10"
:max="100"
v-model="itemWidth">
<template #suffix>%</template>
</a-input-number>
<a-slider
v-model="itemWidth"
:min="10"
:max="100"
:step="1"
:style="{ paddingLeft: '10px', width: '90%' }"
show-ticks
/>
</div>
<a-divider :margin="20" :size="2">
<icon-heart/>
</a-divider>
<h3>父Flex属性–Flex容器</h3>
<div>
<a-form :model="flexContainerForm">
<a-row class="flexcontainer">
<a-col
class="acol"
v-for="(item, key) in flexContainerList"
:key="key"
>
<h4>
<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-tooltip
v-for="(value, keys) in item.list"
:key="keys"
:content="item.tooltip[keys]"
background-color="#00bd7e"
:mini="true"
>
<a-radio :value="value">
{{ value }}
</a-radio>
</a-tooltip>
</a-radio-group>
</a-col>
</a-row>
<a-button
@click="fiexSubmit"
:style="{ marginTop: '15px' }"
type="primary"
status="success">
获取
</a-button>
<a-alert
type="success"
:show-icon="false"
:style="{ padding: '20px',paddingRight:'35px', marginTop: '15px' }"
v-if="fiexBoxDomHtml || fiexBoxCssString || fiexItemCssString"
</a-space>
<a-typography-title :heading="4" bold>父Flex属性–Flex容器</a-typography-title>
<a-row justify="justify-content" :wrap="false">
<a-col
class="containerCol"
v-for="(item, key) in flexContainerList"
:key="key"
>
<a-typography-title :heading="6" bold>
<a-tooltip
:content="item.titleTooltip"
background-color="goldenrod"
mini>
<strong>{{ item.title }}</strong>
</a-tooltip>
</a-typography-title>
<a-radio-group
direction="vertical"
v-model="flexContainerForm[key]"
>
<a-badge text="HTML" :style="{userSelect:'none'}">
<a-alert type="error" :show-icon="false" :style="{userSelect:'text'}">{{ fiexBoxDomHtml }}</a-alert>
</a-badge>
<a-divider/>
<a-badge text="CSS-1" :style="{userSelect:'none'}">
<a-alert type="success" :show-icon="false" :style="{userSelect:'text'}">
{{ fiexBoxCssString }}
</a-alert>
</a-badge>
<a-divider/>
<a-badge text="CSS-2" :style="{userSelect:'none'}">
<a-alert type="success" :show-icon="false" :style="{userSelect:'text'}">
{{ fiexItemCssString }}
</a-alert>
</a-badge>
<a-divider/>
</a-alert>
</a-form>
<a-tooltip
v-for="(value, keys) in item.list"
:key="keys"
:content="item.tooltip[keys]"
background-color="#00bd7e"
mini
>
<a-radio :value="value">
{{ value }}
</a-radio>
</a-tooltip>
</a-radio-group>
</a-col>
</a-row>
<a-button
@click="fiexSubmit"
:style="{margin:'1em 0'}"
type="primary"
status="success" long>
生成
</a-button>
<div class="mainContentBox">
<a-split :style="{
height: '100%',
width: '100%',
backgroundColor:'var(--color-neutral-2)',
maxHeight:'358px'
}">
<template #first>
<a-split direction="vertical" :style="{height: '99.9%'}">
<template #first>
<a-typography-paragraph copyable>
<highlightjs language="html" :autodetect="false" :code="fiexBoxDomHtml"></highlightjs>
</a-typography-paragraph>
</template>
<template #second>
<a-typography-paragraph copyable>
<highlightjs language="css" :autodetect="false" :code="fiexBoxCssString"></highlightjs>
</a-typography-paragraph>
</template>
</a-split>
</template>
<template #second>
<a-typography-paragraph copyable>
<highlightjs language="css" :autodetect="false" :code="fiexItemCssString"></highlightjs>
</a-typography-paragraph>
</template>
</a-split>
</div>
</a-col>
<a-col class="arcocol" :style="{ padding: '20px 5px' }">
<h3>
</div>
</a-col>
<a-col :md="12" :span="24">
<div class="mainContent">
<a-typography-title :heading="4" bold>
实现效果
<a-button
type="primary"
@@ -368,8 +378,8 @@ setInterval(() => {
</template>
新增子项
</a-button>
</h3>
<div :style="{ height: '100%' }">
</a-typography-title>
<div class="mainContentBox">
<div
class="flexbox"
:style="flexContainerFormStyle"
@@ -395,7 +405,7 @@ setInterval(() => {
</template>
<a-list>
<a-list-item>
<a-tooltip content="order：排列顺序，数值越小，排列越靠前" :mini="true">
<a-tooltip content="order：排列顺序，数值越小，排列越靠前" mini>
<a-input-number
v-model="flexItemForm[indexKey].order"
:min="0"
@@ -404,7 +414,7 @@ setInterval(() => {
</a-tooltip>
</a-list-item>
<a-list-item>
<a-tooltip content="flex-grow：项目的放大比例" :mini="true">
<a-tooltip content="flex-grow：项目的放大比例" mini>
<a-input-number
v-model="flexItemForm[indexKey]['flex-grow']"
:min="0"
@@ -413,7 +423,7 @@ setInterval(() => {
</a-tooltip>
</a-list-item>
<a-list-item>
<a-tooltip content="flex-shrink：项目的缩小比例" :mini="true">
<a-tooltip content="flex-shrink：项目的缩小比例" mini>
<a-input-number
v-model="flexItemForm[indexKey]['flex-shrink']"
:min="1"
@@ -425,7 +435,7 @@ setInterval(() => {
<a-list-item>
<a-tooltip
content="flex-basis：计算主轴是否有多余空间，设为跟width或height属性一样的值，将占据固定空间"
:mini="true">
mini>
<a-input
v-model="flexItemForm[indexKey]['flex-basis']"
allow-clear
@@ -434,7 +444,7 @@ setInterval(() => {
</a-list-item>
<a-list-item>
<a-tooltip content="align-self：单个项目有与其他项目不一样的对齐方式，覆盖align-items属性"
:mini="true">
mini>
<a-select
v-model="flexItemForm[indexKey]['align-self']"
>
@@ -442,7 +452,7 @@ setInterval(() => {
v-for="(ivalue,ikeys) in itemAlignSelf"
:key="ikeys"
:content="itemAlignSelfTooltip[ikeys]"
:mini="true"
mini
background-color="#00bd7e">
<a-option>
{{ ivalue }}
@@ -456,116 +466,159 @@ setInterval(() => {
</div>
</div>
</div>
</a-col>
</a-row>
</a-layout-content>
<a-layout-footer ref="showTimeDom">
<a-row class="footer" :gutter="24">
<a-col :span="12">
<div>{{ showTime }}</div>
</a-col>
<a-col :span="12">
<span :style="{padding:'0 10px'}">Copyright © 2015-{{ showTimeYear }}</span>
<a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/"> 鲁ICP备10001546号 </a>
</a-col>
</a-row>
</div>
</a-col>
</a-row>
</a-layout-content>
<a-layout-footer ref="showTimeDom">
<a-divider :margin="10" :size="2">
<icon-heart/>
</a-divider>
<a-row class="footer" :gutter="24">
<a-col :span="12">
<a-typography-text type="success">{{ showTime }}</a-typography-text>
</a-col>
<a-col :span="12">
<a-typography-text type="success">
Copyright © 2015-{{ showTimeYear }}
<a-link target="_blank" href="https://beian.miit.gov.cn/" status="success" rel="noopener">鲁ICP备10001546号
</a-link>
</a-typography-text>
</a-col>
</a-row>
</a-layout-footer>
</a-layout>
</div>
</a-layout-footer>
</a-layout>
</template>
<style scoped>
h3 {
font-weight: 700;
padding-bottom: 15px;
<style lang="less" scoped>
.arco-layout {
height: 100vh;
.arco-layout-header,
.arco-layout-footer,
.arco-layout-content {
display: flex;
/*垂直排列*/
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
padding: 15px;
}
.arco-layout-header,
.arco-layout-footer {
height: 64px;
background-color: #00bd7e;
}
//头部
:deep(.arco-layout-header) {
.arco-typography {
margin: 0;
}
}
//底部
.arco-layout-footer {
background-color: transparent;
.arco-link {
font-size: initial;
}
}
}
/**
效果实现
*/
.flexbox :deep(.arco-card-size-medium .arco-card-body) {
padding: 5px;
}
.flexbox :deep(.arco-list-bordered) {
border: none;
}
.flexbox :deep(.arco-input-wrapper),
.flexbox :deep(.arco-select-view-single) {
background-color: transparent;
}
.flexboxitem {
min-height: 80px;
background-color: cornsilk;
display: inline-block;
margin: 5px;
overflow: hidden;
}
.flexboxitem :deep(.arco-card) {
background: transparent;
}
.flexboxitem :deep(.arco-list-wrapper),
.flexboxitem :deep(.arco-list-medium .arco-list-content-wrapper .arco-list-content > .arco-list-item) {
padding: 0;
}
.layout,
.layout :deep(.arco-layout) {
height: 100%;
}
.layout :deep(.arco-layout-header),
.layout :deep(.arco-layout-footer),
.layout :deep(.arco-layout-content) {
display: flex;
flex-direction: column;
justify-content: center;
/*color: var(--color-white);*/
font-size: 16px;
font-stretch: condensed;
text-align: center;
}
.layout :deep(.arco-layout-header),
.layout :deep(.arco-layout-footer) {
height: 64px;
background-color: #00bd7e;
}
.layout :deep(.arco-layout-footer) {
background-color: transparent;
}
.layout :deep(.arco-layout-content) {
/*background-color: goldenrod;*/
}
.flexrow,
.flexcontainer {
/*color: var(--color-white);*/
align-items: stretch;
height: 100%;
//内容
.arco-layout :deep(.arco-layout-content) {
text-align: left;
height: calc(100vh - 64px - 64px);
padding-top: 0;
.layout-content-box {
.itemWidth .arco-space-item:last-child {
flex-grow: 1;
.arco-slider-ticks .arco-slider-tick {
margin-top: 5px;
}
}
.containerCol {
flex: 1 0 20%;
width: 20%;
flex-basis: 0;
}
.mainContent {
display: flex;
flex-direction: column;
height: 100%;
.mainContentBox {
flex-grow: 1;
pre {
white-space: normal;
code {
background: #23241f;
color: #f8f8f2;
//padding: 10px;
border: none;
}
}
.flexbox {
min-height: 300px;
.flexboxitem {
//min-height: 80px;
background-color: cornsilk;
display: inline-block;
margin: 5px;
overflow: hidden;
.arco-card {
background: transparent;
.arco-card-body {
padding: 5px;
.arco-list-wrapper,
.arco-list-medium .arco-list-content-wrapper .arco-list-content > .arco-list-item {
padding: 0;
}
.arco-list-bordered {
border: none;
.arco-input-wrapper,
.arco-select-view-single {
background-color: transparent;
}
}
}
}
}
}
}
}
}
}
.flexrow .arcocol {
flex: 1 1 50%;
padding: 20px;
color: #181818;
}
.flexcontainer .acol {
flex: 1 0 20%;
/*flex-basis: 0;*/
}
@media (max-width: 768px) {
.arco-layout :deep(.arco-layout-content) {
height: auto;
.footer {
color: hsla(160, 100%, 37%, 1);
.layout-content-box {
flex-wrap: nowrap;
}
}
}
</style>

1
src/assets/main.css
View File

@@ -4,6 +4,7 @@ body {
/*display: flex;*/
/*place-items: center;*/
background-color: #ffffff;
font-size: 16px;
}
#app {

7
src/main.ts
View File

@@ -4,7 +4,14 @@ import App from './App.vue'
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import './assets/main.css'
// 代码高亮
// import 'highlight.js/styles/base16/darcula.css'
import 'highlight.js/styles/monokai-sublime.css'
// import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
const app = createApp(App);
app.use(ArcoVueIcon);
app.use(hljsVuePlugin)
app.mount('#app');