From ccb19f88b2583c7dadb18b6b2e9571ec120c6c61 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 24 四月 2024 22:34:38 +0800
Subject: [PATCH] 1
---
src/uni_modules/luanqing-search/components/luanqing-search/luanqing-search.vue | 232 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 124 insertions(+), 108 deletions(-)
diff --git a/src/uni_modules/luanqing-search/components/luanqing-search/luanqing-search.vue b/src/uni_modules/luanqing-search/components/luanqing-search/luanqing-search.vue
index 179a355..e12b198 100644
--- a/src/uni_modules/luanqing-search/components/luanqing-search/luanqing-search.vue
+++ b/src/uni_modules/luanqing-search/components/luanqing-search/luanqing-search.vue
@@ -1,118 +1,134 @@
<template>
- <view class="widget_style" >
- <view class="ffff" style="display: flex;height: 100%;">
- <input placeholder-class="widget_input_placehold" @confirm="onClickSearch" v-model="content" class="widget_input" :style="style1" :placeholder="placehold" />
- <view class="widget_button" v-if="isSearchTrue" @click="onClickSearch">{{buttonText}}</view>
- <view class="widget_button searchBg" v-else @click="onClickSearch"></view>
- </view>
-
- </view>
+ <view class="widget_style">
+ <view class="ffff" style="display: flex; height: 100%">
+ <input
+ placeholder-class="widget_input_placehold"
+ @confirm="onClickSearch"
+ v-model="content"
+ class="widget_input"
+ :style="style1"
+ :placeholder="placehold"
+ />
+ <view class="widget_button" v-if="isSearchTrue" @click="onClickSearch">{{
+ buttonText
+ }}</view>
+ <view class="widget_button searchBg" v-else @click="onClickSearch"></view>
+ </view>
+ </view>
</template>
<script setup>
- export default{
- data(){
- return{
- content:'',
- style1:'',
- style2:'',
- }
- },
- props:{
- width:{
- type:Number,
- default:50
- },
- placehold:{
- type:String,
- default:'璇疯緭鍏ュ唴瀹�'
- },
- buttonText:{
- type:String,
- default(){
- return '鎼滅储'
- }
- },isSearchTrue:{
- type:Boolean,
- default(){
- return true
- }
- },
- },
- created() {
- // 缂栫粐璁剧疆鍔ㄦ�佸搴�
- // this.style1 = 'min-width:calc('+this.width+'vw);';
- // this.style2 = 'min-width:calc('+(this.width / 5)+'vw);';
- this.style1= 'width:4.5rem'
- this.style2= 'width:.5rem'
- },
- destroyed() {
-
- },
- methods:{
- onClickSearch(){
- this.$emit('onSearch',{text:this.content});
- }
+export default {
+ data() {
+ return {
+ content: "",
+ style1: "",
+ style2: ""
+ };
+ },
+ props: {
+ width: {
+ type: Number,
+ default: 50
+ },
+ placehold: {
+ type: String,
+ default: "璇疯緭鍏ュ唴瀹�"
+ },
+ keyword: {
+ type: String
+ },
+ buttonText: {
+ type: String,
+ default() {
+ return "鎼滅储";
+ }
+ },
+ isSearchTrue: {
+ type: Boolean,
+ default() {
+ return true;
+ }
+ }
+ },
+ created() {
+ // 缂栫粐璁剧疆鍔ㄦ�佸搴�
+ // this.style1 = 'min-width:calc('+this.width+'vw);';
+ // this.style2 = 'min-width:calc('+(this.width / 5)+'vw);';
+ this.style1 = "width:4.5rem";
+ this.style2 = "width:.5rem";
+ this.content = this.keyword || "";
+ },
+ destroyed() {},
+ methods: {
+ onClickSearch() {
+ this.$emit("onSearch", { text: this.content });
+ }
+ },
+ watch: {
+ keyword(value) {
+ this.content = value
}
}
+};
</script>
<style>
- .widget_style{
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- border-radius: 30px;
- height: 100% !important;
- }
- .ffff{
- border: 2px solid #597AA5;
- border-radius: 30px;
- overflow: hidden;
- padding-left: 10px;
- background-color: #fff;
- align-items: center;
- }
- .widget_input{
- min-width: 320rpx;
- height: 100%;
- background-color: #fff;
- /* border: 2rpx solid #FF6600; */
- /* border-radius: 10rpx; */
- padding-left: 12rpx;
- padding-right: 12rpx;
- font-size: 24rpx;
- }
- .widget_input_placehold{
- color: #BBB;
- }
- .widget_button{
- color: #fff;
- width: .74rem;
- height: .3rem;
- font-size: .14rem;
- padding: 5rpx 20rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- border-top-right-radius: 10rpx;
- border-top-left-radius: 0rpx;
- border-bottom-left-radius: 0rpx;
- border-bottom-right-radius: 10rpx;
- background-color: #244A7B;
- border-radius: 30px;
- margin: 2rpx;
- }
- .searchBg{
- width: .46rem;
- height: 0.46rem;
- background-image:url(@/static/image/鎼滅储.png) ;
- background-size: 100% 100%;
- }
- ::v-deep .uni-input-input{
- height: 100% !important;
- color: #000;
- font-size: .16rem;
- }
+.widget_style {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ border-radius: 30px;
+ height: 100% !important;
+}
+.ffff {
+ border: 2px solid #597aa5;
+ border-radius: 30px;
+ overflow: hidden;
+ padding-left: 10px;
+ background-color: #fff;
+ align-items: center;
+}
+.widget_input {
+ min-width: 320rpx;
+ height: 100%;
+ background-color: #fff;
+ /* border: 2rpx solid #FF6600; */
+ /* border-radius: 10rpx; */
+ padding-left: 12rpx;
+ padding-right: 12rpx;
+ font-size: 24rpx;
+}
+.widget_input_placehold {
+ color: #bbb;
+}
+.widget_button {
+ color: #fff;
+ width: 0.74rem;
+ height: 0.3rem;
+ font-size: 0.14rem;
+ padding: 5rpx 20rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-top-right-radius: 10rpx;
+ border-top-left-radius: 0rpx;
+ border-bottom-left-radius: 0rpx;
+ border-bottom-right-radius: 10rpx;
+ background-color: #244a7b;
+ border-radius: 30px;
+ margin: 2rpx;
+}
+.searchBg {
+ width: 0.46rem;
+ height: 0.46rem;
+ background-image: url(@/static/image/鎼滅储.png);
+ background-size: 100% 100%;
+}
+::v-deep .uni-input-input {
+ height: 100% !important;
+ color: #000;
+ font-size: 0.16rem;
+}
</style>
--
Gitblit v1.9.1