?课堂学习：第三方组件库 使用第三方组件库制作添加页
一、第三方组件库的安装
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'?/>