gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-1812 style：value mapping修改icon选择器样式

Browse Source
This commit is contained in:
18317449825
2022-05-17 13:40:08 +08:00
parent b3382bb99a
commit 0946cd5c61
6 changed files with 84 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -668,26 +668,29 @@
<div>
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div>
<el-popover
placement="top-start"
trigger="manual"
popper-class="mapping-iconPop no-style-class"
v-clickoutside="()=>{closeChoose(index)}"
v-model="isChoose[index]"
>
<ul class="mapping-iconList">
<li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
<i :class="subItem.value"></i>
</li>
</ul>
<div class="mapping-iconSelect" slot="reference" @click="chooseIcon(isChoose[index],index)">
<i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
<span v-else>{{$t('el.select.placeholder')}}</span>
<i class="el-icon-arrow-down" :class="{'is-active':isChoose[index]}"></i>
</div>
</el-popover>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
<el-popover
slot="prefix"
placement="top-start"
trigger="manual"
popper-class="mapping-iconPop no-style-class"
v-clickoutside="()=>{closeChoose(index)}"
v-model="isChoose[index]"
>
<ul class="mapping-iconList">
<li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
<i :class="subItem.value"></i>
</li>
</ul>
<div slot="reference" @click="chooseIcon(isChoose[index],index)">
<i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
<div v-else class="mapping-iconSelect">
<i class="nz-icon nz-icon-create-square"></i>
</div>
</div>
</el-popover>
</el-input>
</el-form-item>
<nezhaColor
:color-val="item.color"