自己封装vue组建之Stone-Steps组件

雨点打透心脏的1/2处 2022-12-11 03:21 375阅读 0赞

# Stone-Steps组件 #

**目录**

*  1. Stone-Steps组件引入
 *  2. stone-steps标签
 *  3. Stone-Steps组件示例

# 1. Stone-Steps组件引入 #

在main.js中引入stone-steps.scss

require('@/assets/css/stone-steps.scss')

在您的vue中导入StoneSteps组件

import StoneSteps from '@/components/StoneSteps'

注册StoneSteps组件

export default {
      name: 'StoneStepsDemo',
      components: {
        StoneSteps
      }
    }

# 2. stone-steps标签 #

属性：

steps - 对象数组，必填;  
step-desc - 从steps元素对象中获取步骤描述新的key名，可选，默认是description;  
current - 当前步骤，可选，默认1

# 3. Stone-Steps组件示例 #

![在这里插入图片描述][20200928100540626.png_pic_center]

源码：

<template>
      <div class="app-container">
        <stone-steps :steps="steps" step-desc="desc" :current="currentStep" style="width: 60%;" />
      </div>
    </template>
    <script>
    import StoneSteps from '@/components/StoneSteps'
    export default {
      name: 'StoneStepsDemo',
      components: {
        StoneSteps
      },
      data() {
        return {
          steps: [
            {
              desc: 'Step 1'
            },
            {
              desc: 'Step 2'
            },
            {
              desc: 'Step 3'
            },
            {
              desc: 'Step 4'
            }
          ],
          currentStep: 3
        }
      }
    }
    </script>

[20200928100540626.png_pic_center]: /images/20221123/c2b735e8f6554c27b0ec17268a36fe6b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，375人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 组件封装之 List 列表

Vue 组件封装之 List 列表一、List 列表二、使用案例三、API 使用指南四、源代码一、List 列表组件说明：

绝地灬酷狼/ 2023年02月18日 04:30/ 0 赞/ 72 阅读

相关 Vue 组件封装之 Toast 弹框

Vue 组件封装之 Toast 弹框一、Toast 弹框二、使用案例三、API 使用指南四、源代码一、Toast 弹框组件说明

忘是亡心i/ 2023年02月09日 10:25/ 0 赞/ 45 阅读

相关 Vue 组件封装之 Result 结果页

Vue 组件封装之 Result 结果页一、Result 结果页二、使用案例三、API 使用指南四、源代码一、Result 结果页

短命女/ 2022年12月16日 06:14/ 0 赞/ 454 阅读

相关自己封装vue组建之Stone-Switch组件

Stone-Switch组件目录 1. 引入stone-switch.scss 2. Switch组件示例 3. 源码 1. 引入stone-s

小灰灰/ 2022年12月11日 03:22/ 0 赞/ 273 阅读

相关自己封装vue组建之Stone-Steps组件

Stone-Steps组件目录 1. Stone-Steps组件引入 2. stone-steps标签 3. Stone-Steps组件示例 1

雨点打透心脏的1/2处/ 2022年12月11日 03:21/ 0 赞/ 376 阅读

相关自己封装vue组建之Stone-Slider组件

Stone-Slider组件目录 1. 引入stone-slider.scss 2. Slider基础用法 3. 离散值 4. 带有输入框

港控/mmm°/ 2022年12月11日 03:21/ 0 赞/ 321 阅读

相关【vue组件封装】ECharts组件封装随笔

内容 > 记录组件封装思路 > 实现ECharts 组件的封装写在前面写在前面：对于愈来愈火的前端框架，用起来着实是让人很舒心。对于大型项目来说，组件化思

柔光的暖阳◎/ 2022年12月03日 15:51/ 0 赞/ 579 阅读

相关 vue封装echarts组件

话不多说，先上代码。组件： <template> <div id="echartsItem" style

小鱼儿/ 2022年10月27日 02:56/ 0 赞/ 402 阅读

相关 JS组件系列——自己动手封装bootstrap-treegrid组件

一、开源的treegrid [回到顶部][Link 1] 1、组件效果预览最原始的效果 ![459756-20170427200832584-538330

蔚落/ 2022年06月17日 14:15/ 0 赞/ 363 阅读

相关 vue 封装button组件

<template> <div> <div class="login-btn cursor" :class="myClass" :style

迈不过友情╰/ 2021年09月07日 06:12/ 0 赞/ 752 阅读