vue 自定義步驟條元件

2021-10-06 19:19:50 字數 1640 閱讀 4141

<

template

>

="steps"

>

v-for=

"(item,index) in setdata"

:key=

"item+index"

:class=""

>

}<

/li>

<

/ul>

<

/div>

<

/template

>

"ts"

>

import from "vue-property-decorator"

;import axios from "axios"

;@component

export

default

class

steps extends vue

)private steps!

: number;

@prop()

private setdata!

: string;

}<

/script>

.steps

/*步驟描述*/

.steps li

/*步驟數字*/

.steps li:before

/*連線線*/

.steps li ~ li:after

/*將當前/完成步驟之前的數字及連線線變綠*/

.steps li.active:before,

.steps li.active:after

/*將當前/完成步驟之後的數字及連線線變灰*/

.steps li.active ~ li:before,

.steps li.active ~ li:after

<

/style>

呼叫元件

<

template

>

}"warning" @click=

"getnumber"

>get a random number<

/el-button>

"registspets"

:setdata=

"setdata"

/>

"primary" @click=

"registspets++"

>+++

<

/el-button>

}"danger" @click=

"registspets--"

>---

<

/el-button>

<

/div>

<

/template

>

"ts"

>

import from "vue-property-decorator"

;import steps from "../components/steps.vue"

;@component(}

)export

default

class

input extends vue

}<

/script>

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...

vue 元件自定義

基於iview的自定義table元件 一 業務要求 1.展示列表字段資訊.2.列表資料的增刪查改 與 匯出 3.列表的分頁功能 二 元件 實現 html ref table data arrlist columns currcolumns loading loading no data text 暫...