滑块

TIP

1.0.0+

普通用法

滑块 - 图1

  1. <avue-form v-model="form" :option="option" @submit="submit"></avue-form>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. form:{},
  7. option:{
  8. labelWidth: 100,
  9. column: [{
  10. label: "普通滑块",
  11. prop: "pt",
  12. max: 10,
  13. type: 'silder',
  14. }, {
  15. label: "格式化滑块",
  16. max: 10,
  17. prop: "pt",
  18. type: 'silder',
  19. formatTooltip: function(val) {
  20. return '格式化的值' + val;
  21. }
  22. }, {
  23. label: "间隔点滑块",
  24. prop: "pt",
  25. type: 'silder',
  26. step: 1,
  27. max: 10,
  28. showStops: true,
  29. }, {
  30. label: "输入框滑块",
  31. prop: "pt",
  32. max: 10,
  33. showInput: true,
  34. type: 'silder',
  35. }, {
  36. label: "范围滑块",
  37. prop: "ptwf",
  38. step: 1,
  39. max: 10,
  40. showStops: true,
  41. range: true,
  42. type: 'silder',
  43. }, {
  44. label: "最大小值",
  45. prop: "pt",
  46. min: 3,
  47. max: 10,
  48. type: 'silder',
  49. }
  50. ]
  51. }
  52. };
  53. },
  54. methods: {
  55. submit(){
  56. this.$message.success('当前数据'+JSON.stringify(this.form))
  57. }
  58. }
  59. }
  60. </script>