您现在的位置是:网站首页>>前端技术>>weui

weui —— 表单

发布时间:2019-04-30 16:03:27作者:wangjian浏览量:724点赞量:0

    在weui中Input,用于表单,可以分成“输入型”和“选择型”两种。输入型包括单行文本(文本、数值、电话、密码等)、多行文本;选择型包括下拉选择、单选、多选、开关、日期时间等。在 WeUI 中,表单通常与 Cell 组件配合使用

    1:单选

    <div class="weui-cells weui-cells_radio">
        <label class="weui-cell weui-check__label" for="x11">
            <div class="weui-cell__bd">
                <p>选择一</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="radio1" id="x11" required tips="请选择" >
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="x12">
            <div class="weui-cell__bd">
                <p>选择二</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>

    现象如下:

    image.png

    2:多选:

    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="s11">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>选择一</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="s12">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>选择二</p>
            </div>
        </label>
    </div>

    现象如下:

    image.png

    3:输入框

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">输入框</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入"  emptyTips="请输入" notMatchTips="请输入正确格式"/>
        </div>
    </div>

    现象如下:

    image.png

    4:时间选择器

    <a href="javascript:;" id="datePickerBtn" class="weui-btn weui-btn_primary">时间选择</a>
    <script>
        document.querySelector('#datePickerBtn').addEventListener('click', function () {
            weui.datePicker({
                start: '2016-12-29',//起始时间
                end: '2030-12-29',//结束事件
                cron: '* */2 0',//
                defaultValue: [2017, 7, 9],//默认时间
                onChange: function onChange(result) {
                    console.log(result);//改变时间触发事件
                },
                onConfirm: function onConfirm(result) {
                    console.log(result);//选择时间触发事件
                },
                id: 'datePicker'
            });
        });
    </script>

    现象如下:

    image.png

    5:检索

    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear"></a>
            </div>
            <label class="weui-search-bar__label">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn">取消</a>
    </div>
    <script>
        weui.searchBar('#searchBar');
    </script>

    现象如下:

    image.png

    6:弹出窗选择

    <a href="javascript:;" id="datePickerBtn" class="weui-btn weui-btn_primary">弹出窗选择</a>
    <script>
        document.querySelector('#datePickerBtn').addEventListener('click', function () {
        weui.actionSheet([
            {
                label: '选择一',
                onClick: function () {
                    console.log('选择一');
                }
            }, {
                label: '选择二',
                onClick: function () {
                    console.log('选择二');
                }
            }, {
                label: '选择三',
                onClick: function () {
                    console.log('选择三');
                }
            }
        ], [
            {
                label: '取消',
                onClick: function () {
                    console.log('取消');
                }
            }
        ], {
            className: 'custom-classname',
            onClose: function(){
                console.log('关闭');
            }
        });
        });
    </script>

    现象如下:

    image.png


    其他的一些表单组件可以参考weui的文档

    https://github.com/Tencent/weui/wiki

    https://github.com/Tencent/weui.js/blob/master/docs/README.md


上一篇:weui实现图片上传

下一篇:weui —— 按钮

0 +1