使用Element-UI

Element-UI 常用組件和屬性總結(jié)

Button 按鈕

Button 組件是 Element-UI 中最基礎(chǔ)的組件之一拷邢。它可以用于觸發(fā)事件或者進(jìn)行頁(yè)面跳轉(zhuǎn)允趟。常用屬性包括:

  • type:按鈕類型,可選值有 primary码倦、success企孩、warning、danger袁稽、info勿璃。
  • size:按鈕大小,可選值有 medium推汽、small补疑、mini。
  • plain:是否為樸素按鈕歹撒,即是否有邊框和背景色莲组。
  • round:是否為圓角按鈕。
  • loading:是否為加載狀態(tài)暖夭。
  • disabled:是否禁用按鈕锹杈。
    示例代碼:
<template>
  <div>
    <el-button type="primary">主要按鈕</el-button>
    <el-button type="success">成功按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險(xiǎn)按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
    <el-button>默認(rèn)按鈕</el-button>
    <br />
    <el-button size="medium">中等按鈕</el-button>
    <el-button size="small">小型按鈕</el-button>
    <el-button size="mini">超小按鈕</el-button>
    <br />
    <el-button plain>樸素按鈕</el-button>
    <el-button round>圓角按鈕</el-button>
    <el-button loading>加載按鈕</el-button>
    <el-button disabled>禁用按鈕</el-button>
  </div>
</template>

Input 輸入框

Input 組件是 Element-UI 中常用的表單組件之一。它可以用于用戶輸入文本鳞尔、數(shù)字嬉橙、密碼等內(nèi)容。常用屬性包括:

  • type:輸入框類型寥假,可選值有 text市框、textarea、password糕韧、email枫振、number喻圃、date、datetime 等粪滤。
  • placeholder:輸入框的提示文本斧拍。
  • clearable:是否顯示清空按鈕。
  • disabled:是否禁用輸入框杖小。
  • readonly:是否只讀肆汹。
  • v-model:綁定輸入框的值。
    示例代碼:
<template>
  <div>
    <el-input v-model="inputValue" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
    <br />
    <el-input v-model="inputValue" placeholder="請(qǐng)輸入密碼" type="password"></el-input>
    <br />
    <el-input v-model="inputValue" placeholder="請(qǐng)輸入數(shù)字" type="number"></el-input>
    <br />
    <el-input v-model="inputValue" placeholder="請(qǐng)輸入日期" type="date"></el-input>
    <br />
    <el-input v-model="inputValue" placeholder="請(qǐng)輸入多行文本" type="textarea"></el-input>
    <br />
    <el-input v-model="inputValue" placeholder="只讀輸入框" readonly></el-input>
    <el-input v-model="inputValue" placeholder="禁用輸入框" disabled></el-input>
    <el-input v-model="inputValue" placeholder="帶清空按鈕" clearable></el-input>
  </div>
</template>

Select 選擇器

Select 組件是 Element-UI 中常用的表單組件之一予权。它提供了多種下拉選項(xiàng)昂勉,可以進(jìn)行單選、多選等操作扫腺。常用屬性包括:

  • multiple:是否多選岗照,默認(rèn)為 false。
  • placeholder:選擇器占位符笆环。
  • clearable:是否可清空攒至,默認(rèn)為 false。
  • disabled:是否禁用選擇器躁劣,默認(rèn)為 false迫吐。
  • size:選擇器尺寸,可選值有 medium账忘、small渠抹、mini,默認(rèn)為medium闪萄。
  • filterable:是否可搜索選項(xiàng),默認(rèn)為 false奇颠。
  • remote:是否使用遠(yuǎn)程搜索败去,默認(rèn)為 false。
  • remote-method:遠(yuǎn)程搜索函數(shù)烈拒。
  • loading:是否加載中圆裕。
    示例代碼:
<el-select v-model="value" placeholder="請(qǐng)選擇">
  <el-option label="選項(xiàng)1" value="1"></el-option>
  <el-option label="選項(xiàng)2" value="2"></el-option>
  <el-option label="選項(xiàng)3" value="3"></el-option>
</el-select>
<el-select v-model="value" multiple placeholder="請(qǐng)選擇">
  <el-option label="選項(xiàng)1" value="1"></el-option>
  <el-option label="選項(xiàng)2" value="2"></el-option>
  <el-option label="選項(xiàng)3" value="3"></el-option>
</el-select>
<el-select v-model="value" filterable remote :remote-method="querySearchAsync"></el-select>

Table 表格

Table 組件是 Element-UI 中常用的數(shù)據(jù)展示組件之一。它提供了多種功能荆几,包括排序吓妆、篩選、分頁(yè)等吨铸。常用屬性包括:

  • data:表格數(shù)據(jù)行拢。
  • columns:表格列的配置。
  • height:表格高度诞吱。
  • border:是否顯示表格邊框舟奠,默認(rèn)為 false竭缝。
  • stripe:是否顯示間隔斑馬紋,默認(rèn)為 false沼瘫。
  • size:表格尺寸抬纸,可選值有 medium、small耿戚、mini湿故,默認(rèn)為 medium。
  • fit:是否自適應(yīng)父元素寬度膜蛔,默認(rèn)為 true坛猪。
  • empty-text:表格為空時(shí)的提示文本。
    示例代碼:
