用于页面的加载中状态。

# dof-search-bar 组件

搜索栏组件

一般可位于 NavBar 下方
支持更改主题色，设置内容，一键清空等功能
支持带下拉选项形式的搜索

# 示例

<template>
  <div class="dof-demo">
    <dof-minibar title="4.9 搜索框"></dof-minibar>
    <SwitchTheme />
    <scroller class="scroller">
      <dof-catalog title="基本样式（单搜索框）" background-color="#E5E5E8"></dof-catalog>
      <div class="demo" :style="{ marginTop: '22px' }">
        <dof-searchbar
          ref="dof-searchbar"
          placeholder="请输入设备型号或系列"
          right-label="取消"
          input-type="text"
          @dofSearchbarRightClicked="dofSearchbarRightClicked"
          @dofSearchbarInputReturned="dofSearchbarInputReturned"
          @dofSearchbarInputOnInput="dofSearchbarInputOnInput"
          @dofSearchbarClearClicked="dofSearchbarClearClicked"
          @dofSearchbarInputOnFocus="dofSearchbarInputOnFocus"
          @dofSearchbarInputOnBlur="dofSearchbarInputOnBlur"
        ></dof-searchbar>
      </div>
      <div class="demo">
        <dof-searchbar
          ref="dof-searchbar"
          placeholder="请输入设备型号或系列"
          right-label="搜索"
          input-type="text"
          :showRightContent="true"
          @dofSearchbarRightClicked="dofSearchbarRightClicked"
          @dofSearchbarInputReturned="dofSearchbarInputReturned"
          @dofSearchbarInputOnInput="dofSearchbarInputOnInput"
          @dofSearchbarClearClicked="dofSearchbarClearClicked"
          @dofSearchbarInputOnFocus="dofSearchbarInputOnFocus"
          @dofSearchbarInputOnBlur="dofSearchbarInputOnBlur"
        ></dof-searchbar>
      </div>
      <dof-catalog title="拓展样式" background-color="#E5E5E8"></dof-catalog>
      <div class="demo" :style="{ marginTop: '22px' }">
        <dof-searchbar
          ref="dof-searchbar"
          placeholder="请输入程序名"
          right-label="搜索"
          input-type="text"
          :showRightContent="true"
          @dofSearchbarRightClicked="dofSearchbarRightClicked"
          @dofSearchbarInputReturned="dofSearchbarInputReturned"
          @dofSearchbarInputOnInput="dofSearchbarInputOnInput"
          @dofSearchbarClearClicked="dofSearchbarClearClicked"
          @dofSearchbarInputOnFocus="dofSearchbarInputOnFocus"
          @dofSearchbarInputOnBlur="dofSearchbarInputOnBlur"
        ></dof-searchbar>
      </div>
      <div class="demo">
        <dof-searchbar
          ref="dof-searchbar"
          placeholder="请输入设备型号或系列"
          defaultValue="名称"
          right-label="搜索"
          input-type="text"
          :showRightContent="true"
          @dofSearchbarRightClicked="dofSearchbarRightClicked"
          @dofSearchbarInputReturned="dofSearchbarInputReturned"
          @dofSearchbarInputOnInput="dofSearchbarInputOnInput"
          @dofSearchbarClearClicked="dofSearchbarClearClicked"
          @dofSearchbarInputOnFocus="dofSearchbarInputOnFocus"
          @dofSearchbarInputOnBlur="dofSearchbarInputOnBlur"
        ></dof-searchbar>
      </div>
      <div class="demo">
        <dof-searchbar
          placeholder="请输入家电型号"
          back-arrow="true"
          show-right-content="true"
          right-label="编辑"
          @dofBackArrowClicked="dofBackArrowClicked"
          @dofSearchbarRightClicked="dofSearchbarRightClicked"
          @dofSearchbarInputReturned="dofSearchbarInputReturned"
          @dofSearchbarClearClicked="dofSearchbarClearClicked"
          @dofSearchbarInputOnFocus="dofSearchbarInputOnFocus"
          @dofSearchbarInputOnBlur="dofSearchbarInputOnBlur"
        >
        </dof-searchbar>
      </div>
      <dof-catalog title="点击态" background-color="#E5E5E8"></dof-catalog>
      <div class="demo">
        <dof-searchbar
          ref="dofSearchbarClick"
          placeholder="请输入设备型号或系列"
          right-label="搜索"
          input-type="text"
          defaultValue="输入中"
          :showRightContent="true"
          @dofSearchbarRightClicked="dofSearchbarRightClicked"
          @dofSearchbarInputReturned="dofSearchbarInputReturned"
          @dofSearchbarInputOnInput="dofSearchbarInputOnInput"
          @dofSearchbarClearClicked="dofSearchbarClearClicked"
          @dofSearchbarInputOnFocus="dofSearchbarInputOnFocus"
          @dofSearchbarInputOnBlur="dofSearchbarInputOnBlur"
        ></dof-searchbar>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #151617;
}

