当前位置:网站首页>The use of u-serve, a component of uview search, and the solution to the problem that clicking the search button is invalid

The use of u-serve, a component of uview search, and the solution to the problem that clicking the search button is invalid

2020-12-07 19:17:08 Deshun

uView yes uni-app A good front end of Ecology UI frame , It integrates a lot of practical components .

In the use of Search for There is a problem with component , Clicking the search button doesn't respond .

Here's how to start :

u-search Can pass placeholder Parameter settings occupancy content , adopt v-model Bi directional binding of a variable value :

<template>
  <u-search placeholder=" Sunlight streams on the Incense Burner Peak and purple clouds arise " v-model="keyword"></u-search>
</template>

<script>
  export default {
    data() {
      return {
        keyword: ' Look at the waterfall hanging in front of Sichuan '
      }
    }
  }
</script>

adopt shape Set the shape of both ends of the input box ,square - Square with rounded corners ,round ( Default )- Semicircle :

<u-search shape="round"></u-search>

Open the control on the right ( Search button ):

show-action Configure whether to turn on the right button control .

action-text Configure control content .

animation ( The default is false ) Set to true Words , Lose focus , Or when you click the control button , The control disappears automatically , And it's animated .

<u-search :show-action="true" action-text=" Search for " :animation="true"></u-search>

Custom style :

adopt input-align Set how the input box contents are aligned , and css Of text-align Empathy .

adopt border-color Set the border of the entire search component , As long as the color is configured , The border will appear .

adopt height Component height settings .

adopt disabled Set whether to disable the input box .

adopt bg-color The setting is the background color of the search component .

<u-search input-align="center" height="70"></u-search>

Supported events (Events):

By monitoring change event , In the callback, the returned result is bound to a variable to get the user's input .

There's a little bit of caution here : If only search event , There is no response when you click the search button , We need to add another custom .

<u-search v-model="keywords" :focus="true" shape="square" search-icon="none" height="70" :show-action="true" @custom="searchBank" @search="searchBank"/>

Event name

explain

Callback Arguments

edition

change

Trigger when the content of input box changes

value: The value of the input box

-

search

Trigger when the user determines the search , The user presses enter , Or the lower right corner of the phone keyboard " Search for " Trigger on key

value: The value of the input box

-

custom

Triggered when the user clicks on the right control

value: The value of the input box

-

blur

Triggered when the input box loses focus

value: The value of the input box

-

focus

Trigger when the input box gets focus

value: The value of the input box

-

clear

Configured with clearabled after , This event is issued when the content is cleared

-

-

click 1.5.3

disabled by true when , Click on the input box , Send this event , Used to jump to the search page

-

-

No reprint without permission :w3h5 » uView Search components u-serch The use of the search button and click the invalid problem solved

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .

版权声明
本文为[Deshun]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/11/20201112215641309v.html