uni-app 表單及表單組件

表單：用於數據的收集和數據的提交

官網地址：https://uniapp.dcloud.io/component/

1.button組件

屬性說明

屬性名	類型	默認值	說明	生效時機	平台差異說明
size	String	default	按鈕的大小
type	String	default	按鈕的樣式類型
plain	Boolean	false	按鈕是否鏤空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名稱前是否帶 loading 圖標		App-nvue 平台，在 ios 上為雪花，Android上為圓圈
form-type	String		用於 <form> 組件，點擊分別會觸發 <form> 組件的 submit/reset 事件
open-type	String		開放能力
hover-class	String	button-hover	指定按鈕按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果		App-nvue 平台暫不支持
hover-start-time	Number	20	按住后多久出現點擊態，單位毫秒
hover-stay-time	Number	70	手指松開后點擊態保留時間，單位毫秒
app-parameter	String		打開 APP 時，向 APP 傳遞的參數，open-type=launchApp時有效		微信小程序、QQ小程序
hover-stop-propagation	boolean	false	指定是否阻止本節點的祖先節點出現點擊態		微信小程序
lang	string	'en'	指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文。		微信小程序
session-from	string		會話來源，open-type="contact"時有效		微信小程序
send-message-title	string	當前標題	會話內消息卡片標題，open-type="contact"時有效		微信小程序
send-message-path	string	當前分享路徑	會話內消息卡片點擊跳轉小程序路徑，open-type="contact"時有效		微信小程序
send-message-img	string	截圖	會話內消息卡片圖片，open-type="contact"時有效		微信小程序
show-message-card	boolean	false	是否顯示會話內消息卡片，設置此參數為 true，用戶進入客服會話會在右下角顯示"可能要發送的小程序"提示，用戶點擊后可以快速發送小程序消息，open-type="contact"時有效		微信小程序
@getphonenumber	Handler		獲取用戶手機號回調	open-type="getPhoneNumber"	微信小程序
@getuserinfo	Handler		用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數的detail中獲取到的值同uni.getUserInfo	open-type="getUserInfo"	微信小程序
@error	Handler		當使用開放能力時，發生錯誤的回調	open-type="launchApp"	微信小程序
@opensetting	Handler		在打開授權設置頁並關閉后回調	open-type="openSetting"	微信小程序
@launchapp	Handler		從小程序打開 App 成功的回調	open-type="launchApp"	微信小程序

<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>
    var _self;
    export default {
        data() {
            return {
     
              
            }
        }
    }
</script>

<style>


</style>

 

 2.checkbox：多項選擇器，內部由多個checkbox組成。

屬性說明

屬性名	類型	默認值	說明
value	String		<checkbox> 標識，選中時觸發 <checkbox-group> 的 change 事件，並攜帶 <checkbox> 的 value。
disabled	Boolean	false	是否禁用
checked	Boolean	false	當前是否選中，可用來設置默認選中
color	Color		checkbox的顏色，同css的color

<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">
                推薦展示樣式
                <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-for="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>
    export default {
        data() {
            return {
                title: 'checkbox 復選框',
                items: [{
                        value: 'USA',
                        name: '美國'
                    },
                    {
                        value: 'CHN',
                        name: '中國',
                        checked: 'true'
                    },
                    {
                        value: 'BRA',
                        name: '巴西'
                    },
                    {
                        value: 'JPN',
                        name: '日本'
                    },
                    {
                        value: 'ENG',
                        name: '英國'
                    },
                    {
                        value: 'FRA',
                        name: '法國'
                    }
                ]
            }
        },
        methods: {
            checkboxChange: function (e) {
                var items = this.items,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    const item = items[i]
                    if(values.includes(item.value)){
                        this.$set(item,'checked',true)
                    }else{
                        this.$set(item,'checked',false)
                    }
                }
            }
        }
    }
</script>

<style>
.uni-list-cell {
    justify-content: flex-start
}
</style>