Vue框架Element UI教程(二)

2022-07-02 17:42:10 字數 1853 閱讀 6263

原文:

【時間選擇器】

element ui手冊:

中文文件:

前一篇已經安裝好了element ui環境,現在開始來實際操作框架提供的一些元件的運用了。

在準備好以下文章裡面的內容之後,可以開啟test.vue檔案,開始寫**了。vue框架element ui教程-安裝環境搭建(一)

開啟test.vue檔案,開始寫**

>

>

is-range

v-model="value"

range-separator="-"

start-placeholder="開始時間"

end-placeholder="結束時間"

placeholder="選擇時間範圍">

>

>

>

>

export default ;

}}>

npm run dev 執行,瀏覽器顯示如下,實現了乙個簡單的時間選擇器

vue框架element ui教程-安裝環境搭建(一)

今天繼續寫元件的運用相關例子

點選按鈕的時候,元素會呈現乙個出現和隱藏的動畫功能。

>

>

@click="show = !show">點選按

style="display: flex; margin-top: 20px; height: 100px;">

name="el-fade-in-linear">

v-show="show" class="transition-box">我會消失在人海之

>

>

>

>

>

export default )

}>

>

.transition-box

>

效果大家可以自行嘗試。

vue框架element ui教程-安裝環境搭建(一)

在用element ui框架的時候

>

>

class="tac">

:span="4">

default-active="2"

class="el-menu-vertical-demo"

@open="handleopen"

@close="handleclose"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

index="1">

slot="title">

class="el-icon-s-platform">>

>服務大

>

>

index="1-1">在場服

index="1-2">歷史服

>

>

index="2">

slot="title">

class="el-icon-s-tools">>

>系統設

>

>

index="1-1">許可權管

index="1-2">角色管

>

>

index="3">

slot

elementUi 適合於Vue的UI框架

element ui是乙個ui庫,它不依賴於vue。但是卻是當前和vue配合做專案開發的乙個比較好的ui框架。element ui借用了bootstrap框架的思想,使用了柵格布局。它把單一的分欄分為24列。基本的使用方式如下 span屬性 表示col所要占領的柵格佔比個數。offset屬性 表示c...

學習elementUI元件框架

學習元件框架之前,要有一點vue元件基礎,關於元件通訊,這點很重要,元件框架全部都是寫好的自定義元件,與我們使用的bootstrap不同,bootstrap是基於csshtml的樣式布局,二元件的基於js的vue框架之上封裝的東西,元件的每乙個標籤,都對應乙個vue檔案template,style,...

vue引入element ui報錯

1.引入css import element ui lib theme chalk index.css 2.報錯資訊 node modules element ui lib theme chalk index.css 1 0 module parse failed unexpected charac...