课堂学习：第三方组件库 使用第三方组件库制作添加页
一、第三方组件库的安装
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 输入框
<view class="add">
label 输入框左侧文本
type='textarea' 多行文本域 对于 textarea，可以通过autosize属性设置高度自适应。
<van-field label='标题：' title-width='120rpx' model:value = '{{title}}' placeholder="请输入用户名" border="{{true}}"/>
<van-field label='分类：' readonly bindtap="openPopup" title-width='120rpx' model:value='{{section_name}}' placeholder="请选择" border="{{true}}"/>
<van-field label='答案：' title-width='120rpx' model:value='{{answer}}' placeholder="请输入用户名" border="{{true}}" type='textarea' autosize custom-style='height:160rpx' />
<van-field label='解析：' title-width='120rpx' model:value='{{desc}}' placeholder="请输入用户名" border="{{true}}" type='textarea' autosize custom-style='height:160rpx' />
</view>
三、button 按钮
按钮有一个属性 loading （是否显示为加载状态）可用于节流
<view class="btn">
//bandtab 是原生事件 bandclick 是第三方组件事件：
<van-button loading='{{isLoading}}' size = 'small' bindclick = 'addSubject' plain type="primary">提交</van-button>
</view>
四、Popup 弹出层
show 是否显示弹出层 默认是false
bind:close 关闭弹出层时触发 冒号可以省略 bindclick
<!-- 弹出层 -->
<van-popup show="{{isShow}}" position = 'bottom' bind:close="closePopup">
<!-- 选择器 -->
<van-picker columns="{{ sections }}" show-toolbar value-key='Name' bind:cancel = 'onCancel' bind:confirm = 'onConfirm' />
</van-popup>
五、picker 选择器
columns 对象数组，配置每一列显示的数据
show-toolbar 是否显示顶部栏
value-key 选项对象中，文字对应的 key 对象数组columns中的属性
confirm-button-text 确认按钮文字
cancel-button-text 取消按钮文字
bind:confirm 点击确定时触发
bind:cancel 点击取消时触发
<!-- 选择器 -->
<van-picker columns="{{ sections }}" show-toolbar value-key='Name' bind:cancel = 'onCancel' bind:confirm = 'onConfirm' />
