tm-slider 滑块

提醒

此组件与它的子妹组件双向滑块基本是一致的用法。如果你想要使用双向滑块请前往文档双向滑块。

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<tm-slider v-model="num"></tm-slider>

<script>
	export default {
		data() {
			return {
				num:0,
			}
		},
		methods: {}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11

👉完整的示例

可以复制到页面直接运行

<template>
	<view>
		<tm-menubars title="滑块" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				基础示例
			</view>
			<tm-slider v-model="num"></tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				改变最大值和颜色
			</view>
			<tm-slider color="bg-gradient-pink-accent" :max="200" v-model="num1" show-right show-left></tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				自定义slot插槽,始终显示信息标签
			</view>
			<tm-slider showTip color="bg-gradient-orange-accent" :max="100" v-model="num" show-right show-left>
				<template v-slot:left="{data}">
					<view>{{data.value}}</view>
					<view>价格</view>
				</template>
				<template v-slot:tips="{data}">
					<view><tm-icons color="white" dense name="icon-position-fill"></tm-icons></view>
					
				</template>
				<template v-slot:right="{data}">
					<view>{{data.max}}</view>
					<view>最大</view>
				</template>
			</tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				刻度尺
			</view>
			<tm-slider color="bg-gradient-green-accent" :step="10" v-model="num"></tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				竖向刻度尺
			</view>
			<tm-slider  :vertical="true" color="bg-gradient-red-accent"  v-model="num"></tm-slider>
		</tm-sheet>
	</view>
</template>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<script>
	export default {
		data() {
			return {
				num:0,
				num1:0,
			}
		},
		methods: {

		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

👉props属性表

属性名称	类型	可选值	默认值	说明
value	Number	任意数字	0	如果需要同步使用value.sync推荐使用v-model绑定
height	Number	任意数字	200	竖向模式时才有作用
width	Number	任意数字	0	横向时起作用，如果为0自动获取外层宽度。
max	Number	任意数字	100	显示的最大刻度
value-diog	Number	任意数字	0	取值小数点后几位
step	Number	任意数字	0	步长,设置请尽量大于20.太小滑动容易过小出问题。
color	String	主题色名称	primary	主题颜色名称,激活的颜色
bg-color	String	主题色名称	grey-lighten-2	底部不活动的背景色,颜色名称
left-icon	String	主题色名称	icon-minus	左边图标
right-icon	String	主题色名称	icon-plus	右边图标
disabled	Boolean	true/false	false	是否禁用
show-tip	Boolean	true/false	false	始终显示进度标签
show-left	Boolean	true/false	false	显示左边数据
show-right	Boolean	true/false	false	显示右边数据
vertical	Boolean	true/false	false	是否启用竖向模式
name1.1.7	String	''	''	提交表单时的的字段名称标识

👉slot插槽

特别提醒

1.1.1版本以下(含)。此插槽right中的插槽数据data.value为max
1.1.2data数据同left数据一致，并增加了max最大值变量。

插槽名称	数据名称	数据类型	说明
left	data	object	左边位置模块
right	data	object	右边位置模块
tips	data	Object	滑块上方显示的信息标签。data同value以及v-model数据

上方left,right的data数据格式


{ value: ,//左插槽时此变量同v-model和value
 color: 主题色, icon: 左图标（右图标）,max:最大值  }

1
2
3
4

👉事件

事件名称	返回参数	返参类型	说明
@change	参数返回当前播放位置	Number	同v-model和value相等的参数，变动时触发。
@start	参数返回当前播放位置	Number	开始拖动时触发
@end	参数返回当前播放位置	Number	结束拖动时触发

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑报错？ | 评论？

# tm-slider 滑块

# 👉使用方法,跟数1,2,3一样简单

# 👉完整的示例

# 👉props属性表

# 👉slot插槽

# 👉事件

# 👉更新日志