vue ele steps

vue-ele-steps | ทำให้ขั้นตอน element-ui ง่ายขึ้น

แนะนำ

vue-ele-steps จะห่อหุ้มส่วนประกอบของ step ใน element-ui เพิ่มเติม เพื่อลดขนาดโครงสร้าง html โดยไม่ต้องละทิ้งฟังก์ชันใดๆ

ตัวอย่าง

https://codepen.io/dream2023/pen/wbjGKX/

ติดตั้ง

npm install vue-ele-steps --save

ใช้

 // 全局引入
import EleSteps from 'vue-ele-steps'
Vue . component ( EleSteps . name , EleSteps ) 

 // 局部引入
import EleSteps from 'vue-ele-steps'
export default {
  components : {
    EleSteps
  }
} 

ตัวอย่าง

ค่าแอตทริบิวต์ขั้นตอน

 <!-- 支持字符串数组 -->
< ele-steps :steps =" ['步骤1', '步骤2', '步骤3'] " :active =" 1 " /> 

 <!-- 支持对象数组 -->
< ele-steps
  :steps =" [
    { title: '步骤1', description: '描述文字1..', icon: 'el-icon-edit' },
    { title: '步骤2', description: '描述文字2..', icon: 'el-icon-upload' },
    { title: '步骤3', description: '描述文字3..', icon: 'el-icon-picture' }
  ] "
  :active =" 1 "
/> 

คุณสมบัติส่วนประกอบที่กำหนดเอง

 < ele-steps
  :stepsAttrs =" {
    'align-center': true
  } "
  :steps =" ['步骤1', '步骤2', '步骤3'] "
  :active =" 1 "
/> 

พารามิเตอร์อุปกรณ์ประกอบฉาก

props: {
  // steps的属性
  stepsAttrs : {
    type : Object ,
    default ( ) {
      return {
        'finish-status' : 'success'
      }
    }
  } ,
  // 步骤数组
  steps : {
    type : Array ,
    required : true
  } ,
  // 当前步骤
  active : {
    type : Number ,
    required : true
  }
} 

ลิงค์อ้างอิง

• องค์ประกอบขั้นตอน element-ui