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.
110 lines
2.3 KiB
110 lines
2.3 KiB
## 【2023-搜索页面-可能是最好用的插件】
|
|
## d-search-log
|
|
|
|
|
|
````
|
|
|
|
弹框插件： https://ext.dcloud.net.cn/plugin?id=2708
|
|
|
|
日历插件： https://ext.dcloud.net.cn/plugin?id=2779
|
|
|
|
````
|
|
|
|
|
|
|
|
````
|
|
|
|
1. /pages/index/index.vue 为案例文件
|
|
|
|
2. 素材图片的话 复制到 /static/目录下
|
|
|
|
|
|
````
|
|
|
|
### 或者直接复制下边代码
|
|
|
|
|
|
````
|
|
|
|
|
|
|
|
<template>
|
|
<view>
|
|
|
|
<cu-custom bgColor="my-theme-bg" :isBack="false">
|
|
<block slot="backText">返回</block>
|
|
<block slot="content">搜索页面</block>
|
|
</cu-custom>
|
|
|
|
<d-search-log
|
|
:color_border="color_border"
|
|
:color_text="color_border"
|
|
:search_list_hot="search_list_hot"
|
|
:store_key="store_key"
|
|
@onClickDelAllApi="onClickDelAll"
|
|
@onSearchNameApi="onSearchName"
|
|
></d-search-log>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dSearchLog from '@/uni_modules/d-search-log/components/d-search-log/d-search-log.vue'
|
|
|
|
export default {
|
|
components: {
|
|
"dSearchLog": dSearchLog
|
|
},
|
|
computed:{
|
|
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
color_border:"#ff00ff",
|
|
search_list_hot:[],
|
|
store_key:'search_list',
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
this.search_list_hot = [
|
|
'手机','电脑','河南老君山','三亚一游','北京环球影城','杭州西湖','保定驴肉火烧','保定狼牙山玻璃栈道'
|
|
]
|
|
},
|
|
methods: {
|
|
onClickDelAll() {
|
|
console.log('[父级接收事件]：删除全部搜索记录')
|
|
},
|
|
onSearchName(e) {
|
|
console.log('[父级接收事件]：点击搜索:'+e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.my-theme-bg {
|
|
background: linear-gradient(117deg,#60DF9D,#31CB7B);
|
|
color:#fff;
|
|
/* background: linear-gradient(117deg,#23C0F7,#ff661e); */
|
|
/* background: linear-gradient(90deg, #FFAA57, #23C0F7); */
|
|
/* background: linear-gradient(90deg, #F37749, #FFAA57); */
|
|
/* #FFAA57 */
|
|
/* background-image: linear-gradient(45deg, #39b54a, #8dc63f); */
|
|
/* color: #ffffff; */
|
|
/* background-color: #f37b1d; */
|
|
/* color: #ffffff; */
|
|
/* background-color: #ffffff; */
|
|
/* color: #666666; */
|
|
/* linear-gradient(-27deg, #33CB80, #28D0AF) */
|
|
/* background-image: line=ar-gradient(-27deg,#33CB80,#28D0AF); */
|
|
/* color: #ffffff; */
|
|
/* background-image: line=ar-gradient(-27deg,#fff,#fff); */
|
|
/* background-image: line=ar-gradient(-27deg,#23C0F7,#23C0F7); */
|
|
/* color: #000; */
|
|
}
|
|
</style>
|
|
```` |