Form 模块

滑块

滑块 - 图1

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