.scroller {
  flex: 1;
}
.demo {
  margin-bottom: 16px;
}
</style>

<script>
const modal = weex.requireModule('modal')
import { DofMinibar, DofCatalog, DofSearchbar, DofIconfont } from 'dolphin-weex-ui'
import { setTitle } from 'src/_mods/set-nav'
import SwitchTheme from 'src/components/SwitchTheme.vue'
export default {
  components: { DofMinibar, SwitchTheme, DofCatalog, DofSearchbar, DofIconfont },
  beforeCreate() {
    this.$theme.setTheme('colmo')
    // this.$bridge.setStatusBar({ colorMode: '2' })
  },
  methods: {
    setValue() {
      this.$refs['dof-searchbar'].setValue('点击了手动设置输入框内容的开关')
    },

    dofSearchbarInputOnFocus() {
      modal.toast({ message: 'onfocus', duration: 1 })
    },
    dofSearchbarInputOnBlur() {
      modal.toast({ message: 'onbulr', duration: 1 })
    },
    dofSearchbarClearClicked() {
      modal.toast({ message: 'clear.click', duration: 1 })
    },
    dofSearchbarInputOnInput(e) {
      this.value = e.value
      modal.toast({ message: 'OnInput', duration: 1 })
    },
    dofSearchbarRightClicked() {
      modal.toast({ message: 'right.click', duration: 1 })
    },
    dofSearchbarInputDisabledClicked() {
      modal.toast({ message: 'inputDisbled.onclick', duration: 1 })
    },

    dofSearchbarInputReturned() {
      modal.toast({ message: 'dofSearchbarInputReturned', duration: 1 })
    },

    dofBackArrowClicked() {
      modal.toast({ message: 'dofBackArrowClicked', duration: 1 })
      console.log('dofBackArrowClicked')
    },

    dofSelectItemClicked(e) {
      modal.toast({ message: 'dofSelectItemClicked', duration: 1 })
      console.log('dofSelectItemClicked', e)
    },

    avatarClicked() {
      modal.toast({ message: 'dofBackArrowClicked', duration: 1 })
      console.log('avatarClicked')
    }
  },
  mounted() {
    setTimeout(() => {
      console.log(this.$refs.dofSearchbarClick)
      this.$refs.dofSearchbarClick.onFocus()
    }, 200)
  }
}
</script>

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

点我扫二维码查看demo

# Attributes

Prop	Type	Required	Default	Description
mod	`String`	`Y`	`default`	默认值为default，有下拉框的可选择hasSelect
theme	`String`	`N`	`white`	searchbar主题色`white\gray\black`
autofocus	`Boolean`	`N`	`false`	input是否自动获得焦点
bar-style `Object`	`N`	`{}`	searchbar样式配置
default-value	`String`	`N`	`-`	searchbar input默认值
placeholder	`String`	`N`	`-`	searchbar input填充文本
show-right-content	`Boolean`	`N`	`false`	是否显示右侧的搜索按钮
right-label	`String`	`N`	`搜索`	searchbar 右侧的文本文案内容, 长度限制两个汉字其`width=36pt`
back-arrow	`Boolean`	`N`	`false`	是否显示searchbar左侧的箭头
input-type	`String`	`N`	`text`	input类型 `text\password`
return-key-type	`String`	`N`	`defalut`	改变键盘返回键的类型,支持`defalut\go\next\search\send\done`
disabled	`Boolean`	`N`	`false`	是否被禁用

# Events

事件名	说明	回调参数
`dofSearchbarRightClicked`	搜索框右侧按钮点击事件	`event`
`dofSearchbarInputReturned`	搜索框键盘换行事件	`event`
`dofSearchbarInputOnInput`	搜索框输入时执行	`event`
`dofSearchbarClearClicked`	搜索框清空事件	`event`
`dofSearchbarInputOnFocus`	搜索框获取焦点事件	`event`
`dofSearchbarInputOnBlur`	搜索框失焦事件	`event`
`dofBackArrowClicked`	返回箭头点击事件	`event`
`dofSearchbarInputDisabledClicked`	禁用输入框后输入框的点击事件	`event`

← 4.8 滑杆（Slider） 5.1 卡片-容器（Card） →

# 搜索框（Search box）

# dof-search-bar 组件

# 示例

# Attributes

# Events