Mint-Ui的mt-search点击选中

<template><div class="page-search"><mt-search autofocus v-model="value" placeholder="搜索"> </mt-search><mt-cellv-for="item of filterResult":key="item":title="item"@click.native="select(item)"/></div>
</template><script>
export default {name: "page-search",data() {return {value: "",// 默认数据defaultResult: ["Apple","Banana","Orange","Durian","Lemon","Peach","Cherry","Berry","Core","Fig","Haw","Melon","Plum","Pear","Peanut","Other"]};},methods: {select(item) {console.log(item);console.log(this.$router);this.$router.go(-1);}},mounted() {this.$nextTick(() => {document.querySelector(".mint-search").style.height =document.querySelector(".mint-searchbar").offsetHeight + "px";});},computed: {filterResult() {return this.defaultResult.filter(value =>new RegExp(this.value, "i").test(value));}}
};
</script><style lang="scss">
input[type="search"] {color: #333;font-size: 16px;
}
input[type="search"]::-webkit-input-placeholder {color: #666;font-size: 16px;
}
input[type="search"]:-moz-placeholder {color: #666;font-size: 16px;
}
input[type="search"]::-moz-placeholder {color: #666;font-size: 16px;
}
input[type="search"]:-ms-input-placeholder {color: #666;font-size: 16px;
}
</style>

效果图

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406770.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

毕业了!

忆往昔 论文犹如一座大山 日夜码字不知疲倦 写了半天改个没完 良辰美景于我何干 俱往矣 神马检索与期刊 能有几篇是真言 而今迈步从头越 翻过大山尽开颜

vue如何返回上一页效果

如何通过点击的方式控制当前页返回到上一个路由页面&#xff1a; 1.在当前页面添加返回按钮 <div style"text-align: center"><el-button v-on:click"backHistory">取消</el-button> </div>2.在方法体内写back方法实现点击返回上…

机器学习算法基础概念学习总结

转自&#xff1a;http://blog.csdn.net/lantian0802/article/details/38333479 1.基础概念&#xff1a; (1) 10折交叉验证&#xff1a;英文名是10-fold cross-validation&#xff0c;用来测试算法的准确性。是常用的测试方法。将数据集分成10份。轮流将其中的9份作为训练数据&a…

寻路大数据:海量数据与大规模分析

寻路大数据&#xff1a;海量数据与大规模分析&#xff08;Google大数据专家力作超豪华译者|作序者真正梳理趋势与生态|方案与工具选型|应用场景与价值挖掘的独家内参&#xff09; 【美】Michael Manoochehri&#xff08;迈克尔.马诺切里&#xff09;著 戴志伟等 译 ISBN 978…

AJAX中的请求方式以及同步异步的区别

请求方式&#xff0c;分为GET与POST&#xff1a;GET最为常见的HTTP请求&#xff0c;普通上网浏览页面就是GET。GET方式的参数请求直接跟在URL后&#xff0c;以问号开始。&#xff08;JS中用window.location.search获得&#xff09;。参数可以用encodeURIComponent进行编码&…

js获取当前时间(昨天、今天、明天)

js获取当前时间(昨天、今天、明天) //昨天的时间var day1 new Date();day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);var s1 day1.getFullYear() "-" (day1.getMonth() 1) "-" day1.getDate();console.log(day1, s1); //今天的时间var day2 …

献给网页开发者的20款Firefox插件

毫无疑问&#xff0c;比起其他浏览器&#xff0c;Chrome虽有着明显的优势&#xff0c;但是它的劲敌Firefox却是很多前端攻城师和研发人员的挚爱&#xff0c;为了尽可能地提高用户体验&#xff0c;Firefox的社区在插件开发和运用上有着丰富的经验&#xff0c;说它是网站开发者的…

VC6重载字体对话框,去除颜色下拉框

为了去除字体对话框中的颜色下拉框&#xff0c;我们需要重载字体对话框类&#xff1a;CFontDialog 1. 创建一个MFC Class&#xff0c;继承自CFontDialog: // MyFontDialong.h : header file //// CMyFontDialong dialogclass CMyFontDialong : public CFontDialog {DECLARE_DY…

Mac系统下如何使用命令行方式启动MySQL

首先&#xff0c;先去官网下载MySQL&#xff0c;选择Mac版本的DMG格式的文件。 官网地址为&#xff1a;dev.mysql.com/downloads/mysql/5.7.html 然后下载后&#xff0c;直接双击对应的dmg格式的文件进行安装即可。接下来&#xff0c;我们可以先看下如何在系统偏好设置中启动M…

android之隐示意图跳转启动另一个activity

主面板布局&#xff1a;layout/activity_main.xml <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android" android:layout_width"match_parent" android:layout_height"match_parent" android:orientation"…

中国移动话费查询,短信查询,各种免费查询!以后别打10086了

发送YE/CXYE到10086,余额查询 发送CXBX到10086&#xff0c;查询当月套餐剩余短信条数。 发送CXGFX到10086&#xff0c;查询当月飞信GPRS套餐剩余流量。 发送CXGTC到10086&#xff0c;查询当月GPRS套餐剩余流量。 发送CXCCT到10086&#xff0c;查询当月超级畅听套餐剩余流量。 发…

利用XML生成Excel

先用Excel将我们要生成的表格设计好&#xff1a; 然后另存为XML表格&#xff1a; 将生成的Book1.xml复制到项目中并打开: 找到Table节点&#xff0c;将节点的ss:ExpandedRowCount”2” 删除掉 往下会看到我们刚输入的标题了吧 <Row> <Cell ss:StyleID"s23"&…