q792602257/guangan-mp
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.0.0

Browse Source
This commit is contained in:
Jerry Yan
2025-06-16 10:09:19 +08:00
commit 7a066b3026
428 changed files with 50385 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
uni_modules/uni-search-bar/changelog.md Normal file
View File

@ -0,0 +1,47 @@
## 1.3.0（2024-04-22）
- 修复 textColor默认值导致的文字不显示的bug
## 1.2.9（2024-04-17）
- 修复 textColor不生效的bug
## 1.2.8（2024-02-22）
- 修复 清空按钮emit值错误的bug
## 1.2.7（2024-02-21）
- 新增 设置输入框字体颜色:textColor
## 1.2.6（2024-02-20）
- 修复 uni-search-bar在支付宝小程序下样式兼容问题
## 1.2.5（2024-01-31）
- 修复 uni-search-bar居中问题，现在默认居左，并修复样式偏移问题
## 1.2.4（2023-05-09）
- 修复 i18n 国际化不正确的 Bug
## 1.2.3（2022-05-24）
- 新增 readonly 属性，组件只读
## 1.2.2（2022-05-06）
- 修复 vue3 input 事件不生效的bug
## 1.2.1（2022-05-06）
- 修复 多余代码导致的bug
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
## 1.1.2（2021-08-30）
- 修复 value 属性与 modelValue 属性不兼容的Bug
## 1.1.1（2021-08-24）
- 新增 支持国际化
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.9（2021-05-12）
- 新增 项目示例地址
## 1.0.8（2021-04-21）
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 1.0.7（2021-04-15）
- uni-ui 新增 uni-search-bar 的 focus 事件
## 1.0.6（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.0.5（2021-02-05）
- 调整为uni_modules目录规范
- 新增 支持双向绑定
- 更改 input 事件的返回值，e={value:Number} --> e=value
- 新增 支持图标插槽
- 新增 支持 clear、blur 事件
- 新增 支持 focus 属性
- 去掉组件背景色

4
uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json Normal file
View File

@ -0,0 +1,4 @@
{
"uni-search-bar.cancel": "cancel",
"uni-search-bar.placeholder": "Search enter content"
}

8
uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js Normal file
View File

@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

4
uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json Normal file
View File

@ -0,0 +1,4 @@
{
"uni-search-bar.cancel": "取消",
"uni-search-bar.placeholder": "请输入搜索内容"
}

4
uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json Normal file
View File

@ -0,0 +1,4 @@
{
"uni-search-bar.cancel": "取消",
"uni-search-bar.placeholder": "請輸入搜索內容"
}

309
uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue Normal file
View File

