基于uniapp开发
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.
 
 
 
 

152 lines
3.1 KiB

<template>
<view>
<uni-transition ref="trans" mode-class="fade" :duration="0" :show="true" >
<uni-search-bar @confirm="search" v-model="searchValue" @cancel="cancel" @clear="clear" @input="input"
placeholder="请输入色彩名称">
</uni-search-bar>
<view class="content">
<view class="card-padding">
<uni-row style="padding-bottom: 50px">
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" v-for="(item,index) in colors"
:key="index">
<ColorPanel :hsb="hsb(item.hexadecimal.substring(1,))" name="item.name" @clickPanel="onClickPanel" :name="item.name"></ColorPanel>
<view style="padding-bottom: 10px;"></view>
</uni-col>
</uni-row>
</view>
</view>
</uni-transition>
</view>
</template>
<script>
import {
chineseColors
} from '../../common/chineseColors.js';
export default {
data() {
return {
colors: chineseColors,
searchValue: "",
}
},
onReady() {
this.$refs.trans.init({
duration: 2000,
timingFunction: 'ease-in-out',
delay: 500,
});
},
methods: {
onClickPanel(hex) {
// this.$refs.trans.step({
// backgroundColor: "#" + hex,
// });
// // 开始执行动画
// this.$refs.trans.run(() => {});
},
input(res) {
if (res === "") {
this.colors = chineseColors;
}
},
cancel(res) {
res.value = "";
this.colors = chineseColors;
},
search(res) {
this.colors = chineseColors.filter(x => x.name.includes(res.value));
},
clear(res) {
res.value = "";
this.colors = chineseColors;
},
// focus(res) {
// res.value = "";
// this.colors = chineseColors;
// },
// 将hex转换为rgb
hexToRgb(hex) {
// 将hex切割为rgb数组
const hexArr = hex.match(/[\s\S]{1,2}/g) || []
// 转换为10进制数组
const rgbArr = hexArr.map(hex => parseInt(hex, 16));
return {
r: rgbArr[0],
g: rgbArr[1],
b: rgbArr[2],
a: 1,
}
},
// 将rgb转化为hsb
hsb(hex) {
const rgb = this.hexToRgb(hex);
let hsb = {
h: 0,
s: 0,
b: 0,
};
let min = Math.min(rgb.r, rgb.g, rgb.b);
let max = Math.max(rgb.r, rgb.g, rgb.b);
let delta = max - min;
hsb.b = max;
hsb.s = max != 0 ? 255 * delta / max : 0;
if (hsb.s != 0) {
if (rgb.r === max) {
hsb.h = (rgb.g - rgb.b) / delta;
} else if (rgb.g === max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1;
}
hsb.h *= 60;
if (hsb.h < 0) hsb.h = 0;
hsb.s *= 100 / 255;
hsb.b *= 100 / 255;
return hsb;
}
}
}
</script>
<style scoped>
.content {
width: 100vw;
height: 100vh;
}
.card-padding {
padding-left: 20px;
padding-top: 15px;
}
.search-result {
padding-top: 10px;
padding-bottom: 20px;
text-align: center;
}
.search-result-text {
text-align: center;
font-size: 14px;
color: #666;
}
.example-body {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 0px;
}
.uni-mt-10 {
margin-top: 10px;
}
</style>