您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)Element-UI有哪些使用技巧,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
看到這個組件是不是有點陌生,陌生就對了,因為它從來沒有出現(xiàn)在 element 官網(wǎng)上(估計是性能問題),但好東西怎么能藏著掖著,來上效果圖。
是不是比原生的滾動條美觀多了,使用方法也非常簡單:
<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 的上傳功能,但又不想用 el-upload 的樣式,如何實現(xiàn)呢?方法也很簡單,隱藏 el-upload,然后再模擬點擊就可以了。
<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: { // 模擬點擊 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>
很多時候下拉框的內(nèi)容是不可控的,如果下拉框選項內(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: '選項1', label: '黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕' }, { value: '選項2', label: '雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶' }, { value: '選項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>
效果如下:
我們在使用 input 輸入框時,大多不希望用戶在前后輸入空格,有沒有簡單的校驗方法呢,當(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>
效果如下:
當(dāng) el-input 設(shè)置 type="number" 時,輸入中文,雖然中文不會顯示出來,但焦點會上移。
解決辦法:
<style scoped> ::v-deep .el-input__inner { line-height: 1px !important; } </style>
解決辦法:
<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>
有時候我們需要單獨校驗一些字段,比如發(fā)送驗證碼,單獨對手機號進行校驗,可以這樣做:
this.$refs.form.validateField('name', valid => { if (valid) { console.log('send!'); } else { console.log('error send!'); return false; } })
有人會在打開彈窗時,在$nextTick里重置表單,而我選擇在關(guān)閉彈窗后進行重置:
<el-dialog @closed="resetForm"> <el-form ref="form"> </el-form> </el-dialog> <script> export default { methods: { resetForm() { this.$refs.form.resetFields() } } } </script>
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>
當(dāng)表格內(nèi)容過長時,手動添加樣式比較麻煩,偷偷告訴你,只需要添加一個 show-overflow-tooltip 就可以搞定。
<el-table-column prop="address" label="地址" width="180" show-overflow-tooltip > </el-table-column>
效果如下:
關(guān)于“Element-UI有哪些使用技巧”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。