Element-ui和Element-plus获取所有icon

  1. Element-ui
export const iconFontList = [
    'el-icon-platform-eleme',
    'el-icon-eleme',
    'el-icon-delete-solid',
    'el-icon-delete',
    'el-icon-s-tools',
    'el-icon-setting',
    'el-icon-user-solid',
    'el-icon-user',
    'el-icon-phone',
    'el-icon-phone-outline',
    'el-icon-more',
    'el-icon-more-outline',
    'el-icon-star-on',
    'el-icon-star-off',
    'el-icon-s-goods',
    'el-icon-goods',
    'el-icon-warning',
    'el-icon-warning-outline',
    'el-icon-question',
    'el-icon-info',
    'el-icon-remove',
    'el-icon-circle-plus',
    'el-icon-success',
    'el-icon-error',
    'el-icon-zoom-in',
    'el-icon-zoom-out',
    'el-icon-remove-outline',
    'el-icon-circle-plus-outline',
    'el-icon-circle-check',
    'el-icon-circle-close',
    'el-icon-s-help',
    'el-icon-help',
    'el-icon-minus',
    'el-icon-plus',
    'el-icon-check',
    'el-icon-close',
    'el-icon-picture',
    'el-icon-picture-outline',
    'el-icon-picture-outline-round',
    'el-icon-upload',
    'el-icon-upload2',
    'el-icon-download',
    'el-icon-camera-solid',
    'el-icon-camera',
    'el-icon-video-camera-solid',
    'el-icon-video-camera',
    'el-icon-message-solid',
    'el-icon-bell',
    'el-icon-s-cooperation',
    'el-icon-s-order',
    'el-icon-s-platform',
    'el-icon-s-fold',
    'el-icon-s-unfold',
    'el-icon-s-operation',
    'el-icon-s-promotion',
    'el-icon-s-home',
    'el-icon-s-release',
    'el-icon-s-ticket',
    'el-icon-s-management',
    'el-icon-s-open',
    'el-icon-s-shop',
    'el-icon-s-marketing',
    'el-icon-s-flag',
    'el-icon-s-comment',
    'el-icon-s-finance',
    'el-icon-s-claim',
    'el-icon-s-custom',
    'el-icon-s-opportunity',
    'el-icon-s-data',
    'el-icon-s-check',
    'el-icon-s-grid',
    'el-icon-menu',
    'el-icon-share',
    'el-icon-d-caret',
    'el-icon-caret-left',
    'el-icon-caret-right',
    'el-icon-caret-bottom',
    'el-icon-caret-top',
    'el-icon-bottom-left',
    'el-icon-bottom-right',
    'el-icon-back',
    'el-icon-right',
    'el-icon-bottom',
    'el-icon-top',
    'el-icon-top-left',
    'el-icon-top-right',
    'el-icon-arrow-left',
    'el-icon-arrow-right',
    'el-icon-arrow-down',
    'el-icon-arrow-up',
    'el-icon-d-arrow-left',
    'el-icon-d-arrow-right',
    'el-icon-video-pause',
    'el-icon-video-play',
    'el-icon-refresh',
    'el-icon-refresh-right',
    'el-icon-refresh-left',
    'el-icon-finished',
    'el-icon-sort',
    'el-icon-sort-up',
    'el-icon-sort-down',
    'el-icon-rank',
    'el-icon-loading',
    'el-icon-view',
    'el-icon-c-scale-to-original',
    'el-icon-date',
    'el-icon-edit',
    'el-icon-edit-outline',
    'el-icon-folder',
    'el-icon-folder-opened',
    'el-icon-folder-add',
    'el-icon-folder-remove',
    'el-icon-folder-delete',
    'el-icon-folder-checked',
    'el-icon-tickets',
    'el-icon-document-remove',
    'el-icon-document-delete',
    'el-icon-document-copy',
    'el-icon-document-checked',
    'el-icon-document',
    'el-icon-document-add',
    'el-icon-printer',
    'el-icon-paperclip',
    'el-icon-takeaway-box',
    'el-icon-search',
    'el-icon-monitor',
    'el-icon-attract',
    'el-icon-mobile',
    'el-icon-scissors',
    'el-icon-umbrella',
    'el-icon-headset',
    'el-icon-brush',
    'el-icon-mouse',
    'el-icon-coordinate',
    'el-icon-magic-stick',
    'el-icon-reading',
    'el-icon-data-line',
    'el-icon-data-board',
    'el-icon-pie-chart',
    'el-icon-data-analysis',
    'el-icon-collection-tag',
    'el-icon-film',
    'el-icon-suitcase',
    'el-icon-suitcase-1',
    'el-icon-receiving',
    'el-icon-collection',
    'el-icon-files',
    'el-icon-notebook-1',
    'el-icon-notebook-2',
    'el-icon-toilet-paper',
    'el-icon-office-building',
    'el-icon-school',
    'el-icon-table-lamp',
    'el-icon-house',
    'el-icon-no-smoking',
    'el-icon-smoking',
    'el-icon-shopping-cart-full',
    'el-icon-shopping-cart-1',
    'el-icon-shopping-cart-2',
    'el-icon-shopping-bag-1',
    'el-icon-shopping-bag-2',
    'el-icon-sold-out',
    'el-icon-sell',
    'el-icon-present',
    'el-icon-box',
    'el-icon-bank-card',
    'el-icon-money',
    'el-icon-coin',
    'el-icon-wallet',
    'el-icon-discount',
    'el-icon-price-tag',
    'el-icon-news',
    'el-icon-guide',
    'el-icon-male',
    'el-icon-female',
    'el-icon-thumb',
    'el-icon-cpu',
    'el-icon-link',
    'el-icon-connection',
    'el-icon-open',
    'el-icon-turn-off',
    'el-icon-set-up',
    'el-icon-chat-round',
    'el-icon-chat-line-round',
    'el-icon-chat-square',
    'el-icon-chat-dot-round',
    'el-icon-chat-dot-square',
    'el-icon-chat-line-square',
    'el-icon-message',
    'el-icon-postcard',
    'el-icon-position',
    'el-icon-turn-off-microphone',
    'el-icon-microphone',
    'el-icon-close-notification',
    'el-icon-bangzhu',
    'el-icon-time',
    'el-icon-odometer',
    'el-icon-crop',
    'el-icon-aim',
    'el-icon-switch-button',
    'el-icon-full-screen',
    'el-icon-copy-document',
    'el-icon-mic',
    'el-icon-stopwatch',
    'el-icon-medal-1',
    'el-icon-medal',
    'el-icon-trophy',
    'el-icon-trophy-1',
    'el-icon-first-aid-kit',
    'el-icon-discover',
    'el-icon-place',
    'el-icon-location',
    'el-icon-location-outline',
    'el-icon-location-information',
    'el-icon-add-location',
    'el-icon-delete-location',
    'el-icon-map-location',
    'el-icon-alarm-clock',
    'el-icon-timer',
    'el-icon-watch-1',
    'el-icon-watch',
    'el-icon-lock',
    'el-icon-unlock',
    'el-icon-key',
    'el-icon-service',
    'el-icon-mobile-phone',
    'el-icon-bicycle',
    'el-icon-truck',
    'el-icon-ship',
    'el-icon-basketball',
    'el-icon-football',
    'el-icon-soccer',
    'el-icon-baseball',
    'el-icon-wind-power',
    'el-icon-light-rain',
    'el-icon-lightning',
    'el-icon-heavy-rain',
    'el-icon-sunrise',
    'el-icon-sunrise-1',
    'el-icon-sunset',
    'el-icon-sunny',
    'el-icon-cloudy',
    'el-icon-partly-cloudy',
    'el-icon-cloudy-and-sunny',
    'el-icon-moon',
    'el-icon-moon-night',
    'el-icon-dish',
    'el-icon-dish-1',
    'el-icon-food',
    'el-icon-chicken',
    'el-icon-fork-spoon',
    'el-icon-knife-fork',
    'el-icon-burger',
    'el-icon-tableware',
    'el-icon-sugar',
    'el-icon-dessert',
    'el-icon-ice-cream',
    'el-icon-hot-water',
    'el-icon-water-cup',
    'el-icon-coffee-cup',
    'el-icon-cold-drink',
    'el-icon-goblet',
    'el-icon-goblet-full',
    'el-icon-goblet-square',
    'el-icon-goblet-square-full',
    'el-icon-refrigerator',
    'el-icon-grape',
    'el-icon-watermelon',
    'el-icon-cherry',
    'el-icon-apple',
    'el-icon-pear',
    'el-icon-orange',
    'el-icon-coffee',
    'el-icon-ice-tea',
    'el-icon-ice-drink',
    'el-icon-milk-tea',
    'el-icon-potato-strips',
    'el-icon-lollipop',
    'el-icon-ice-cream-square',
    'el-icon-ice-cream-round',
];

  1. Element-plus

