uni-app 表单及表单组件

我是棒棒冰 發表於 2021-2-7 09:30:00

<p><strong>表单：用于数据的收集和数据的提交</strong></p>
<p><strong>官网地址：https://uniapp.dcloud.io/component/</strong></p>
<p><strong>1.button组件</strong></p>
<p>属性说明</p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>生效时机</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>String</td>
<td>default</td>
<td>按钮的大小</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>default</td>
<td>按钮的样式类型</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>plain</td>
<td>Boolean</td>
<td>false</td>
<td>按钮是否镂空，背景色透明</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>false</td>
<td>是否禁用</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>loading</td>
<td>Boolean</td>
<td>false</td>
<td>名称前是否带 loading 图标</td>
<td> </td>
<td>App-nvue 平台，在 ios 上为雪花，Android上为圆圈</td>
</tr>
<tr>
<td>form-type</td>
<td>String</td>
<td> </td>
<td>用于 <code><form></code> 组件，点击分别会触发 <code><form></code> 组件的 submit/reset 事件</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>open-type</td>
<td>String</td>
<td> </td>
<td>开放能力</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>hover-class</td>
<td>String</td>
<td>button-hover</td>
<td>指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果</td>
<td> </td>
<td>App-nvue 平台暂不支持</td>
</tr>
<tr>
<td>hover-start-time</td>
<td>Number</td>
<td>20</td>
<td>按住后多久出现点击态，单位毫秒</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>hover-stay-time</td>
<td>Number</td>
<td>70</td>
<td>手指松开后点击态保留时间，单位毫秒</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>app-parameter</td>
<td>String</td>
<td> </td>
<td>打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效</td>
<td> </td>
<td>微信小程序、QQ小程序</td>
</tr>
<tr>
<td>hover-stop-propagation</td>
<td>boolean</td>
<td>false</td>
<td>指定是否阻止本节点的祖先节点出现点击态</td>
<td> </td>
<td>微信小程序</td>
</tr>
<tr>
<td>lang</td>
<td>string</td>
<td>'en'</td>
<td>指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。</td>
<td> </td>
<td>微信小程序</td>
</tr>
<tr>
<td>session-from</td>
<td>string</td>
<td> </td>
<td>会话来源，open-type="contact"时有效</td>
<td> </td>
<td>微信小程序</td>
</tr>
<tr>
<td>send-message-title</td>
<td>string</td>
<td>当前标题</td>
<td>会话内消息卡片标题，open-type="contact"时有效</td>
<td> </td>
<td>微信小程序</td>
</tr>
<tr>
<td>send-message-path</td>
<td>string</td>
<td>当前分享路径</td>
<td>会话内消息卡片点击跳转小程序路径，open-type="contact"时有效</td>
<td> </td>
<td>微信小程序</td>
</tr>
<tr>
<td>send-message-img</td>
<td>string</td>
<td>截图</td>
<td>会话内消息卡片图片，open-type="contact"时有效</td>
<td> </td>
<td>微信小程序</td>
</tr>
<tr>
<td>show-message-card</td>
<td>boolean</td>
<td>false</td>
<td>是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效</td>
<td> </td>
<td>微信小程序</td>
</tr>
<tr>
<td>@getphonenumber</td>
<td>Handler</td>
<td> </td>
<td>获取用户手机号回调</td>
<td>open-type="getPhoneNumber"</td>
<td>微信小程序</td>
</tr>
<tr>
<td>@getuserinfo</td>
<td>Handler</td>
<td> </td>
<td>用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo</td>
<td>open-type="getUserInfo"</td>
<td>微信小程序</td>
</tr>
<tr>
<td>@error</td>
<td>Handler</td>
<td> </td>
<td>当使用开放能力时，发生错误的回调</td>
<td>open-type="launchApp"</td>
<td>微信小程序</td>
</tr>
<tr>
<td>@opensetting</td>
<td>Handler</td>
<td> </td>
<td>在打开授权设置页并关闭后回调</td>
<td>open-type="openSetting"</td>
<td>微信小程序</td>
</tr>
<tr>
<td>@launchapp</td>
<td>Handler</td>
<td> </td>
<td>从小程序打开 App 成功的回调</td>
<td>open-type="launchApp"</td>
<td>微信小程序</td>
</tr>
</tbody>
</table>
<div class="cnblogs_code">
<pre><template>
<view>
   <view class="uni-padding-wrap uni-common-mt">
         <button type="primary">页面主操作 Normal</button>
         <button type="primary" loading="true">页面主操作 Loading</button>
         <button type="primary" disabled="true">页面主操作 Disabled</button>
         <button type="default">页面次要操作 Normal</button>
         <button type="default" disabled="true">页面次要操作 Disabled</button>
         <button type="warn">警告类操作 Normal</button>
         <button type="warn" disabled="true">警告类操作 Disabled</button>
         <view class="button-sp-area">
            <button type="primary" plain="true">按钮</button>
            <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
            <button type="default" plain="true">按钮</button>
            <button type="default" disabled="true" plain="true">按钮</button>
            <button class="mini-btn" type="primary" size="mini">按钮</button>
            <button class="mini-btn" type="default" size="mini">按钮</button>
            <button class="mini-btn" type="warn" size="mini">按钮</button>
         </view>
   </view>
