Ant Design Vue教程

Ant Design Vue Slider afterChange 拖动后的事件

Ant Design Vue Slider afterChange 拖动后鼠标松开后的事件。

webpack方式

事件名称参数
说明
afterChangeFunction(value)拖动后鼠标松开后的事件
<template>
  <div>
    <a-slider @afterChange="afterChange"/> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabled: false,
    };
  },
  methods: { 
    //afterChange事件
   afterChange(value){
     alert(value);
   }
  },
};
</script>

浏览器直接引入JS方式

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue slider afterChange事件例子</title>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
   <!--浏览器方式下有些事件无法响应,需要引入vue-dash-event插件-->
<script src="https://www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>
    <link href="https://www.itxst.com/package/ant-design-vue/antd.min.css?aaa" rel="stylesheet" />
    <style>
        body {
            padding: 10px
        } 
    </style>
</head>
<body>
<div id="app"> 
 <a-slider @after-change="afterChange"></a-slider> 
</div>
<script>
Vue.use(window['vue-dash-event']);
var app = new Vue({
    el: '#app',
  data() {
    return {
      disabled: false,
    };
  },
  methods: {
    afterChange(value){
     alert(value);
   }
  },
});
 </script>
</body>
</html>

例子

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Slider 滑动输入条 Slider 属性 afterChange 事件 change 拖动事件 Switch 开关