修复中国色底部部分颜色部件不展示和引入更多颜色

master
barney 2 years ago
parent 10afa659e0
commit 1d6b2d42e8
  1. 1970
      common/chineseColors.js
  2. 11
      components/ColorPanel/ColorPanel.vue
  3. 2
      pages.json
  4. 84
      pages/chineseColor/chineseColor.vue

File diff suppressed because it is too large Load Diff

@ -2,10 +2,11 @@
<view>
<view class="panel container" :style="panelColor">
<view :style="canvasHexStyle" @click="onClickCanvas">
<view >
<view class="">
{{name}}
</view>
<view>
<view class="">
#{{hex}}
</view>
<view class="rgb-text">
@ -95,7 +96,7 @@
uni.setClipboardData({
data: "#" + this.hex,
});
//
//
this.$emit("clickPanel",this.hex);
},
},
@ -137,8 +138,8 @@
}
.panel {
height: 70px;
width: 110px;
height: 60px;
width: 100px;
border-radius: 10px;
border-color: #484848;
border-style: dashed;

@ -9,7 +9,7 @@
"path": "pages/chineseColor/chineseColor",
"style": {
"navigationBarTitleText": "中国色",
"enablePullDownRefresh": false
"enablePullDownRefresh": true
}
}

@ -1,15 +1,15 @@
<template>
<view>
<uni-search-bar @confirm="search" v-model="searchValue" @input="input" @cancel="cancel" @clear="clear" placeholder="请输入色彩名称">
</uni-search-bar>
<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>
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" v-for="(item,index) in colors" :key="index">
<ColorPanel :hsb="item.hsb" @clickPanel="onClickPanel" :name="item.name"></ColorPanel>
<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>
@ -31,19 +31,19 @@
}
},
onReady() {
this.$refs.trans.init({
duration: 2000,
timingFunction: 'ease-in-out',
delay: 500,
});
// 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(() => {});
// this.$refs.trans.step({
// backgroundColor: "#" + hex,
// });
// //
// this.$refs.trans.run(() => {});
},
input(res) {
if (res === "") {
@ -62,7 +62,56 @@
res.value = "";
this.colors = chineseColors;
},
// focus(res) {
// res.value = "";
// this.colors = chineseColors;
// },
// hexrgb
hexToRgb(hex) {
// hexrgb
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,
}
},
// rgbhsb
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>
@ -70,6 +119,7 @@
.content {
width: 100vw;
height: 100vh;
}
.card-padding {

Loading…
Cancel
Save