海宁市网站建设,连云港网站建设培训班,微信公众号端网站开发,visual studio网站开发ElementPlus组件提供了很多图标svg
如何在你的系统中#xff0c;用户可以使用呢#xff1f; 这就是图标器#xff0c;去调用ElementPlus的icon组件库#xff0c;展示到页面#xff0c;用户选择#xff0c;返回选择的组件名称。
效果 代码
templateel-inpu…ElementPlus组件提供了很多图标svg
如何在你的系统中用户可以使用呢 这就是图标器去调用ElementPlus的icon组件库展示到页面用户选择返回选择的组件名称。
效果 代码
templateel-input clickiconDialogVisible true v-modelcurrentIconName/el-inputel-dialogv-modeliconDialogVisibletitle请选择图标width80%:before-closehandleCloseopenbeforeOpendiv styledisplay: flex;flex-wrap: wrapdiv v-for(name,index) in icons :indexindex :keyindex stylecursor: pointer; padding: 5px; border: 1px solid rgb(227,232,232);:classcurrentIconName name ? red : clickcurrentIconName namecomponent :isname stylewidth: 1.2rem;height: 1.2rem/component/div/divtemplate #footerspan classdialog-footerel-button clickiconDialogVisible false取消/el-buttonel-button typeprimary clickhandleOk确定/el-button/span/template/el-dialog/templatescript
import * as ElIcons from element-plus/icons-vue
import {reactive, ref, toRefs, watch} from vue;export default {components: {...ElIcons},name: Naruto-Icon.vue,emits: [update:iconName],props: {iconName: {type: String}},setup(props, context) {const getData () {let icons []for (const name in ElIcons) {icons.push(name)}return icons}const handleClose () {iconList.iconDialogVisible false;}const beforeOpen () {}const handleOk () {context.emit(update:iconName, iconList.currentIconName);handleClose();}const iconList reactive({icons: getData(),iconDialogVisible: false,currentIconName: Aim})watch(() props.iconName,(val) {iconList.currentIconName val;})return {...toRefs(iconList),handleClose,beforeOpen,handleOk}}
}
/scriptstyle scoped
.red{background-color: palevioletred;color: white;
}
/style