<template>
  <div>
    <component :is="name" style="width: 2rem;" v-for="(name,index) in icons" :index="index" :key="index">
    </component>
  </div>
</template>

<script>
import * as ElIcons from '@element-plus/icons'

const getData = () => {
   let icons = []
   for (const name in ElIcons) {
     icons.push(name)
   }
   return icons
}

</script>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 Vue2 中使用 Element-UI 进行图片上传,需要进行以下步骤: 1. 安装 Element-UI: ```bash npm install element-ui --save ``` 2. 引入 Element-UI: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 在 HTML 中添加上传组件: ```html <template> <div> <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> ``` 其中,`:action` 属性指定了上传图片的地址,`:show-file-list` 属性设置为 `false`,表示不展示上传的文件列表,`:on-success` 属性指定了上传成功后的回调函数,`:before-upload` 属性指定了上传之前的回调函数。 4. 在 JavaScript 中添加上传相关方法: ```javascript <script> export default { data() { return { imageUrl: '', uploadUrl: 'your-upload-url' } }, methods: { handleSuccess(res) { this.imageUrl = URL.createObjectURL(res.raw) }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg' const isPNG = file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG && !isPNG) { this.$message.error('上传图片只能是 JPG 或 PNG 格式!') return false } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') return false } return true } } } </script> ``` 其中,`handleSuccess` 方法在上传成功后将图片显示出来,`beforeUpload` 方法用于校验上传的图片格式和大小,并在校验失败时提示错误信息。 以上就是使用 Element-UI 进行图片上传的基本流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰镇白干

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值