dh-search

使用方式

import '../../components/dh-search/dh-search.stml';

代码示例

props

名称 类型 描述
clearable Boolean 是否显示清空按钮
value String 搜索框的值
showAction Boolean 是否显示右侧功能按钮
actionText String 功能按钮文字

method

名称 参数 描述
change(e) const value = e.detail 文本发生改变时触发
submit(e) const value = e.detail 提交时时触发

基本使用

<template>
    <view class="page">
        <text class="nav-title">基本使用</text>
        <dh-search clearable :value="search" @change="onChange" @submit="onSubmit"></dh-search>
    </view>
</template>
<script>
    import '../../components/dh-search/dh-search.stml'
    export default {
        data() {
            return{
                search: ''
            }
        },
        methods: {
            onChange(e){
                this.search = e.detail
            },
            onSubmit(e){
                api.toast({msg: e.detail})
            }
        }
    }
</script>

显示搜索按钮

<template>
    <view class="page">
        <text class="nav-title">显示搜索按钮</text>
        <dh-search clearable :value="search" @change="onChange" showAction @submit="onSubmit"></dh-search>
    </view>
</template>
<script>
    import '../../components/dh-search/dh-search.stml'
    export default {
        data() {
            return{
                search: ''
            }
        },
        methods: {
            onChange(e){
                this.search = e.detail
            },
            onSubmit(e){
                api.toast({msg: e.detail})
            }
        }
    }
</script>

联系方式

如果您再使用本组件过程中，遇到任何问题，可通过QQ:1055568851联系

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24