</view>
</template>

<script>
<span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> _self;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
   data() {
         </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {


         }
   }
}
</span></script>

<style>

</style></pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/2259678/202102/2259678-20210207092430386-1255904087.png"></p>
<p> </p>
<p><strong> 2.checkbox：多项选择器，内部由多个checkbox组成。</strong></p>
<p>属性说明</p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>String</td>
<td> </td>
<td><code><checkbox></code> 标识，选中时触发 <code><checkbox-group></code> 的 change 事件，并携带 <code><checkbox></code> 的 value。</td>
</tr>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>false</td>
<td>是否禁用</td>
</tr>
<tr>
<td>checked</td>
<td>Boolean</td>
<td>false</td>
<td>当前是否选中，可用来设置默认选中</td>
</tr>
<tr>
<td>color</td>
<td>Color</td>
<td> </td>
<td>checkbox的颜色，同css的color</td>
</tr>
</tbody>
</table>
<div class="cnblogs_code">
<pre><template>
<view>
   <view class="uni-padding-wrap uni-common-mt">
         <view class="uni-title uni-common-mt">默认样式</view>
         <view>
            <checkbox-group>
               <label>
                     <checkbox value="cb" checked="true" />选中
               </label>
               <label>
                     <checkbox value="cb" />未选中
               </label>
            </checkbox-group>
         </view>
         <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
         <view>
            <checkbox-group>
               <label>
                     <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
               </label>
               <label>
                     <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
               </label>
            </checkbox-group>
         </view>
   </view>

   <view class="uni-padding-wrap">
         <view class="uni-title uni-common-mt"><span style="color: rgba(0, 0, 0, 1)">
            推荐展示样式
            </span><text>\n使用 uni-list 布局</text>
         </view>
   </view>
   <view class="uni-list">
         <checkbox-group @change="checkboxChange">
            <label class="uni-list-cell uni-list-cell-pd" v-<span style="color: rgba(0, 0, 255, 1)">for</span>="item in items" :key="item.value">
               <view>
                     <checkbox :value="item.value" :checked="item.checked" />
               </view>
               <view>{{item.name}}</view>
            </label>
         </checkbox-group>
   </view>
</view>
</template>
<script><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
   data() {
         </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
            title: </span>'checkbox 复选框'<span style="color: rgba(0, 0, 0, 1)">,
            items: [{
                     value: </span>'USA'<span style="color: rgba(0, 0, 0, 1)">,
                     name: </span>'美国'<span style="color: rgba(0, 0, 0, 1)">
               },
               {
                     value: </span>'CHN'<span style="color: rgba(0, 0, 0, 1)">,
                     name: </span>'中国'<span style="color: rgba(0, 0, 0, 1)">,
                     checked: </span>'true'<span style="color: rgba(0, 0, 0, 1)">
               },
               {
                     value: </span>'BRA'<span style="color: rgba(0, 0, 0, 1)">,
                     name: </span>'巴西'<span style="color: rgba(0, 0, 0, 1)">
               },
               {
                     value: </span>'JPN'<span style="color: rgba(0, 0, 0, 1)">,
                     name: </span>'日本'<span style="color: rgba(0, 0, 0, 1)">
               },
               {
                     value: </span>'ENG'<span style="color: rgba(0, 0, 0, 1)">,
                     name: </span>'英国'<span style="color: rgba(0, 0, 0, 1)">
               },
               {
                     value: </span>'FRA'<span style="color: rgba(0, 0, 0, 1)">,
                     name: </span>'法国'<span style="color: rgba(0, 0, 0, 1)">
               }
            ]
         }
   },
   methods: {
         checkboxChange: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (e) {
            </span><span style="color: rgba(0, 0, 255, 1)">var</span> items = <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.items,
               values </span>=<span style="color: rgba(0, 0, 0, 1)"> e.detail.value;
            </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 0, lenI = items.length; i < lenI; ++<span style="color: rgba(0, 0, 0, 1)">i) {
               const item </span>=<span style="color: rgba(0, 0, 0, 1)"> items
               </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(values.includes(item.value)){
                     </span><span style="color: rgba(0, 0, 255, 1)">this</span>.$set(item,'checked',<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">)
               }</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
                     </span><span style="color: rgba(0, 0, 255, 1)">this</span>.$set(item,'checked',<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">)
               }
            }
         }
   }
}
</span></script>

<style><span style="color: rgba(0, 0, 0, 1)">
.uni</span>-list-<span style="color: rgba(0, 0, 0, 1)">cell {
justify</span>-content: flex-<span style="color: rgba(0, 0, 0, 1)">start
}
</span></style></pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/2259678/202102/2259678-20210207092853894-320702319.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/ckfuture/p/14383915.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 表单及表单组件