tm-search 搜索框
🎉目录导航
👉基本示例跟数1,2,3一样简单
<tm-search ></tm-search>
1
2
3
2
3
<script>
export default {
data() {
return {
}
}
}
</script>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
👉自定义插槽
<tm-search v-model="value" bgColor="bg-gradient-blue-accent" color="white" insertColor="blue" :showLeft="true">
<template #left>
<tm-pickersCity btn-color="bg-gradient-blue-accent" @confirm="okCity" :default-value="addr">
<view>
<text class="text-size-n">{{addr[1]}}</text>
<tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
</view>
</tm-pickersCity>
</template>
</tm-search>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
👉完整的示例
<template>
<tm-fullView>
<template v-slot:default="{info}">
<view class="grey text " :class="tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
<tm-menubars title="搜索组件" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-search v-model="value" suffix-icon="icon-plus" bgColor="bg-gradient-blue-accent" color="white" insertColor="blue" :showLeft="true">
<template #left>
<view>
<tm-pickersCity btn-color="bg-gradient-blue-accent" @confirm="okCity" :default-value="addr">
<view>
<text class="text-size-n">{{addr[1]}}</text>
<tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
</view>
</tm-pickersCity>
<view class="text-size-xs">请选择</view>
</view>
</template>
<template #suffixIcon>
<view class="border-blue-l-1 pl-24 flex-center " style="height: 30rpx;line-height: 30rpx;">
<tm-icons dense name="icon-qrcode" color="blue"></tm-icons>
</view>
</template>
<template #right>
<view style="width: 42rpx;height:42rpx;" class="rounded border-white-a-1 text-align-center flex-center">
<tm-icons :size="22" name="icon-plus" color="white"></tm-icons>
</view>
</template>
</tm-search>
<tm-search v-model="value" showLeft prefixIcon="" suffixIcon="icon-search"></tm-search>
<view style="height: 50upx;"></view>
<tm-search clear v-model="value" prefixText="地址" confirmText="取消" color="green" insertColor="green" align="center"></tm-search>
<view style="height: 50upx;"></view>
<tm-search v-model="value" bgColor="bg-gradient-pink-accent" insertColor="pink" align="center" :showRight="false" :round="24"></tm-search>
<view style="height: 50upx;"></view>
</view>
</template>
</tm-fullView>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
export default {
data() {
return {
addr:['江西省','南昌市','西湖区'],
value:''
}
},
methods: {
okCity(e){
console.log(e);
this.addr = e;
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| value | String | - | '' | 建议valu.sync或者v-model |
| left-icon | String | - | 'icon-angle-left' | 左边图标 |
| prefix-text | String | - | '' | 输入框内前缀文字 |
| confirm-text | String | - | '搜索' | 右边文字 |
| prefix-icon | String | - | 'icon-search' | 输入框内前缀图标 |
| suffix-icon | String | '' | 输入框内后缀图标 | |
| placeholder | String | '请输入关键词' | 输入框的点位符 | |
| insert-color | String | 任意主题色名 | 'primary' | 输入框内图标的主题色 |
| color | String | 任意主题色名 | 'primary' | 外部图标文字的主题色 |
| bg-color | String | 任意主题色名 | 'white' | 搜索框的背景 |
| align | String | left/right/center | 'left' | 输入框输入对齐的方式 |
| disabled | Boolean | true|false | false | 是否禁用 |
| show-left | Boolean | true|false | false | 是否显示左边部分 |
| show-right | Boolean | true|false | false | 是否显示右边 |
| clear | Boolean | true|false | false | 是否显示清除图标 |
| black | Boolean | true|false | null | 是否暗黑模式 |
| round | Number | 任意整数 | 2 | 输入框内圆角rpx |
| shadow | Number | 任意整数 | 4 | 搜索框的投影rpx |
👉slot插槽
| 属性名称 | 参数类型 | 参数 | 说明 |
|---|---|---|---|
| left | - | - | 左边插槽 |
| right | - | - | 右边插槽 |
| suffixIcon1.1.9 | - | - | 输入框内后缀图标插槽 |
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @cancel | - | - | 点击左边图标触发的事件 |
| @clear | - | - | 点击输入框清除图标时的触发事件。 |
| @confirm | 当前输入值 | - | 输入法键盘上点击确认，输入框后缀图标，右边部分点击时产生的事件，含当前输入的内容 |
| @click | - | - | 点击组件产生的事件 |
👉更新日志
2021年9月12日 初始版本。