Vue 微信小程序 uni-app学习系列《二》添加搜索插件

小咪咪 2021-09-19 11:34 201阅读 0赞

使用插件

官方文档: https://cn.vuejs.org/v2/guide/index.html

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

导入插件成功以后

在这里插入图片描述

复制上面插件的内容,到新的文件

在这里插入图片描述

修改pages.json

在这里插入图片描述

运行结果

在这里插入图片描述

第二种使用插件的方式 —引用插件

jm-search 搜索页面组件

搜索页面组件,用于搜索数据、处理历史搜索并存于本地存储。组件名jm-search。

使用方式:

在 script 中引用组件

  1. import search from "@/components/jm-search/jm-search.vue"
  2. export default {
  3. components: {uniPagination}
  4. }

用法:

  1. <template>
  2. <view>
  3. <search></search>
  4. <view class="uni-form-item uni-column">
  5. <view class="title">控制最大输入长度的input</view>
  6. <input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. import search from "@/components/jm-search/jm-search.vue"
  12. export default {
  13. components: {search},
  14. data() {
  15. return {
  16. }
  17. },
  18. methods: {
  19. }
  20. }
  21. </script>
  22. <style>
  23. </style>

发表评论

表情:
评论列表 (有 0 条评论,201人围观)

还没有评论,来说两句吧...

相关阅读