一开始我按照https://www.jianshu.com/p/7fc08b1b4d85 的教程,
vue:
<template>
<view class="body">
<input class="input iconfont icon-search" type="text" placeholder="请输入商品名称" @click="search" disabled placeholder-class=" grey" />
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods:{
search(e){
console.log("空反馈")
}
}
}
</script>
<style lang="scss">
.body{
height: 100%;
}
.input{
// 添加圆角
border-radius: 25px;
// 框框颜色
background-color: yellowgreen;
// 文字居中
text-align: center;
// 框框居中
margin: auto;
width: 80%;
height: 40px;
}
@import "../../iconfont.css";
</style>
iconfont.css
@font-face {
font-family: 'iconfont'; /* Project id 4039333 */
src: url('https://at.alicdn.com/t/c/font_4039333_bmbb8xq7sar.woff2?t=1682481363994') format('woff2'),
url('https://at.alicdn.com/t/c/font_4039333_bmbb8xq7sar.woff?t=1682481363994') format('woff'),
url('https://at.alicdn.com/t/c/font_4039333_bmbb8xq7sar.ttf?t=1682481363994') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
content: "\e65c";
}
.icon-shouye:before {
content: "\e8b9";
}
.icon-wode:before {
content: "\e8bb";
}
.icon-zhibo:before {
content: "\e8c1";
}
.icon-wode1:before {
content: "\e8c6";
}
.icon-shouye1:before {
content: "\e8c7";
}
.icon-zhibo-copy:before {
content: "\e8c8";
}
模拟后成了这样
百度了其他方法也无法让这俩在同一行。
然后我又仿照https://www.jianshu.com/p/a9cc859d8c71 (该文也是引用上面链接的)方法
只修改了这部分
<template>
<view class="body">
<input class="input" type="text" :placeholder="icon" @click="search" disabled placeholder-class=" grey" />
</view>
</template>
<script>
export default{
data() {
return {
icon: '\ue65c请输入商品名称'
}
},
methods:{
search(e){
console.log("空反馈")
}
}
}
</script>
最后却成了这样
我也不知道错在哪了,怎么搜索都改不了,不知道问题出在哪。