当前位置: 首页 > Web前端 > HTML5

玩转BUI系列2--自定义范围选择器range

时间:2023-04-05 00:17:09 HTML5

1.兼容HTML5Input中扩展了type的类型,设置type="range"即可轻松得到一个滑块控件。滑块对应属性max——指定允许的最大值。min-指定允许的最小值。step-指定一个合法的数字间隔。值-指定默认值。这个效果在不同浏览器的样式支持上是不一样的,在安卓微信浏览器上是一样的效果。BUI通过style自定义样式来统一这个效果。但自定义样式只能定义为轨迹和滑动圆,滑动区域不能自动填充对应的颜色。/*定义轨道*/.bui-range::-webkit-slider-runnable-track{}/*定义滑动圈的大小*/.bui-range::-webkit-slider-thumb{}神奇的组合ofrange和progress是同一个参数,可以把两者和store结合起来,组成一个自带填充的滑动组件。示例地址:https://www.easybui.com/demos...核心代码b-model="range.value"loader.define(function(requires,exports,module,global){//合并接收到的参数letprops=Object.asign({value:1},module.props);//初始化数据行为存储varbs=bui.store({el:`#${module.id}`,scope:"range",data:{value:props.value,},methods:{},mounted:function(){}})returnbs;})3.新组件简单但只能通过上述方法满足基本需求。比如客户需要在下方显示比例尺,需要在某个范围内选择新的范围,比如年龄、身高。无法满足上述控制。基于新版本1.7.4,创建了一个新的范围选择器组件。特点简单的开始和结束范围选择;范围内的选择;垂直范围选择;垂直反向范围选择;量程;浮标;支持负数;效果预览value//valuevarval=bui.history.getComponent("range").value()示例https://www.easybui.com/demos...