You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.1 KiB
110 lines
3.1 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-02-23 14:58:56
|
|
@ 备注: 组件背景
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
|
|
const props = defineProps({
|
|
layouytStyle:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
}
|
|
});
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-02-23 15:19:57
|
|
@ 功能: 监听颜色
|
|
*/
|
|
watch(()=>props.layouytStyle.backgroundColor,(val : any)=>{
|
|
// console.log("监听颜色-----1--->",val)
|
|
if(val == null || val.length == 0 || val == ""){
|
|
delete props.layouytStyle.backgroundColor;
|
|
}
|
|
// Object.assign(store.controlAttr.styles.divStyle, val)
|
|
},
|
|
{
|
|
deep: true
|
|
});
|
|
const transparency = ref(100)
|
|
watch(()=>transparency,(val : any)=>{
|
|
// if(val.value == null || val.value.length == 0 || val.value == "" || val.value == 0 || val.value == "0"){
|
|
// delete props.layouytStyle.transparency;
|
|
// }else{
|
|
// props.layouytStyle.transparency = val.value
|
|
// }
|
|
props.layouytStyle.transparency = val.value
|
|
},
|
|
{
|
|
deep: true
|
|
});
|
|
if(props.layouytStyle.transparency){
|
|
if(props.layouytStyle.transparency == "" || props.layouytStyle.transparency == null){
|
|
props.layouytStyle.transparency = 100
|
|
}
|
|
}else{
|
|
props.layouytStyle.transparency = 100
|
|
}
|
|
// if(props.layouytStyle.backgroundColor){
|
|
// if(props.layouytStyle.backgroundColor == "" || props.layouytStyle.backgroundColor == null){
|
|
// props.layouytStyle.backgroundColor = 'rgba(255, 255, 255, 1)'
|
|
// }
|
|
// }else{
|
|
// props.layouytStyle.backgroundColor = 'rgba(255, 255, 255, 1)'
|
|
// }
|
|
const predefineColorsd = ref([
|
|
'#ff4500',
|
|
'#ff8c00',
|
|
'#ffd700',
|
|
'#90ee90',
|
|
'#00ced1',
|
|
'#1e90ff',
|
|
'#c71585',
|
|
'rgba(255, 69, 0, 0.68)',
|
|
'rgb(255, 120, 0)',
|
|
'hsv(51, 100, 98)',
|
|
'hsva(120, 40, 94, 0.5)',
|
|
'hsl(181, 100%, 37%)',
|
|
'hsla(209, 100%, 56%, 0.73)',
|
|
'#c7158577',
|
|
])
|
|
</script>
|
|
<template>
|
|
<table style="width:94%; margin-left:3%">
|
|
<tr>
|
|
<td width="50">颜色</td>
|
|
<td>
|
|
<el-color-picker v-model="props.layouytStyle.backgroundColor" :predefine="predefineColorsd" show-alpha size="default" />
|
|
|
|
{{ props.layouytStyle.backgroundColor }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>透明度</td>
|
|
<td>
|
|
<el-row :gutter="15">
|
|
<el-col :span="14">
|
|
<el-slider v-model="props.layouytStyle.transparency" :min="0" :max="100" />
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-input
|
|
v-model="props.layouytStyle.transparency"
|
|
disabled
|
|
:formatter="(value) => `${value} %`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
|
|
:parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
|
|
input-style="text-align: right;"
|
|
/>
|
|
|
|
</el-col>
|
|
</el-row>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.text_right{
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
|