vue icon组件
icon
- 用的阿里iconfont，在官网项目中生成js文件引入到index.html
<script src='//at.alicdn.com/t/font_983260_pg8k6k5k6l9.js'></script>
- 书写icon.vue
<template>
<svg class="icon" :class="sizeValue" aria-hidden="true">
<use :xlink:href='iconName'></use>
</svg>
</template>
<script>
export default {
// 组件名称
name: 'mimi-icon',
// 定义传进来的值
props: {
name: {
type: String,
required: true,
default: ''
},
size:{
type: String,
required: false,
default: ''
},
// 当三种尺寸不满足时，可自定义
w:{
type: String || Number,
required: false,
default: ''
},
h:{
type: String || Number,
required: false,
default: ''
}
},
computed: {
iconName() {
return `#${this.name}`
},
sizeValue() {
if(this.size) {
return this.size;
}else {
// 默认取最小
return 'sl';
}
}
}
}
</script>
<style lang="scss" scoped>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.sl{
height: 14px;
width: 14px;
}
.md{
height: 24px;
width: 24px;
}
.lg {
height: 36px;
width: 36px;
}
</style>
- 书写index.js注册为全局
import Icon from './icon/icon.vue'
export default (Vue)=>{
Vue.component("mimi-icon",Icon);
}
- 注入main.js
Vue.use(commonComponent);
