Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2024-09-03 10:37:04 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
8756509f49f01a7af773031b4a51e984be4f263a
8756509f
1 parent
aba0fcd5
fix 细节处理
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
15 additions
and
12 deletions
src/components/DividerField/index.vue
src/components/DividerField/index.vue
View file @
8756509
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-0
2 17:17:26
* @LastEditTime: 2024-09-0
3 10:20:07
* @FilePath: /data-table/src/components/DividerField/index.vue
* @Description: 分隔线组件
-->
<template>
<div class="divider-field-page">
<div v-if="styleType === 'type1'" class="type1">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">
字段标题
</div>
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">
{{ dividerTitle }}
</div>
</div>
<div v-if="styleType === 'type2'" class="type2">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">
字段标题
</div>
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">
{{ dividerTitle }}
</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="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">
{{ dividerTitle }}
</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="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">
{{ dividerTitle }}
</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>
<span>
{{ dividerTitle }}
</span>
</div>
<div class="sep-right">
<div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
...
...
@@ -37,14 +37,14 @@
</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-field-label" :style="{ color: titleColor }">
{{ dividerTitle }}
</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>
<span>
{{ dividerTitle }}
</span>
</div>
</div>
</div>
...
...
@@ -55,7 +55,7 @@
<div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
</div>
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
<span>
字段标题
</span>
<span>
{{ dividerTitle }}
</span>
</div>
</div>
</div>
...
...
@@ -64,7 +64,7 @@
<div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
<div class="sep-center">
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
<span>
字段标题
</span>
<span>
{{ dividerTitle }}
</span>
</div>
<div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
<div class="left-border" :style="{ backgroundColor: bgColor}"></div>
...
...
@@ -83,7 +83,7 @@
<div class="left-line2" :style="{ borderColor: bgColor }"></div>
</div>
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
<span>
字段标题
</span>
<span>
{{ dividerTitle }}
</span>
</div>
<div class="right-wrapper">
<div class="right-block" :style="{ backgroundColor: bgColor}"></div>
...
...
@@ -94,7 +94,7 @@
</div>
</div>
</div>
<div class="fx-sub-html"
>这里是字段的描述信息
</div>
<div class="fx-sub-html"
v-html="desc">
</div>
</div>
</template>
...
...
@@ -111,6 +111,9 @@ const titleColor = ref('');
const styleType = ref('type5');
const dividerTitle = ref('分割标题');
const desc = ref('<b>描述信息</b>');
onMounted(() => {
// styleObj.value = {
// color: props.item.component_props.color,
...
...
Please
register
or
login
to post a comment