@ -0,0 +1,309 @@
<template>
<view class="uni-searchbar">
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
@click="searchClick">
<view class="uni-searchbar__box-icon-search">
<slot name="searchIcon">
<uni-icons color="#c0c4cc" size="18" type="search" />
</slot>
</view>
<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal" :style="{color:textColor}"
@confirm="confirm" @blur="blur" @focus="emitFocus"/>
<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
class="uni-searchbar__box-icon-clear" @click="clear">
<slot name="clearIcon">
<uni-icons color="#c0c4cc" size="20" type="clear" />
</slot>
</view>
</view>
<text @click="cancel" class="uni-searchbar__cancel"
v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text>
</view>
</template>
<script>
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* SearchBar 搜索栏
* @description 搜索栏组件，通常用于搜索商品、文章等
* @tutorial https://ext.dcloud.net.cn/plugin?id=866
* @property {Number} radius 搜索栏圆角
* @property {Number} maxlength 输入最大长度
* @property {String} placeholder 搜索栏Placeholder
* @property {String} clearButton = [always|auto|none] 是否显示清除按钮
* @value always 一直显示
* @value auto 输入框不为空时显示
* @value none 一直不显示
* @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
* @value always 一直显示
* @value auto 输入框不为空时显示
* @value none 一直不显示
* @property {String} cancelText 取消按钮的文字
* @property {String} bgColor 输入框背景颜色
* @property {String} textColor 输入文字颜色
* @property {Boolean} focus 是否自动聚焦
* @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
* @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
* @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
* @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
* @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
* @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
*/
export default {
name: "UniSearchBar",
emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
props: {
placeholder: {
type: String,
default: ""
},
radius: {
type: [Number, String],
default: 5
},
clearButton: {
type: String,
default: "auto"
},
cancelButton: {
type: String,
default: "auto"
},
cancelText: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#F8F8F8"
},
textColor: {
type: String,
default: "#000000"
},
maxlength: {
type: [Number, String],
default: 100
},
value: {
type: [Number, String],
default: ""
},
modelValue: {
type: [Number, String],
default: ""
},
focus: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
}
},
data() {
return {
show: false,
showSync: false,
searchVal: ''
}
},
computed: {
cancelTextI18n() {
return this.cancelText || t("uni-search-bar.cancel")
},
placeholderText() {
return this.placeholder || t("uni-search-bar.placeholder")
}
},
watch: {
// #ifndef VUE3
value: {
immediate: true,
handler(newVal) {
this.searchVal = newVal
if (newVal) {
this.show = true
}
}
},
// #endif
// #ifdef VUE3
modelValue: {
immediate: true,
handler(newVal) {
this.searchVal = newVal
if (newVal) {
this.show = true
}
}
},
// #endif
focus: {
immediate: true,
handler(newVal) {
if (newVal) {
if(this.readonly) return
this.show = true;
this.$nextTick(() => {
this.showSync = true
})
}
}
},
searchVal(newVal, oldVal) {
this.$emit("input", newVal)
// #ifdef VUE3
this.$emit("update:modelValue", newVal)
// #endif
}
},
methods: {
searchClick() {
if(this.readonly) return
if (this.show) {
return
}
this.show = true;
this.$nextTick(() => {
this.showSync = true
})
},
clear() {
this.searchVal = ""
this.$nextTick(() => {
this.$emit("clear", { value: "" })
})
},
cancel() {
if(this.readonly) return
this.$emit("cancel", {
value: this.searchVal
});
this.searchVal = ""
this.show = false
this.showSync = false
// #ifndef APP-PLUS
uni.hideKeyboard()
// #endif
// #ifdef APP-PLUS
plus.key.hideSoftKeybord()
// #endif
},
confirm() {
// #ifndef APP-PLUS
uni.hideKeyboard();
// #endif
// #ifdef APP-PLUS
plus.key.hideSoftKeybord()
// #endif
this.$emit("confirm", {
value: this.searchVal
})
},
blur() {
// #ifndef APP-PLUS
uni.hideKeyboard();
// #endif
// #ifdef APP-PLUS
plus.key.hideSoftKeybord()
// #endif
this.$emit("blur", {
value: this.searchVal
})
},
emitFocus(e) {
this.$emit("focus", e.detail)
}
}
};
</script>
<style lang="scss">
$uni-searchbar-height: 36px;
.uni-searchbar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
position: relative;
padding: 10px;
// background-color: #fff;
}
.uni-searchbar__box {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
justify-content: left;
/* #endif */
overflow: hidden;
position: relative;
flex: 1;
flex-direction: row;
align-items: center;
height: $uni-searchbar-height;
padding: 5px 8px 5px 0px;
}
.uni-searchbar__box-icon-search {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 32px;
padding: 0 8px;
justify-content: center;
align-items: center;
color: #B3B3B3;
}
.uni-searchbar__box-search-input {
flex: 1;
font-size: 14px;
color: #333;
margin-left: 5px;
margin-top: 1px;
/* #ifndef APP-NVUE */
background-color: inherit;
/* #endif */
}
.uni-searchbar__box-icon-clear {
align-items: center;
line-height: 24px;
padding-left: 8px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-searchbar__text-placeholder {
font-size: 14px;
color: #B3B3B3;
margin-left: 5px;
text-align: left;
}
.uni-searchbar__cancel {
padding-left: 10px;
line-height: $uni-searchbar-height;
font-size: 14px;
color: #333333;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
</style>

87
uni_modules/uni-search-bar/package.json Normal file
View File

@ -0,0 +1,87 @@
{
"id": "uni-search-bar",
"displayName": "uni-search-bar 搜索栏",
"version": "1.3.0",
"description": "搜索栏组件，通常用于搜索商品、文章等",
"keywords": [
"uni-ui",
"uniui",
"搜索框",
"搜索栏"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

14
uni_modules/uni-search-bar/readme.md Normal file
View File

@ -0,0 +1,14 @@
## SearchBar 搜索栏
> **组件名：uni-search-bar**
> 代码块： `uSearchBar`
搜索栏组件
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839