"范围选择器"组件:<range> —— 快应用组件库H-UI

最新推荐文章于 2024-02-18 14:09:18 发布
最新推荐文章于 2024-02-18 14:09:18 发布
阅读量336 收藏
点赞数
分类专栏： 表单组件
Copyright 2020 h-ui.mobi
本文链接：https://blog.csdn.net/weixin_41324043/article/details/105559305
版权

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
             <range id="range1" params="{{params}}"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w538

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range2" params="{{params}}" form-horizontal="true"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range3" params="{{params}}" form-horizontal="true" no-border="true"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w536

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range4" params="{{params}}" value="38" title="none"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w536

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range5" params="{{params}}" title="参赛人数"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range6" params="{{params}}" start-value="38" end-value="55"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range7" params="{{params}}" type="default"></range>
            <range id="range8" params="{{params}}" type="primary"></range>
            <range id="range9" params="{{params}}" type="info"></range>
            <range id="range10" params="{{params}}" type="warning"></range>
            <range id="range11" params="{{params}}" type="danger"></range>
            <range id="range12" params="{{params}}" type="success"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range13" params="{{params}}" min="10" max="90"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w536

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range14" params="{{params}}" not-blank="false"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w536

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range15" params="{{params}}" valid="has-error" form-error="非法的取值范围！"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range16" params="{{params}}" disabled="true"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range17" params="{{params}}" valid="none" not-blank="false"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

-w537

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="range" src="../Common/ui/h-ui/form/c_range"></import>
<template>
    <div class="container">
        <form>
            <range id="range18" params="{{params}}"></range>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    import prompt from '@system.prompt'

    export default {
        private: {
            params: {}
        },
        onInit() {
            this.$on('range18_dispatchEvt',this.dispatchEvt)
        },
        dispatchEvt(evt) {
            // 弹窗显示详细说明
            prompt.showToast({
                message: evt.detail.value,
                duration: 1,
                gravity: 'top'
            })
        }
    }
</script>
扫码体验

-w254

