mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化滤镜预设展示

Browse Source
This commit is contained in:
奔跑的面条 2023-07-08 18:36:36 +08:00
parent acfa27baff
commit 52c2929889
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Pages/ChartItemSetting/StylesSetting.vue
View File

@ -72,17 +72,17 @@
<!-- 预设滤镜 --> <!-- 预设滤镜 -->
<div v-if="presetImageList.length" class="preset-filter"> <div v-if="presetImageList.length" class="preset-filter">
<n-image <n-image
v-for="(item, index) in presetImageList" class="preset-img"
:key="index" width="46"
:class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }" preview-disabled
:style="{ filter: `hue-rotate(${item.hueRotate}deg)` }" object-fit="scale-down"
:src="item.src" v-for="(item, index) in presetImageList"
class="preset-img" :key="index"
width="70" :class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
height="50" :style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
preview-disabled :src="item.src"
object-fit="fill" @click="() => (chartStyles.hueRotate = item.hueRotate)"
@click="() => (chartStyles.hueRotate = item.hueRotate)"></n-image> ></n-image>
</div> </div>
<!-- 混合模式 --> <!-- 混合模式 -->
@ -165,12 +165,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, PropType} from 'vue' import { ref, PropType } from 'vue'
import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d' import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting' import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
import { icon } from '@/plugins' import { icon } from '@/plugins'
import logoImg from '@/assets/logo.png' import logoImg from '@/assets/logo.png'
import {presetFilterData} from "@/store/modules/chartEditStore/chartEditStore"; import { useDesignStore } from '@/store/modules/designStore/designStore'
const props = defineProps({ const props = defineProps({
isGroup: { isGroup: {
@ -193,18 +193,21 @@ const { HelpOutlineIcon } = icon.ionicons5
const sliderFormatTooltip = (v: string) => { const sliderFormatTooltip = (v: string) => {
return `${(parseFloat(v) * 100).toFixed(0)}%` return `${(parseFloat(v) * 100).toFixed(0)}%`
} }
// 角度格式化 // 角度格式化
const degFormatTooltip = (v: string) => { const degFormatTooltip = (v: string) => {
return `${v}deg` return `${v}deg`
} }
// 预设滤镜 // 预设滤镜
interface presetImageData { interface presetImageData {
index: number, index: number
src: string, src: string
hueRotate: number hueRotate: number
} }
const presetImageList = ref([] as presetImageData[]) const presetImageList = ref([] as presetImageData[])
for(let i = 1; i <= 12; i ++) { for (let i = 1; i <= 12; i++) {
presetImageList.value.push({ presetImageList.value.push({
index: i, index: i,
src: logoImg, src: logoImg,
@ -222,15 +225,16 @@ for(let i = 1; i <= 12; i ++) {
justify-content: space-between; justify-content: space-between;
.preset-img { .preset-img {
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; padding: 2px;
border-radius: 6px; border-radius: 6px;
transition: 0.2s all; transition: 0.2s all;
cursor: pointer;
&:hover { &:hover {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 2px #66a9c9;
} }
} }
.active-preset { .active-preset {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 2px #66a9c9;
} }
} }
</style> </style>