demo 原始链接:https://vux.li/demos/v2/#/component/search
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <img src=\"../assets/demo/filter_bg.jpg\" style=\"width: 100%\">\n <search\n @result-click=\"resultClick\"\n @on-change=\"getResult\"\n :results=\"results\"\n v-model=\"value\"\n position=\"absolute\"\n auto-scroll-to-top top=\"46px\"\n @on-focus=\"onFocus\"\n @on-cancel=\"onCancel\"\n @on-submit=\"onSubmit\"\n ref=\"search\"></search>\n <group>\n <cell title=\"keyword\">{{value}}</cell>\n </group>\n\n <div style=\"padding:15px;\">\n <x-button @click.native=\"setFocus\" type=\"primary\">set focus</x-button>\n </div>\n <group>\n <cell title=\"static position demo\" is-link link=\"/component/search-static\"></cell>\n </group>\n </div>\n</template>\n\n<script>\nimport { Search, Group, Cell, XButton } from 'vux'\n\nexport default {\n components: {\n Search,\n Group,\n Cell,\n XButton\n },\n methods: {\n setFocus () {\n this.$refs.search.setFocus()\n },\n resultClick (item) {\n window.alert('you click the result item: ' + JSON.stringify(item))\n },\n getResult (val) {\n console.log('on-change', val)\n this.results = val ? getResult(this.value) : []\n },\n onSubmit () {\n this.$refs.search.setBlur()\n this.$vux.toast.show({\n type: 'text',\n position: 'top',\n text: 'on submit'\n })\n },\n onFocus () {\n console.log('on focus')\n },\n onCancel () {\n console.log('on cancel')\n }\n },\n data () {\n return {\n results: [],\n value: 'test'\n }\n }\n}\n\nfunction getResult (val) {\n let rs = []\n for (let i = 0; i < 20; i++) {\n rs.push({\n title: `${val} result: ${i + 1} `,\n other: i\n })\n }\n return rs\n}\n</script>\n\n
\n