練習1 自定義input元件庫知識要點

2021-10-11 03:03:06 字數 2483 閱讀 9847

>

class

="index"

>

>

indexh1

>

:model

="model"

:rules

="rules"

ref="formdombox"

>

labeltitle

="使用者名稱"

rulekey

="username"

>

v-model

="model.username"

>

cinput

>

cformitem

>

labeltitle

="登入密碼"

rulekey

="password"

>

v-model

="model.password"

type

="password"

>

cinput

>

cformitem

>

>

@click

="loginact"

>

登入button

>

cformitem

>

cform

>

div>

template

>

>

import cinput from

'@/components/cinput.vue'

import cformitem from

'@/components/cformitem.vue'

import cform from

'@/components/cform.vue'

export

default},

components:

}script

>

1、:value

2、@input

3、$attrs是出props以外的屬性值

子元件cinput

>

class

="cinput"

>

:value

="value"

@input

="oninput"

v-bind

="$attrs"

>

div>

template

>

>

export

default

, methods:}}

script

>

父元件>

class

="index"

>

v-model

="model.password"

type

="password"

>

cinput

>

div>

template

>

inheritattrs:false

export default
1、provide => inject

2、注意:可以在開發元件庫中使用,不建議在應用專案中使用

祖先級別的元件

>

class

="cform"

>

>

slot

>

div>

template

>

>

export

default},

}script

>

孫子級別的元件

>

class

="cformitem"

>

>

}p>

div>

template

>

>

export

default},

mounted()

}script

>

//安裝 async-validator

npminstall async-validator -s

//應用

import schema from 'async-validator'

;//呼叫

const desc=]}

; const schema = new schema(desc)

; schema.validate(

,errors=

>

else

})

自定義元件

myedittext 清除輸入的資料 setcompunddrawable 設定edittext ontouchevent ondraw 作用 繪製view顯示的內容,由系統自動呼叫 常用類 paint,canvas invalidate,postinvalidate 貪吃蛇原理 改變集合中的資料,...

自定義元件

自定義控制項 1.抽取layout如 list item home.xml 2.寫乙個類繼承1中的layout,實現父類 相對布局 的構造方法 3.使用 自定義控制項的屬性 1.布局檔案裡自定義乙個命名空間 xmlns my 2.在res的values目錄下描述自定義屬性的檔案 3.在布局檔案裡寫你...

自定義元件

自定義控制項 1.抽取layout如 list item home.xml 2.寫乙個類繼承1中的layout,實現父類 相對布局 的構造方法 3.使用 自定義控制項的屬性 1.布局檔案裡自定義乙個命名空間 xmlns my 2.在res的values目錄下描述自定義屬性的檔案 3.在布局檔案裡寫你...