avm-zy-search

介绍

搜索输入框，比原生更好用的原生组件，样式美观，简单好用，非常方便集成。 开发时请将asset 下图片/视频等多媒体资源拷贝至widget的image目录

使用方式

import "../../components/avm-zy-search/avm-zy-search.stml";

代码示例

<avm-zy-search id="zySearch" :value="searchValue" placeholder="请输入搜索内容" @event="zySearchEvent"></avm-zy-search>

API

props 属性

参数 说明 类型 默认
id 组件唯一id String 无
value 内容 String 无
placeholder 提示词 String 搜索

Events事件

事件名称 说明 回调参数
event 点击按键时触发 {"type":"clean","value":""}

案例

<view v-if="showzySearch">
    <avm-zy-search id="zySearch" :value="searchValue" placeholder="请输入搜索内容" @event="zySearchEvent"></avm-zy-search>
</view>
<script>
import "../../components/avm-zy-search/avm-zy-search.stml";
export default {
    name: "tpl",
    data() {
        return {
            showzySearch: false,
            searchValue:"",
        };
    },
    methods: {
        //搜索组件示例 所需方法
    zySearchEvent(e){
        //{"type":"clean","value":""}  type有icon(左边图标)、clean(清空按钮)、input(输入中)、enter(键盘点击搜索)  value为当前输入框的值
        this.data.searchValue = e.detail.value;
        console.log(JSON.stringify(e));
    },
    setSearch(){ //因组件中双向绑定有点问 使用v-if 重新设置参数 达到绑定作用
        this.searchValue = "真的是个老6";
        this.showzySearch = false;
        this.showzySearch = true;
    },
};
</script>

帮助说明/联系方式

如需修改或修改样式请查看components下对应的stml,如需要更多自定义功能或反馈与BUG，可联系QQ:1161277121

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