组件库开发（四）

目录

介绍

Checkbox组件

Checkbox属性

LoginReg组件

LoginReg属性

---

介绍

本篇主要介绍checkbox组件和login-reg组件

Checkbox组件

它的参数如下

• checked: 初始值 是否选中，

• theme: checkbox的主题色，

• disabled：是否禁用，

• unsure：是否处于<不确定>状态，

• modelValue：v-model绑定的值 Boolean，

• size：组件的大小，

• label：组件的标签

export const checkboxProps = {
    checked: {
        type: Boolean,
        default: false,
        required: false
    },
    theme: {
        type: String,
        default: DefaultColor,
        required: false,
        validator(value:ComponentConstants.StandardColor){
            return ComponentConstants.StandardColorArr.includes(value)
        },
    },
    disabled: {
        type: Boolean,
        default: false,
        required: false
    },
​
    // 是否处于"不确定状态"    
    unsure: {
        type: Boolean,
        default: false,
        required: false
    },
    modelValue: {
        type: Boolean,
        default: false,
        required: false
    },
    size: {
        type: String,
        default: DefaultSize,
        required: false,
        validator(value:ComponentConstants.StandardSize){
            return ComponentConstants.StandardSizeArr.includes(value)
        }
    },
    label: {
        type: String,
        default: "",
        required: false
    }
};

例子：

​​

<script setup lang='ts'>
    const select = ref( false );
​
</script>
<template>
    <div>
        <s-checkbox v-model="select" label="是否堂食" size="large"></s-checkbox>
        <s-checkbox v-model="select" theme="success"  label="是否堂食"></s-checkbox>
        <s-checkbox v-model="select" unsure theme="warning"  label="待确认" size="small"></s-checkbox>
        <s-checkbox disabled label="Disabled"></s-checkbox>
  </div>
</template>

Checkbox属性

属性	说明	类型	可选值	默认值
checked	box的初始值	boolean	false	true/false
theme	box的主题颜色	StandardColor	"main"	"main","info","success","warning","error"
disabled	是否禁用	boolean	false	true/false
unsure	是否处于不确定状态	boolean	false	true/false
modelValue(对应v-model)	box绑定的值	boolean	false	true/false
size	box的大小	StandardSize	"default"	"large" ,"default", "small"
label	box的标签说明	string	任何一段描述性的string	""

<script lang="ts" setup>
const select = ref( false );
</script>

LoginReg组件

它的参数如下

• onLogin: 登录时触发的事件，

• onReg: 注册时触发的事件，

• onLoginSuc：登录成功时的回调，

• onRegSuc：注册时成功时的回调，

• onLoginFail：登录失败时的回调，

• onRegFail：注册失败时的回调，

• LoginTitle：登录框的标题，

• LoginSubmitTip: 登录按钮上的提示,

• RegTitle: 注册框的标题,

• RegSubmitTip: 注册按钮上的提示

interface SceneLoginRegProps {
    onLogin:( p: { userID: string, pwd: string } ) => Promise< { done: boolean } >
    onReg: ( p: { userID: string, userNick: any, pwd: string } ) => Promise< { done: boolean } >
    onLoginSuc ?: ( userID: string ) => any,
    onRegSuc ?: ( userID: string ) => any,
    onLoginFail ?: ( userID: string ) => any,
    onRegFail ?: ( userID: string ) => any,
​
    LoginTitle ?: string;
    LoginSubmitTip ?: string;
    
    RegTitle ?: string;
    RegSubmitTip ?: string;
}

例子：

​​

<script setup lang='ts'>
    import { SLoginReg } from 'scene-ui';
    // ( p ) => Promise< { done: boolean } >
    const onLogin = ( 
        p: { 
            userID: string, 
            pwd: string 
        }
    ) => fetch( 
        'http://localhost:9000/api/login',
        {
            method: 'POST',
            headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
            }),
            body: new URLSearchParams([["userID", p.userID],["pwd", p.pwd]]).toString()
        }
    )
    .then((res) => {
        return res.json()
    })
​
    const onReg = ( 
        p: { 
            userID: string, 
            pwd: string, 
            userNick: string 
        } 
    ) => fetch( 
            'http://localhost:9000/api/reg',
            {
                method: 'POST',
                headers: new Headers({
                'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
                }),
                body: new URLSearchParams([["userID", p.userID],["pwd", p.pwd], ["userNick", p.userNick]]).toString()
            }
        )
    .then((res) => {
        return res.json()
    })
​
</script>
<template>
    <s-login-reg 
    :onLogin="onLogin"
    :onReg="onReg">
    </s-login-reg>
</template>

LoginReg属性

属性	说明	类型	可选值	默认值
onLogin	登录时触发的函数	( p: { userID: string, pwd: string } ) => Promise< { done: boolean } >	-	-
onReg	注册时触发的函数	( p: { userID: string, userNick: any, pwd: string } ) => Promise< { done: boolean } >	-	-
onLoginSuc	登录成功时触发的函数 userID会被作为回调的参数	( userID: string ) => any	不管是否传入该值 都会触发一个全局的<成功提示>消息	-
onRegSuc	注册成功时触发的函数 userID会被作为回调的参数	( userID: string ) => any	不管是否传入该值 都会触发一个全局的<成功提示>消息	-
onLoginFail	登录失败时触发的函数 userID会被作为回调的参数	( userID: string ) => any	不管是否传入该值 都会触发一个全局的<失败提示>消息	-
onRegFail	注册失败时触发的函数 userID会被作为回调的参数	( userID: string ) => any	不管是否传入该值 都会触发一个全局的<失败提示>消息	-
onLoginFail	登录失败时触发的函数 userID会被作为回调的参数	( userID: string ) => any	不管是否传入该值 都会触发一个全局的<失败提示>消息	-
onRegFail	注册失败时触发的函数 userID会被作为回调的参数	( userID: string ) => any	不管是否传入该值 都会触发一个全局的<失败提示>消息	-
LoginTitle	登录的标题	string	一个描述登录目的的标题字符串	"登录"
LoginSubmitTip	登录按钮上的文字	string	-	"LOGIN"
RegTitle	注册的标题	string	一个描述注册目的的标题字符串	"注册"
RegSubmitTip	注册按钮上的文字	string	-	"点击注册"

<script lang="ts" setup> const onLogin = () => new Promise( r => r( { done: true } ) ); const onReg = () => new Promise( r => r( { done: true } ) ); </script> <style scope> div{ text-align: center; } </style>