<el-table :data="tableData" :height="250" border>
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

Form 表單

Form 組件是 Element-UI 中常用的表單組件之一飞几。它提供了表單的基本功能砚哆,包括表單驗(yàn)證、表單重置等屑墨。常用屬性包括:

  • model:表單數(shù)據(jù)模型躁锁。
  • rules:表單驗(yàn)證規(guī)則。
  • inline:是否為行內(nèi)表單卵史,默認(rèn)為 false战转。
  • label-position:表單域標(biāo)簽的位置,可選值有 right以躯、left槐秧、top,默認(rèn)為 right忧设。
  • label-width:表單域標(biāo)簽的寬度刁标,如 "50px",默認(rèn)為自動(dòng)計(jì)算寬度址晕。
  • size:表單尺寸膀懈,可選值有 medium、small谨垃、mini启搂,默認(rèn)為 medium。
    示例代碼:
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="年齡" prop="age">
    <el-input v-model.number="form.age"></el-input>
  </el-form-item>
  <el-form-item label="性別" prop="gender">
    <el-radio-group v-model="form.gender">
      <el-radio label="male">男</el-radio>
      <el-radio label="female">女</el-radio>
    </el-radio-group>
   </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

Dialog 對(duì)話框

Dialog 組件是 Element-UI 中常用的彈窗組件之一刘陶。它提供了彈窗的基本功能胳赌,包括彈窗內(nèi)容、彈窗標(biāo)題匙隔、彈窗按鈕等疑苫。常用屬性包括:

  • title:彈窗標(biāo)題。
  • visible:彈窗是否可見。
  • width:彈窗寬度缀匕,默認(rèn)為 50%纳决。
  • center:彈窗是否居中顯示,默認(rèn)為 false乡小。
  • modal:是否顯示遮罩層阔加,默認(rèn)為 true。
  • show-close:是否顯示關(guān)閉按鈕满钟,默認(rèn)為 true胜榔。
  • before-close:彈窗關(guān)閉前的回調(diào)函數(shù)。

示例代碼:

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打開彈窗</el-button>
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      :before-close="handleBeforeClose"
      :close-on-click-modal="false"
      width="30%"
    >
      <p>這是一段內(nèi)容湃番。</p>
      <p>這是一段內(nèi)容夭织。</p>
      <p>這是一段內(nèi)容。</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleBeforeClose(done) {
      this.$confirm("確定關(guān)閉吠撮?")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末尊惰,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子泥兰,更是在濱河造成了極大的恐慌弄屡,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,430評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鞋诗,死亡現(xiàn)場(chǎng)離奇詭異膀捷,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)削彬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門全庸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人融痛,你說(shuō)我怎么就攤上這事壶笼。” “怎么了雁刷?”我有些...
    開封第一講書人閱讀 167,834評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵拌消,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我安券,道長(zhǎng),這世上最難降的妖魔是什么氓英? 我笑而不...
    開封第一講書人閱讀 59,543評(píng)論 1 296
  • 正文 為了忘掉前任侯勉,我火速辦了婚禮,結(jié)果婚禮上铝阐,老公的妹妹穿的比我還像新娘址貌。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,547評(píng)論 6 397
  • 文/花漫 我一把揭開白布练对。 她就那樣靜靜地躺著遍蟋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪螟凭。 梳的紋絲不亂的頭發(fā)上虚青,一...
    開封第一講書人閱讀 52,196評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音螺男,去河邊找鬼棒厘。 笑死,一個(gè)胖子當(dāng)著我的面吹牛下隧,可吹牛的內(nèi)容都是我干的奢人。 我是一名探鬼主播,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼淆院,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼何乎!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起土辩,我...
    開封第一講書人閱讀 39,671評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤支救,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后脯燃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搂妻,經(jīng)...
    沈念sama閱讀 46,221評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,303評(píng)論 3 340
  • 正文 我和宋清朗相戀三年辕棚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了欲主。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,444評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡逝嚎,死狀恐怖扁瓢,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情补君,我是刑警寧澤引几,帶...
    沈念sama閱讀 36,134評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站挽铁,受9級(jí)特大地震影響伟桅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜叽掘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,810評(píng)論 3 333
  • 文/蒙蒙 一楣铁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧更扁,春花似錦盖腕、人聲如沸赫冬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)劲厌。三九已至,卻和暖如春听隐,著一層夾襖步出監(jiān)牢的瞬間补鼻,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工遵绰, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辽幌,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,837評(píng)論 3 376
  • 正文 我出身青樓椿访,卻偏偏與公主長(zhǎng)得像乌企,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子成玫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,455評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容