ios滑动按钮大小_像iOS / Android一样滑动按钮

ios滑动按钮大小

VUE滑动按钮 (vue-swipe-button)

Swipe button like iOS/Android.

像iOS / Android一样滑动按钮。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save vue-swipe-button

用法 (Usage)

Import SwipeButton and its css.

导入SwipeButton及其CSS。

import SwipeButton from 'vue-swipe-button'
import 'vue-swipe-button/dist/swipeButton.css'

Sample:

样品：

<template>
  <div id="app">
    <SwipeButton
      ref="swipeButton"
      class="swipe-button"
      @actionConfirmed="onActionConfirmed"
    />
  </div>
</template>

<script>
import SwipeButton from 'vue-swipe-button'
import 'vue-swipe-button/dist/swipeButton.css'

export default {
  name: 'app',
  components: {
    SwipeButton
  },
  methods: {
    onActionConfirmed() {
      setTimeout(() => {
        this.$refs.swipeButton.reset();
      }, 1000);
    },
  },

}
</script>

<style>
.swipe-button {
  width: 500px;
  background-color: #17255A;
  border: 1px solid #17255A;
}
</style>

开发项目设置 (Project setup for development)

npm install

编译和热重装以进行开发 (Compiles and hot-reloads for development)

npm run serve

编译并最小化生产 (Compiles and minifies for production)

npm run build:component

整理和修复文件 (Lints and fixes files)

npm run lint

运行单元测试 (Run your unit tests)

npm run test:unit

生成文档 (Build docs)

npm run build:docs
in docs/index.html
make sure the paths don't have '/' at the beginning
ex: /js/app.js should be js/app.js

翻译自: https://vuejsexamples.com/swipe-button-like-ios-android/

ios滑动按钮大小