Element-UI 10個(gè)技巧小結(jié)
el-scrollbar 滾動條
看到這個(gè)組件是不是有點(diǎn)陌生,陌生就對了,因?yàn)樗鼜膩頉]有出現(xiàn)在 element 官網(wǎng)上(估計(jì)是性能問題),但好東西怎么能藏著掖著,來上效果圖。
是不是比原生的滾動條美觀多了,使用方法也非常簡單:
<el-scrollbar> <div class="box"> <p v-for="item in 15" :key="item">歡迎使用 el-scrollbar {{item}}</p> </div> </el-scrollbar> <style scoped> .el-scrollbar { border: 1px solid #ddd; height: 200px; } .el-scrollbar ::v-deep .el-scrollbar__wrap { overflow-y: scroll; overflow-x: hidden; } </style>
只要 scrollbar 內(nèi)部盒子的高度超過 scrollbar 的高度就會出現(xiàn)滾動條,橫向滾動條同理。
el-upload 模擬點(diǎn)擊
有時(shí)候我們想用 el-upload 的上傳功能,但又不想用 el-upload 的樣式,如何實(shí)現(xiàn)呢?方法也很簡單,隱藏 el-upload,然后再模擬點(diǎn)擊就可以了。
<button @click="handleUpload">上傳文件</button> <el-upload v-show="false" class="upload-resource" multiple action="" :http-request="clickUploadFile" ref="upload" :on-success="uploadSuccess" > 上傳本地文件 </el-upload> <script> export default { methods: { // 模擬點(diǎn)擊 handleUpload() { document.querySelector(".upload-resource .el-upload").click() }, // 上傳文件 async clickUploadFile(file) { const formData = new FormData() formData.append('file', file.file) const res = await api.post(`xxx`, formData) } // 上傳成功后,清空組件自帶的文件列表 uploadSuccess() { this.$refs.upload.clearFiles() } } } </script>
el-select 下拉框選項(xiàng)過長
很多時(shí)候下拉框的內(nèi)容是不可控的,如果下拉框選項(xiàng)內(nèi)容過長,勢必會導(dǎo)致頁面非常不協(xié)調(diào),解決辦法就是,單行省略加文字提示。
<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="請選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > <el-tooltip placement="top" :disabled="item.label.length<17" > <div slot="content"> <span>{{item.label}}</span> </div> <div class="iclass-text-ellipsis">{{ item.label }}</div> </el-tooltip> </el-option> </el-select> <script> export default { data() { return { options: [{ value: '選項(xiàng)1', label: '黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕' }, { value: '選項(xiàng)2', label: '雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶' }, { value: '選項(xiàng)3', label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎' }], value: '' } } } </script> <style scoped> .el-select { width: 300px; } .el-select ::v-deep .popper-class { width: 300px; } .iclass-text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style>
效果如下:
el-input 首尾不能為空格
我們在使用 input 輸入框時(shí),大多不希望用戶在前后輸入空格,有沒有簡單的校驗(yàn)方法呢,當(dāng)然是有的。
<el-form :rules="rules" :model="form" label-width="80px"> <el-form-item label="活動名稱" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> <script> export default { data() { return { form: { name: '' }, rules: { name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur'}, { pattern: /^(?!\s+).*(?<!\s)$/, message: '首尾不能為空格', trigger: 'blur' } ] } } } } </script>
效果如下:
el-input type=number 輸入中文,焦點(diǎn)上移
當(dāng) el-input 設(shè)置 type="number" 時(shí),輸入中文,雖然中文不會顯示出來,但焦點(diǎn)會上移。
解決辦法:
<style scoped> ::v-deep .el-input__inner { line-height: 1px !important; } </style>
el-input type=number 去除聚焦時(shí)的上下箭頭
解決辦法:
<el-input class="clear-number-input" type="number"></el-input> <style scoped> .clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button, .clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; } </style>
el-form 只校驗(yàn)表單其中一個(gè)字段
有時(shí)候我們需要單獨(dú)校驗(yàn)一些字段,比如發(fā)送驗(yàn)證碼,單獨(dú)對手機(jī)號進(jìn)行校驗(yàn),可以這樣做:
this.$refs.form.validateField('name', valid => { if (valid) { console.log('send!'); } else { console.log('error send!'); return false; } })
el-dialog 重新打開彈窗,清除表單信息
有人會在打開彈窗時(shí),在$nextTick里重置表單,而我選擇在關(guān)閉彈窗后進(jìn)行重置:
<el-dialog @closed="resetForm"> <el-form ref="form"> </el-form> </el-dialog> <script> export default { methods: { resetForm() { this.$refs.form.resetFields() } } } </script>
el-dialog 的 destroy-on-close 屬性設(shè)置無效
destroy-on-close 設(shè)置為 true 后發(fā)現(xiàn)彈窗關(guān)閉后 DOM 元素仍在,沒有被銷毀。
解決辦法:在 el-dialog 上添加 v-if。
<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close> </el-dialog>
el-table 表格內(nèi)容超出省略
當(dāng)表格內(nèi)容過長時(shí),手動添加樣式比較麻煩,偷偷告訴你,只需要添加一個(gè) show-overflow-tooltip 就可以搞定。
<el-table-column prop="address" label="地址" width="180" show-overflow-tooltip > </el-table-column>
效果如下:
到此這篇關(guān)于Element-UI 10個(gè)技巧小結(jié)的文章就介紹到這了,更多相關(guān)Element 技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線水滴圖詞云圖效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線?水滴圖?詞云圖,通過引入中國地圖JS文件,會自動注冊地圖,文中結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)
下面小編就為大家?guī)硪黄獀ue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫的項(xiàng)目實(shí)踐
本文主要介紹了vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07ElementUI的this.$notify.close()調(diào)用不起作用的解決
本文主要介紹了ElementUI的this.$notify.close()調(diào)用不起作用的解決,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue+element樹組件 實(shí)現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實(shí)現(xiàn)樹懶加載的過程,本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10