小程序 笔记11.17

 课堂学习：第三方组件库 使用第三方组件库制作添加页

一、第三方组件库的安装

https://vant-contrib.gitee.io/vant-weapp/#/home  去这个网站

1.新建终端 初始化一个包的描述文件

npm init 回车

起一个名字 不能是中文 一路回车

2.输入这个 安装

npm i @vant/weapp -S --production

详情 本地设置 把使用npm模块勾选上

工具 构建npm

3.导入需要使用的组件

全局注册 或者 当前页面注册

打开app.json 输入代码

"usingComponents": {

    "van-field": "@vant/weapp/field/index",

    "van-button": "@vant/weapp/button/index",

    "van-popup": "@vant/weapp/popup/index",

    "van-picker": "@vant/weapp/picker/index"

  },

代码中的每一行都是一个组件库

二、Field 输入框

label 输入框左侧文本

 type='textarea'   多行文本域  对于 textarea，可以通过autosize属性设置高度自适应。

  

  

  

  

三、button 按钮

按钮有一个属性 loading （是否显示为加载状态）可用于节流

//bandtab 是原生事件 bandclick 是第三方组件事件：

  提交

四、Popup 弹出层

show  是否显示弹出层 默认是false

bind:close  关闭弹出层时触发  冒号可以省略 bindclick

  

五、picker 选择器

columns  对象数组，配置每一列显示的数据

show-toolbar  是否显示顶部栏

value-key  选项对象中，文字对应的 key  对象数组columns中的属性

confirm-button-text  确认按钮文字

cancel-button-text  取消按钮文字

bind:confirm  点击确定时触发

bind:cancel  点击取消时触发