🔥 遇见我们的新项目 t0ggles - 你终极的项目管理工具！ 🔥

步进器 Vue 组件

步进器组件

包含以下组件

  • 步进器

步进器属性

名称类型默认值描述
buttonsOnly布尔值false

禁用步进器按钮之间的内部值容器

colors对象

包含 Tailwind CSS 颜色类的对象

colors.activeBgIos字符串'active:bg-primary'
colors.activeBgMaterial字符串''
colors.fillActiveBgIos字符串'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial字符串''
colors.fillBgIos字符串'bg-primary'
colors.fillBgMaterial字符串'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos字符串'text-white'
colors.fillTextMaterial字符串'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple字符串'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos字符串'border-primary'
colors.outlineBorderMaterial字符串'border-md-light-outline dark:border-md-dark-outline'
colors.textIos字符串'text-primary'
colors.textMaterial字符串'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple字符串'touch-ripple-primary'
component字符串'div'

组件的 HTML 元素

input布尔值false

定义是否渲染元素

inputDisabled布尔值false

定义步进器输入是否被禁用

inputPlaceholder字符串

输入占位符

inputReadOnly布尔值false

定义步进器输入是否只读

inputType字符串'text'

输入类型

large布尔值undefined

使步进器变大。覆盖 largeIos 和 largeMaterial

largeIos布尔值false

在 iOS 主题中使步进器变大

largeMaterial布尔值false

在 Material 主题中使步进器变大

outline布尔值undefined

使步进器为轮廓。覆盖 outlineIos 和 outlineMaterial

outlineIos布尔值false

在 iOS 主题中使步进器为轮廓

outlineMaterial布尔值false

在 Material 主题中使步进器为轮廓

raised布尔值undefined

使步进器凸起（带有阴影）。覆盖 raisedIos 和 raisedMaterial

raisedIos布尔值false

在 iOS 主题中使步进器凸起（带有阴影）

raisedMaterial布尔值false

在 Material 主题中使步进器凸起（带有阴影）

rounded布尔值undefined

使步进器变圆。覆盖 roundedIos 和 roundedMaterial

roundedIos布尔值false

在 iOS 主题中使步进器变圆

roundedMaterial布尔值false

在 Material 主题中使步进器变圆

small布尔值undefined

使步进器变小。覆盖 smallIos 和 smallMaterial

smallIos布尔值false

在 iOS 主题中使步进器变小

smallMaterial布尔值false

在 Material 主题中使步进器变小

touchRipple布尔值true

在 Material 主题中启用触摸波纹效果

value数字0

步进器值

步进器事件

名称类型描述
blurfunction(e)

步进器输入的 blur 处理程序

changefunction(e)

步进器输入的 change 处理程序

focusfunction(e)

步进器输入的 focus 处理程序

inputfunction(e)

步进器输入的 input 处理程序

minusfunction(e)

步进器“减号”按钮的点击处理程序

plusfunction(e)

步进器“加号”按钮的点击处理程序

示例

Stepper.vue
<template>
  <k-page>
    <k-navbar title="Stepper" />


    <k-block-title>Shape and size</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <k-stepper :value="value" @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <k-stepper
            :value="value"
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <k-stepper
            :value="value"
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Rounded Outline</div>
          <k-stepper
            :value="value"
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <k-stepper :value="value" small @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <k-stepper
            :value="value"
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <k-stepper
            :value="value"
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <k-stepper
            :value="value"
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <k-stepper :value="value" large @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <k-stepper
            :value="value"
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <k-stepper
            :value="value"
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <k-stepper
            :value="value"
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>


    <k-block-title>Raised</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <k-stepper :value="value" raised @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <k-stepper
            :value="value"
            raised
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <k-stepper
            :value="value"
            raised
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Round Outline</div>
          <k-stepper
            :value="value"
            raised
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <k-stepper
            :value="value"
            raised
            small
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <k-stepper
            :value="value"
            raised
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <k-stepper
            :value="value"
            raised
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <k-stepper
            :value="value"
            raised
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <k-stepper
            :value="value"
            raised
            large
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <k-stepper
            :value="value"
            raised
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <k-stepper
            :value="value"
            raised
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <k-stepper
            :value="value"
            raised
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>
    <k-block-title>With Text Input</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div>
        <k-stepper
          :value="inputValue"
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
      <div>
        <k-stepper
          :value="inputValue"
          outline
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
    </k-block>
    <k-block-title>Only Buttons</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            raised
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
    </k-list>


    <k-block-title>Colors</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <k-stepper
            :value="value"
            class="k-color-brand-red"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <k-stepper
            :value="value"
            rounded
            class="k-color-brand-green"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4">
        <div>
          <k-stepper
            :value="value"
            class="k-color-brand-yellow"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <k-stepper
            :value="value"
            rounded
            class="k-color-brand-purple"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kStepper,
    kBlock,
    kBlockTitle,
    kList,
    kListItem,
  } from 'konsta/vue';
  import { ref } from 'vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kStepper,
      kBlock,
      kBlockTitle,
      kList,
      kListItem,
    },
    setup() {
      const value = ref(1);
      const increase = () => {
        value.value += 1;
      };
      const decrease = () => {
        value.value = value.value - 1 < 0 ? 0 : value.value - 1;
      };
      const inputValue = ref(1);
      const increaseInput = () => {
        const v = parseInt(inputValue.value, 10);
        if (isNaN(v)) inputValue.value = 0;
        else inputValue.value = v + 1;
      };
      const decreaseInput = () => {
        const v = parseInt(inputValue, 10);
        if (isNaN(v)) inputValue.value = 0;
        inputValue.value = v - 1 < 0 ? 0 : v - 1;
      };
      const onInputInput = (e) => {
        inputValue.value = parseInt(e.target.value, 10);
      };
      const onInputBlur = () => {
        if (isNaN(parseInt(inputValue.value, 10))) inputValue.value = 0;
      };


      return {
        value,
        increase,
        decrease,
        inputValue,
        increaseInput,
        decreaseInput,
        onInputInput,
        onInputBlur,
      };
    },
  };
</script>
代码许可证 MIT.
2022 © Konsta UI by nolimits4web.