快应用H-UI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两个滑块的范围选择UISlider
08-13
实现了一个有两个滑块，可以选择一个范围的UISlider。是在网上找到的一个控件的基础上作了包装，可以实时显示现在选择范围。可用于选择价格范围等。 现有的问题： 1、没有实现step的功能。 2、滑块的滑动还不是特别灵敏。 有解决的记得回我一下啊。
react-chat-ui:React一个用于构建聊天UI的React组件库
04-30
:speak-no-evil_monkey: React聊天UI 用于构建聊天UI的React组件库。赞助由赞助： 特征自动滚动到底部超级好用多用户分组（在演示中试用） 请记住，该项目仍处于开发的早期阶段。 如果您遇到错误或有功能请求，请在...
vue3范围选择组件封装
次顶级的博客
08-24 658
（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）组件使用到的handleStepNumber方法。以上 👆 是个人前端项目，欢迎提出您的建议😊。以上 👆 是个人前端项目，欢迎提出您的建议😊。组件使用到的findCloseNum方法。1.组件可以实现最小值和最大值的设置。SubTopH前端开发个人站。3.组件长度根据父组件自定义。根据自己的需求可进行更多扩展。4.滑动和点击会改变范围值。
自定义数值范围选择组件
future_1_的博客
10-28 872
自定义数值范围选择组件
【开源 UI 组件】Flutter 图表范围选择器
张风捷特烈的博客
08-23 157
theme: cyanosis 携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 4 天，点击查看活动详情 前言 最近有一个小需求：图表支持局部显示，如下底部的区域选择器支持 - 左右拖动调节中间区域 - 拖拽中间区域，可以进行移动 - 图表数据根据中间区域的占比进行显示部分数据 这样当图表的数据量过大，不宜全部展示时，可选择的局部展示就是个不错的解决...
woRangeSelector是一款范围选择器，可用于时间选择器，段落选择器等应用场景
最新发布
狼性书生
02-18 232
woRangeSelector是一款采用uniapp-vue3开发的支持H5、微信小程序的范围选择器，可用于时间选择器，段落选择器等应用场景
material-ui-datetime-range-picker:基于Material-UI构建的日期时间范围选择器
05-02
Material-UI日期时间范围选择器是基于组件构建的日期时间范围选择器。 查看他们的以获取实时示例。安装Material-UI日期时间范围选择器可作为。 npm install material-ui-datetime-range-picker笔记这项工作仍在进行...
vue-datepicker-ui:Vue 的日期选择器组件
07-24
Vue 日期选择器组件 VueJs 的 Datepicker 组件 ( ) 使用 // main.js file import VueDatepickerUi from 'vue-datepicker-ui' import 'vue-datepicker-ui/lib/vuedatepickerui.css' ; Vue . component ( '...
react-native-ui-lib：React Native的UI组件库
02-01
用于React Native的UI工具集和组件库 查看我们的。 我们的 下载我们的Expo演示应用 （您将需要Expo App） 正在安装 请参阅安装说明。 新的主要版本5.0 查看 对于React Native&gt; = 0.60.0 请使用react-native-ui-...
ivy-ui:符合Web Components规范的web组件库
04-02
常春藤符合Web Components规范的web组件库使用须知- 所有组件的使用方式都和原生方式一致（获取元素的属性...）- 自定义事件（非原生事件）都需要使用`addEventListener`来绑定使用说明npm或纱npm i ivy-uiyarn add ...
jQuery多类型范围选择器插件
12-11
range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围，星期范围，月份范围，整数范围等。并且可以设置为只支持单向选择，或双向选择的范围选择器。
Query+jRange数值范围选择控件
09-06
Query+jRange数值范围选择控件
Excel接口导入类头文件
06-16
Excel接口，导入类，头文件： CApplication.h、 CRange.h 、CWorkbooks.h、CWorkbook.h、CWorksheets.h、CWorksheet.h
html范围选择器,jQuery多类型范围选择器插件
weixin_42503487的博客
06-03 280
range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围，星期范围，月份范围，整数范围等。并且可以设置为只支持单向选择，或双向选择的范围选择器。安装可以通过bower来安装range-picker范围选择器插件。bower install --save range-picker使用方法在页面中引入range-picker.css，jQuery和range...
基于element多选框做的数据范围选择器
sz950811的博客
12-05 883
基于elementui多选框实现范围选择器效果
玩转BUI系列2--自定义区间范围选择器range
owilson的专栏
10-09 324
HTML5范围选择器的兼容样式与不足，结合Progress弥补不足，再扩展支持更多需求的组件
mint-ui range 源码(?)分析
dongcehao的博客
03-10 2059
mint-ui range 分析 前段时间学习了 mint-ui， 一看，感觉这个 ui 真的是 前端的福音，但是继续学习感觉怪怪的，有一部分出现了问题， 网站上大部分有解答，但是 range 我发现我真心是 找不到答案，就是 拖不动那个滑块，百度也没有资源 当时 是弄了个 input type=range ，正好参数一致，对好位置后放在 那个 range 上面隐形，能正常使用 &...
组件分享：任意地图范围组件 InDoorView
01-25 1649
调研发现了可以用于显示 商场门店示意图、建筑示意图、照片中物品摆放位置……的库 InDoorSurfaceView 作者博客 引入： compile ‘com.github.karonl:InDoorSurfaceView:1.0’ 库生产环境: compileSdkVersion 24 minSdkVersion 16 使用解析 1）使用线程导入全局示意图，案例中是一个800kb的jpg文件，使用bitmap引入，设置为rgb_565 2）读取预设数据，确定点击位置 1、有个数据类：DataJson，其中
"日期范围"组件:&lt;date-range&gt; —— 快应用组件库H-UI
H-UI官方博客
04-16 347
&lt;import name="form" src="../Common/ui/h-ui/form/c_form"&gt;&lt;/import&gt; &lt;import name="date-range" src="../Common/ui/h-ui/form/c_date_range"&gt;&lt;/import&gt; &lt;template&gt; &lt;div cl...
GtvAttestationHostTestCases Attestation test was not successful expected:&lt;1&gt; but was:&lt;0&gt;
05-12
这个错误信息看起来是在进行某种测试时出现了错误，具体的原因可能需要查看测试代码和环境配置。一般来说，这个错误提示表明测试的期望值是1，但是实际测试结果是0，也就是测试没有通过。您可以尝试排查以下可能的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值