Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e843bbcd 1 parent 7d216d95

完善分割线显示多种类型

Inline Side-by-side
Showing 1 changed file with 378 additions and 12 deletions
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-29 14:52:43
* @LastEditTime: 2024-09-02 14:47:57
* @FilePath: /data-table/src/components/DividerField/index.vue
* @Description: 分隔线组件
-->
<template>
<div class="divider-field-page">
<div v-if="styleType === 'type1'" class="type1"></div>
<div v-if="styleType === 'type2'" class="type2">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div>
</div>
<div v-if="styleType === 'type3'" class="type3">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ borderTop: '1px solid', borderColor: bgColor }"></div>
</div>
<div v-if="styleType === 'type4'" class="type4">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ borderTop: '2px solid', borderColor: bgColor }"></div>
</div>
<div v-if="styleType === 'type5'" class="type5">
<div class="sep-line">
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
<span>字段标题</span>
......@@ -19,6 +33,66 @@
<div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div>
</div>
</div>
</div>
<div v-if="styleType === 'type6'" class="type6">
<div class="sep-style-select-field-label" :style="{ color: titleColor }">字段标题</div>
<div class="sep-style-select-item">
<div class="sep-line">
<div class="sep-bg-wrapper">
<div class="sep-bg" :style="{ borderColor: bgColor }"></div>
</div>
<div class="sep-label" style="background-color: rgb(250, 129, 24);">
<span>字段标题</span>
</div>
</div>
<!-- <div class="fx-sub-html">这里是字段的描述信息</div> -->
</div>
</div>
<div v-if="styleType === 'type7'" class="type7">
<div class="sep-line">
<div class="sep-bg-wrapper">
<div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
</div>
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
<span>字段标题</span>
</div>
</div>
</div>
<div v-if="styleType === 'type8'" class="type8">
<div class="sep-line">
<div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
<div class="sep-center">
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
<span>字段标题</span>
</div>
<div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
<div class="left-border" :style="{ backgroundColor: bgColor}"></div>
<div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
<div class="right-border" :style="{ backgroundColor: bgColor}"></div>
</div>
</div>
</div>
<div v-if="styleType === 'type9'" class="type9">
<div class="sep-line">
<div class="left-wrapper">
<div class="left-block" :style="{ backgroundColor: bgColor}"></div>
<div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
<div class="left-square"></div>
<div class="left-line1" :style="{ borderColor: bgColor }"></div>
<div class="left-line2" :style="{ borderColor: bgColor }"></div>
</div>
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
<span>字段标题</span>
</div>
<div class="right-wrapper">
<div class="right-block" :style="{ backgroundColor: bgColor}"></div>
<div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
<div class="right-square"></div>
<div class="right-line1" :style="{ borderColor: bgColor }"></div>
<div class="right-line2" :style="{ borderColor: bgColor }"></div>
</div>
</div>
</div>
<div class="fx-sub-html">这里是字段的描述信息</div>
</div>
</template>
......@@ -34,30 +108,33 @@ const styleBorder = ref({});
const bgColor = ref('');
const titleColor = ref('');
const styleType = ref('type8');
onMounted(() => {
// styleObj.value = {
// color: props.item.component_props.color,
// borderColor: props.item.component_props.color,
// padding: props.item.component_props.padding,
// };
styleTitle.value = {
color: "blue",
fontSize: "0.9rem",
};
styleBorder.value = {
border: "1px dashed",
borderColor: "red",
margin: "5px 0",
};
// styleTitle.value = {
// color: "blue",
// fontSize: "0.9rem",
// };
// styleBorder.value = {
// border: "1px dashed",
// borderColor: "red",
// margin: "5px 0",
// };
titleColor.value = 'rgb(250, 250, 24)';
bgColor.value = 'rgb(240, 168, 0)';
titleColor.value = '#FFF';
bgColor.value = '#FA8118';
});
</script>
<style lang="less" scoped>
.divider-field-page {
padding: 1rem 1rem 0 1rem;
.type5 {
.sep-line {
display: -webkit-box;
display: -ms-flexbox;
......@@ -134,6 +211,295 @@ onMounted(() => {
width: 8px;
}
}
}
.type6 {
.sep-style-select-field-label {
font-size: 14px;
line-height: 20px;
margin-bottom: 5px;
}
.sep-style-select-item {
-webkit-transform: scale(.8);
transform: scale(.8);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
width: 125%;
.sep-line {
height: 8px;
position: relative;
.sep-bg-wrapper {
bottom: 0;
left: 0;
padding-left: 8px;
position: absolute;
right: 0;
.sep-bg {
border-bottom: 4px solid;
height: 0;
opacity: .2;
width: 100%;
}
}
.sep-label {
border-radius: 0 8px;
bottom: 0;
left: 0;
max-width: 81%;
min-width: 1.25rem;
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
top: 0;
white-space: nowrap;
span {
visibility: hidden;
}
}
}
}
}
.type7 {
.sep-line {
height: 28px;
position: relative;
.sep-bg-wrapper {
bottom: 0;
left: 0;
padding-left: 20px;
position: absolute;
right: 0;
top: 0;
.sep-bg {
height: 100%;
opacity: .2;
width: 100%;
}
}
.sep-label {
border-radius: 14px 0;
bottom: 0;
-webkit-box-sizing: content-box;
box-sizing: content-box;
font-weight: 600;
left: 0;
line-height: 28px;
max-width: 76%;
min-width: 7%;
overflow: hidden;
padding: 0 20px;
position: absolute;
text-overflow: ellipsis;
top: 0;
white-space: nowrap;
}
}
}
.type8 {
.sep-line {
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 38px;
justify-content: center;
position: relative;
.sep-bg {
border-radius: 16px 16px 0 0;
bottom: 0;
height: 28px;
left: 0;
opacity: .15;
position: absolute;
right: 0;
}
.sep-center {
-webkit-box-sizing: content-box;
box-sizing: content-box;
max-width: 50%;
min-width: 7%;
overflow: hidden;
padding: 0 38px;
position: relative;
.sep-label {
font-weight: 600;
height: 100%;
line-height: 38px;
overflow: hidden;
padding: 0 1px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.left-triangle {
height: 10px;
left: 0;
position: absolute;
top: 0;
-webkit-transform: skew(-60deg) translateX(50%);
transform: skew(-60deg) translateX(50%);
width: 18px;
}
.left-border {
border-radius: 0 0 0 16px;
bottom: 0;
left: 18px;
position: absolute;
top: 0;
width: 21px;
}
.right-triangle {
height: 10px;
position: absolute;
right: 0;
top: 0;
-webkit-transform: skew(60deg) translateX(-50%);
transform: skew(60deg) translateX(-50%);
width: 18px;
}
.right-border {
border-radius: 0 0 16px;
bottom: 0;
position: absolute;
right: 18px;
top: 0;
width: 21px;
}
}
}
}
.type9 {
-webkit-transform: scale(.8);
transform: scale(.8);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
width: 125%;
.sep-line {
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 28px;
justify-content: center;
overflow: hidden;
position: relative;
.left-wrapper {
width: 110px;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
position: relative;
.left-block {
width: 33px;
bottom: 0;
position: absolute;
right: -1px;
top: 0;
}
.left-triangle {
right: 32px;
height: 20px;
position: absolute;
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
width: 20px;
}
.left-square {
right: 25px;
background: #fff;
height: 10px;
position: absolute;
top: 9px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
.left-line1 {
width: 28px;
border-top: 1px solid;
height: 0;
left: 27px;
position: absolute;
top: 9px;
}
.left-line2 {
width: 55px;
border-bottom: 1px solid;
bottom: 8px;
height: 0;
left: 0;
position: absolute;
}
}
.sep-label {
font-weight: 600;
height: 100%;
line-height: 28px;
max-width: 54%;
min-width: 10%;
overflow: hidden;
padding: 0 1px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.right-wrapper {
width: 110px;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
position: relative;
.right-block {
width: 33px;
bottom: 0;
left: -1px;
position: absolute;
top: 0;
}
.right-triangle {
left: 32px;
height: 20px;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 20px;
}
.right-square {
left: 25px;
background: #fff;
height: 10px;
position: absolute;
top: 9px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
.right-line1 {
width: 28px;
border-top: 1px solid;
height: 0;
position: absolute;
right: 27px;
top: 9px;
}
.right-line2 {
width: 55px;
border-bottom: 1px solid;
bottom: 8px;
height: 0;
position: absolute;
right: 0;
}
}
}
}
.fx-sub-html {
color: #000;
font-size: 0.85rem;
......