• 滑块
    • 普通用法

    滑块

    TIP

    1.0.0+

    普通用法

    滑块 - 图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>