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
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>
|
|
|