aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加颜色渐变

Browse Source
This commit is contained in:
X1627315083
2024-04-22 17:18:58 +08:00
parent 2a5cde138e
commit ee5d5075b1
1 changed files with 125 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/component/HomePage/ColorboardUpload.vue
View File

@@ -6,7 +6,7 @@
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':gradient(gradientArr)}">
</div>
</div>
<div>
@@ -49,7 +49,24 @@
</div>
</div>
</div> -->
<!-- <div>1231239817239871923918723</div> -->
<div class="color_setting_operate">
<div class="color_setting_operate_item">
<div class="operate_item_box">
<div>线性</div>
</div>
<div class="operate_item_box">
<div>角度</div>
</div>
<div class="operate_item_box">
<div>删除</div>
</div>
</div>
<div class="color_setting_operate_item color_setting_operate_input">
<div class="color_setting_operate_bg" :style="{'background-image':gradient(gradientArr)}">
</div>
<div v-for="item in gradientArr" :key="item" class="color_setting_operate_btn" :style="{'left':item.left,'background-color':item.color}" @mousedown="mousedownGradient($event,item)" @touchstart="mousedownGradient"></div>
</div>
</div>
</div>
<!-- <div class="color_review_block">
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -125,7 +142,7 @@ import GO from "@/tool/GO";
import { defineComponent, h,ref,inject, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
import {useStore} from 'vuex'
import ColorThief from '@/tool/colorthief/colorthief'
import { message,Upload} from 'ant-design-vue';
@@ -147,6 +164,15 @@ export default defineComponent({
})
let driver__ = inject('driver__')
let {t} = useI18n()
let gradientArr = ref([
{
color:'rgb(244, 187, 51)',
left:'0%'
},{
color:'rgb(39, 193, 191)',
left:'100%'
},
])
return {
fileList,
colorList,
@@ -154,6 +180,7 @@ export default defineComponent({
selectColorList,
driver__,
t,
gradientArr,
}
},
watch:{
@@ -195,6 +222,25 @@ export default defineComponent({
return data
}
},
gradient(gradientArr){
return (gradientArr)=>{
let gradientStr = ''
gradientArr.sort((a, b) => {
let aArr = a.left.split('%')[0]
let bArr = b.left.split('%')[0]
return aArr - bArr;
});
gradientArr.forEach((item,index)=>{
let str = ','
if(gradientArr.length == index+1)str = ''
gradientStr += `${item.color} ${item.left}${str}`
})
console.log('linear-gradient(50deg, '+gradientStr+')');
return 'linear-gradient(50deg, '+gradientStr+')'
}
}
},
data(){
return{
@@ -514,7 +560,31 @@ export default defineComponent({
this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
this.store.commit('setColorboardList',colorList)
},
mousedownGradient(event,item){
// console.log(event.target.getBoundingClientRect());
// console.log(event.target.style.left.split('%'));
event.stopPropagation();
// isMoible() true为移动端
// if
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
let position = {
x:event.x,
left:event.target.style.left?event.target.style.left.split('%')[0]:0
}
let mousedownGradient = (e)=>{
let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
left = (left<0?0:left>100?100:left)
// event.target.style.left = (left<0?0:left>100?100:left)+'%'
item.left = left+'%'
}
let mouseupGradient = ()=>{
window.removeEventListener('mousemove',mousedownGradient)
window.removeEventListener('mouseup',mouseupGradient)
}
window.addEventListener('mousemove',mousedownGradient)
window.addEventListener('mouseup',mouseupGradient)
// event.target.addEventListener('touchmove',)
}
}
})
@@ -842,31 +912,7 @@ export default defineComponent({
}
}
.sileder_color{
margin-top:calc(1.3rem*1.2);
.vc-slider-swatches{
display:none
}
.vc-slider-hue-warp {
width: calc(16.5rem*1.2);
height: calc(2.4rem*1.2);
border-radius: calc(1.2rem*1.2);
overflow: hidden;
.vc-hue-picker{
width: calc(1.4rem*1.2);
height: calc(1.4rem*1.2);
border-radius: 50%;
transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
}
}
.vc-hue-pointer{
top: calc(0.5rem*1.2) !important;
}
}
.color_block{
// margin-top: calc(1rem;
// display: flex;
@@ -880,7 +926,7 @@ export default defineComponent({
justify-content: space-between;
align-items: center;
.color_right{
width: calc(11rem*1.2);
width: 13rem;
font-size: calc(1.2rem*1.2);
color: #666666;
.color_rgb_block{
@@ -900,14 +946,14 @@ export default defineComponent({
align-items: center;
}
.color_HEX_block,.color_rgb_block{
padding: calc(.2rem*1.2) calc(.5rem*1.2);
padding: .25rem .6rem;
box-shadow: inset 0 0 0 1px #ccc;
border-radius: calc(.4rem*1.2);
border-radius: .5rem;
justify-content: space-around;
text-transform:uppercase;
.color_block_bg{
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
width: 1.8rem;
height: 2.5rem;
// margin-right: .5rem;
display: flex;
justify-content: space-between;
@@ -918,6 +964,51 @@ export default defineComponent({
}
}
.color_setting_operate{
*{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.color_setting_operate_item{
display: flex;
justify-content: space-around;
}
.color_setting_operate_input{
width: 80%;
// padding: 0 10%;
margin: 1.2rem 10%;
border-radius: 10%;
position: relative;
height: 2.5rem;
.color_setting_operate_bg{
border-radius: .5rem;
width: 100%;
height: 2.5rem;
background: #fff;
position: absolute;
}
}
.color_setting_operate_btn{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
left: 0;
width: 1rem;
height: 110%;
border: .2rem solid;
border-radius: .5rem;
cursor: pointer;
box-sizing: content-box;
z-index: 2;
}
.color_setting_operate_btn:hover{
border: .3rem solid;
}
}
}
.get_color_block{
display: flex;