热门标签
热门文章
- 1sha256加密_【总结】基于 FPGA 的 SHA256 高效数字加密研究（五）
- 2OpenCV直方图均衡化
- 3智公网：公务员行测基础考点
- 4Day17_集合与数据结构(链表,栈和队列,Map,Collections工具类,二叉树,哈希表)
- 5CVPR2022论文列表（中英对照）
- 6【unity3D】Transform组件（如何访问和获取Transform组件）_unity 获得transform
- 7用HTML5和JavaScript实现黑客帝国风格的字符雨效果
- 8Pytorch 训练与测试时爆显存(out of memory)的一个解决方案_pytorch 缓存
- 9MySQL5.7精简操作_mysql share目录精简
- 10Linux内核链表之list_head_linux list_head
当前位置: article > 正文
"滑动选择器"组件:<h-slider> —— 快应用组件库H-UI_系统中滑动选择的原件叫什么
作者：Monodyee | 2024-02-28 14:23:07
赞
踩
系统中滑动选择的原件叫什么
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider1" params="{{params}}"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider2" params="{{params}}" value="38"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider3" params="{{params}}" value="38" form-horizontal="true"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider4" params="{{params}}" value="38" form-horizontal="true" no-border="true"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider5" params="{{params}}" value="38" title="none"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider6" params="{{params}}" value="38" title="参赛人数"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider71" params="{{params}}" value="38" type="default"></h-slider> <h-slider id="slider72" params="{{params}}" value="55" type="primary"></h-slider> <h-slider id="slider73" params="{{params}}" value="62" type="info"></h-slider> <h-slider id="slider74" params="{{params}}" value="77" type="warning"></h-slider> <h-slider id="slider75" params="{{params}}" value="15" type="danger"></h-slider> <h-slider id="slider76" params="{{params}}" value="22" type="success"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider8" params="{{params}}" value="38" min="10" max="50"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider9" params="{{params}}" value="10" step="10"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider10" params="{{params}}" value="10" not-blank="false"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider11" params="{{params}}" value="10" disabled="true"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider12" params="{{params}}" value="30" valid="has-error" form-error="非法值！"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider13" params="{{params}}" valid="none" not-blank="false"></h-slider> </form> </div> </template> <style lang="less"> @import '../Common/styles/container.less'; </style> <script> export default { private: { params: {} } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="h-slider" src="../Common/ui/h-ui/form/c_slider"></import> <template> <div class="container"> <form> <h-slider id="slider14" params="{{params}}"></h-slider> </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('slider14_dispatchEvt',this.dispatchEvt) }, dispatchEvt(evt) { // 弹窗显示详细说明 prompt.showToast({ message: evt.detail.value, duration: 1, gravity: 'top' }) } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
扫码体验
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/159448
推荐阅读
相关标签
