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.
102 lines
1.9 KiB
102 lines
1.9 KiB
<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"> |
|
|
|
<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> |
|
<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; |
|
}, |
|
} |
|
} |
|
</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>
|
|
|