mpvue怎么使用第三方样式weui

当我们新建一个mpvue项目后，我们需要在项目的/src/main.js 中引入 weui.css，

地址https://github.com/KuangPF/mpvue-weui/blob/master/static/weui/weui.css；

使用：

search这部分是利用小程序input组件实现，在下面的示例中主要使用了focus和bindinput两个属性，由于mpvue从底层支持 Vue.js 语法和构建工具体系，因此可以用vue的v-model进行双向数据绑定，示例如下：

<template><div class="page"><div class="page__hd"><div class="page__title">SearchBar</div><div class="page__desc">搜索栏</div></div><div class="page__bd"><div class="weui-search-bar"><div class="weui-search-bar__form"><div class="weui-search-bar__box"><icon class="weui-icon-search_in-box" type="search" size="14"></icon><input type="text" class="weui-search-bar__input" placeholder="搜索" v-model="inputVal" :focus="inputShowed" @input="inputTyping" /><div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput"><icon type="clear" size="14"></icon></div></div><label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput"><icon class="weui-icon-search" type="search" size="14"></icon><div class="weui-search-bar__text">搜索</div></label></div><div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div></div><div class="weui-cells searchbar-result" v-if="inputVal.length > 0"><navigator url="" class="weui-cell" hover-class="weui-cell_active"><div class="weui-cell__bd"><div>实时搜索文本</div></div></navigator><navigator url="" class="weui-cell" hover-class="weui-cell_active"><div class="weui-cell__bd"><div>实时搜索文本</div></div></navigator><navigator url="" class="weui-cell" hover-class="weui-cell_active"><div class="weui-cell__bd"><div>实时搜索文本</div></div></navigator><navigator url="" class="weui-cell" hover-class="weui-cell_active"><div class="weui-cell__bd"><div>实时搜索文本</div></div></navigator></div></div></div>
</template><script>
export default {data() {return {inputShowed: false,inputVal: ""}},methods: {showInput() {this.inputShowed = true;},hideInput() {this.inputVal = '';this.inputShowed = false},clearInput() {this.inputVal = '';},inputTyping(e) {console.log(e);this.inputVal = e.mp.detail.value}}
}
</script><style scoped>
.searchbar-result {margin-top: 0;font-size: 14px;
}
.searchbar-result:before {display: none;
}
.weui-cell {padding: 12px 15px 12px 35px;
}
</style>

效果：

mpvue怎么使用第三方样式weui相关推荐

vue 项目引入第三方样式
方法一: 第三方资源存放在:src/assets/css/bootstrap.css //app.vue <script> import './assets/css/bootstrap.c ...
vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式文章目录 vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式 ...
vue+elementui项目打包后样式变化问题
main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了. 把第三方组件 ElementUI放在前面引入,router放在后面引入,就可以实现组件样式在第三 ...
ThinkPhp5使用bootstrap样式分页
1.查看分页的配置在application/config.php文件中最后. //分页配置 'paginate' => [ 'type' => 'bootstrap', 'var_pag ...
html怎么引入sass样式,[样式设置] 使用sass格式的方式
用Angular CLI设置样式格式默认样式格式是 css, 使用 scss | sass 作为样式 ng new my-project --style=scss # 可选flags --style ...
部署项目的问题（一）—— vue工程打包上线样式错乱问题
1. 打开index.html一片空白参考:链接: link. 修改build对象里的assetsPublicPath为'./' assetsPublicPath: './' 2.ElementUI ...
vue工程打包上线样式错乱问题 - bug解决（4种）
vue工程打包上线样式错乱问题 - bug总结(4种) 项目开发完成后,执行npm run build,进行打包,将打包完成的dist文件部署在服务器.配置好域名解析,就可以实现工程上线. 上线后,有 ...
全局样式覆盖vant样式的方法
方法1:提高样式的层级,用!important 方法2(推荐,方便覆盖第三方样式):在入口文件调整加载顺序,把全局样式文件写在加载vant组件库样式后面,因为层叠样式表后者会覆盖前者 // 加载van ...
【饭谈】【测试圈相亲平台开发流程】：页面样式开发心得【工匠、智者、航海家】
如图,在我的vue前后端分离项目[测试圈相亲平台]的开发中,成功使用了第三方的页面样式级组件. 这使得很多粉丝朋友倍感新奇,纷纷效仿.于是就有人感叹到,辛苦学习前端样式的意义在哪? 哪怕是一个新手,只 ...

mpvue怎么使用第三方样式weui

mpvue怎么使用第三方样式weui相关推荐

最新文章

热门文章