weex 13 元件textarea使用

2021-09-12 09:44:20 字數 1800 閱讀 9591

本節學習目標

熟練掌握textarea元件的使用

它是什麼?

textarea 多行輸入元件

特性

1.placehold 設定佔位符,提醒使用者應該輸入什麼內容,或者輸入的規則,只能輸入數字等等

2.disabled 設定是否支援使用者輸入,設定為true

3.autofocus進入頁面是否自動獲得焦點

4.rows 元件允許顯示的行數

5.如何將資料和變數進行繫結

6.慎用偽類,前方有坑

7.高度和行數同時設定,會怎麼樣

8.textarea事件檢測

開始吧

1.設定placehold

注意 不要講placehold寫入到css樣式中去,ios 測試不起作用

2.設定使用者不能輸入內容

一般像這種使用者不能使用的情況下,要將控制項背景顏色設定成灰色系列,所以我們就借助偽類,設定一下

偽類格式:

樣式類名 +『:』 +偽類名稱

注意這個元件在enabled 情況下會有些坑,繼續往下看

3.自動獲得焦點

當使用者進入這個頁面的時候,我們讓某個textarea元件獲得焦點,怎麼設定呢?見下面的**

4.rows多行顯示

ed1920e8-2ee8-4101-8c7e-d55c3e102966.png

注意

不能將rows設定在css樣式中,這樣做不會產生任何效果

這裡解釋一下rows='10' 是以系統字型40px為單位的,設定行高為十行,也就是說元件的高度為10*40px

5.如何將資料和變數進行繫結

我們先定義乙個變數

export default}}

然後將變數繫結到元件上

同時又設定了高度樣式

.textarea
8.textarea事件檢測事件主要有以下幾種

接下來看如何使用

之前講過事件繫結的完整寫法是v-on:事件='定義的方法'簡寫為@事件='定義的方法'下面是定義的方法

本節的內容到這裡已經全部講完,這個元件的用法你掌握了嗎?

weex學習之路 二 元件封裝(1)

不管是為了解耦還是為了 的復用,元件封裝都是必須要的。因為weex使用flex布局,所以每個頁面都可以抽象成 頭部 頂部導航 身體 主體內容 腳 底部 當然,並不是所有的頁面存在這3個要素,所以元件需要支援一些配置,具體 如下 flex direction column justify conten...

元件 1 元件定義

使用vue.extend options 定義元件,引數為乙個包含了被定義組選項的物件。使用vue.component id,definition 註冊定義好的元件,id為該元件名稱。definition 既可以是乙個extend 返回的例項,也可以是乙個包含元件選項的物件 將會自動呼叫extend...

012 元件註冊

元件,自定義元素。可以拓展html元素,封裝重複可用的 提高 復用率。所有的vue元件例項都是vue的例項,因此他們擁有和頁面相同的宣告週期鉤子函式 一 全域性註冊 1 編寫元件 tema.vue 全域性元件註冊 div template 2 註冊 在入口檔案main.js中 import tema...