search.nvue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础功能</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__tag-item">
  7. <u-search
  8. v-model="value1"
  9. :show-action="false"
  10. @change="change"
  11. ></u-search>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="u-demo-block">
  16. <text class="u-demo-block__title">设置初始值</text>
  17. <view class="u-demo-block__content">
  18. <view class="u-page__tag-item">
  19. <u-search
  20. v-model="value2"
  21. :show-action="false"
  22. ></u-search>
  23. </view>
  24. </view>
  25. </view>
  26. <view class="u-demo-block">
  27. <text class="u-demo-block__title">搜索框形状</text>
  28. <view class="u-demo-block__content">
  29. <view class="u-page__tag-item">
  30. <u-search
  31. v-model="value3"
  32. :show-action="false"
  33. shape="round"
  34. ></u-search>
  35. </view>
  36. </view>
  37. <view class="u-demo-block__content m-t-10">
  38. <view class="u-page__tag-item">
  39. <u-search
  40. v-model="value4"
  41. :show-action="false"
  42. shape="square"
  43. ></u-search>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="u-demo-block">
  48. <text class="u-demo-block__title">右侧控件</text>
  49. <view class="u-demo-block__content">
  50. <view class="u-page__tag-item">
  51. <u-search v-model="value5"></u-search>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="u-demo-block">
  56. <text class="u-demo-block__title">禁用输入框</text>
  57. <view class="u-demo-block__content">
  58. <view class="u-page__tag-item">
  59. <u-search
  60. placeholder="输入框被禁用,可以监听点击事件进行跳转"
  61. disabled
  62. :show-action="false"
  63. ></u-search>
  64. </view>
  65. </view>
  66. </view>
  67. <view class="u-demo-block">
  68. <text class="u-demo-block__title">点击左侧图标</text>
  69. <view class="u-demo-block__content">
  70. <view class="u-page__tag-item">
  71. <u-search
  72. v-model="value6"
  73. :show-action="false"
  74. @clickIcon="clickIcon"
  75. ></u-search>
  76. </view>
  77. </view>
  78. </view>
  79. <view class="u-demo-block">
  80. <text class="u-demo-block__title">搜索框内容水平对齐</text>
  81. <view class="u-demo-block__content">
  82. <view class="u-page__tag-item">
  83. <u-search
  84. v-model="value7"
  85. :show-action="false"
  86. input-align="left"
  87. ></u-search>
  88. </view>
  89. </view>
  90. <view class="u-demo-block__content m-t-10">
  91. <view class="u-page__tag-item">
  92. <u-search
  93. v-model="value8"
  94. :show-action="false"
  95. input-align="center"
  96. ></u-search>
  97. </view>
  98. </view>
  99. <view class="u-demo-block__content m-t-10">
  100. <view class="u-page__tag-item">
  101. <u-search
  102. v-model="value9"
  103. :show-action="false"
  104. input-align="right"
  105. ></u-search>
  106. </view>
  107. </view>
  108. </view>
  109. <view class="u-demo-block">
  110. <text class="u-demo-block__title">自定义</text>
  111. <view class="u-demo-block__content">
  112. <view class="u-page__tag-item">
  113. <u-search
  114. v-model="value10"
  115. :show-action="false"
  116. borderColor="rgb(230, 230, 230)"
  117. bgColor="#fff"
  118. ></u-search>
  119. </view>
  120. </view>
  121. <view class="u-demo-block__content m-t-10">
  122. <view class="u-page__tag-item">
  123. <u-search
  124. v-model="value11"
  125. :show-action="false"
  126. search-icon-color="#FF0000"
  127. ></u-search>
  128. </view>
  129. </view>
  130. <view class="u-demo-block__content m-t-10">
  131. <view class="u-page__tag-item">
  132. <u-search
  133. v-model="value12"
  134. :show-action="false"
  135. placeholder-color="#FF0000"
  136. ></u-search>
  137. </view>
  138. </view>
  139. <view class="u-demo-block__content m-t-10">
  140. <view class="u-page__tag-item">
  141. <u-search
  142. v-model="value13"
  143. :show-action="false"
  144. color="#FF0000"
  145. ></u-search>
  146. </view>
  147. </view>
  148. <view class="u-demo-block__content m-t-10">
  149. <view class="u-page__tag-item">
  150. <u-search
  151. v-model="value14"
  152. label="手机"
  153. :show-action="false"
  154. >
  155. </u-search>
  156. </view>
  157. </view>
  158. <view class="u-demo-block__content m-t-10">
  159. <view class="u-page__tag-item">
  160. <u-search
  161. v-model="value15"
  162. search-icon="scan"
  163. :show-action="false"
  164. >
  165. </u-search>
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. </template>
  171. <script>
  172. export default {
  173. data() {
  174. return {
  175. value1: '',
  176. value2: '天山雪莲',
  177. value3: '',
  178. value4: '',
  179. value5: '',
  180. value6: '',
  181. value7: '',
  182. value8: '',
  183. value9: '',
  184. value10: '',
  185. value11: '',
  186. value12: '',
  187. value13: '',
  188. value14: '',
  189. value15: ''
  190. }
  191. },
  192. watch: {
  193. value1(newValue, oldValue) {
  194. // console.log('value1', newValue);
  195. }
  196. },
  197. methods: {
  198. change(e) {
  199. console.log(e);
  200. },
  201. clickIcon() {
  202. uni.$u.toast('点击了左侧图标')
  203. }
  204. }
  205. }
  206. </script>
  207. <style lang="scss">
  208. .u-page__tag-item {
  209. @include flex(column);
  210. flex: 1
  211. }
  212. .m-t-10 {
  213. margin-top: 10px;
  214. }
  215. </style>