😎主题色增加十六进制色标显示及点选复制

This commit is contained in:
zuohuaijun 2024-06-23 02:10:12 +08:00
parent 4047cf6e5c
commit dbcadf2ef8

View File

@ -447,7 +447,7 @@
<div class="traditionalColors" :style="'background:' + i.hex"> <div class="traditionalColors" :style="'background:' + i.hex">
<el-icon class="traditionalColors-circleCheck" v-if="getThemeConfig.primary == i.hex" size="20" color="#fff"><ele-CircleCheck /></el-icon> <el-icon class="traditionalColors-circleCheck" v-if="getThemeConfig.primary == i.hex" size="20" color="#fff"><ele-CircleCheck /></el-icon>
</div> </div>
<div class="mt5 traditionalColors-chines">{{ i.name }}</div> <div class="traditionalColors-chines mt10" style="cursor: grab;">{{ i.name }}</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -483,6 +483,7 @@ const state = reactive({
// //
const cliChineseColor = (e) => { const cliChineseColor = (e) => {
navigator.clipboard.writeText(e)
getThemeConfig.value.primary = e; getThemeConfig.value.primary = e;
onColorPickerChange(); onColorPickerChange();
}; };
@ -889,4 +890,17 @@ defineExpose({
} }
} }
} }
.traditionalColors{
height: 50px;
position: relative;
}
.traditionalColors-chines{
text-align: center;
}
.traditionalColors-circleCheck{
position: absolute;
left: calc(50% - 10px);
top: calc(50% - 10px);
}
</style> </style>