You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<template> |
|
|
<!-- #ifdef APP-NVUE --> |
|
|
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text> |
|
|
<!-- #endif --> |
|
|
<!-- #ifndef APP-NVUE --> |
|
|
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text> |
|
|
<!-- #endif --> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import icons from './icons.js'; |
|
|
const getVal = (val) => { |
|
|
const reg = /^[0-9]*$/g |
|
|
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val; |
|
|
} |
|
|
// #ifdef APP-NVUE |
|
|
var domModule = weex.requireModule('dom'); |
|
|
import iconUrl from './uniicons.ttf' |
|
|
domModule.addRule('fontFace', { |
|
|
'fontFamily': "uniicons", |
|
|
'src': "url('"+iconUrl+"')" |
|
|
}); |
|
|
// #endif |
|
|
|
|
|
/** |
|
|
* Icons 图标 |
|
|
* @description 用于展示 icons 图标 |
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
|
|
* @property {Number} size 图标大小 |
|
|
* @property {String} type 图标图案，参考示例 |
|
|
* @property {String} color 图标颜色 |
|
|
* @property {String} customPrefix 自定义图标 |
|
|
* @event {Function} click 点击 Icon 触发事件 |
|
|
*/ |
|
|
export default { |
|
|
name: 'UniIcons', |
|
|
emits:['click'], |
|
|
props: { |
|
|
type: { |
|
|
type: String, |
|
|
default: '' |
|
|
}, |
|
|
color: { |
|
|
type: String, |
|
|
default: '#333333' |
|
|
}, |
|
|
size: { |
|
|
type: [Number, String], |
|
|
default: 16 |
|
|
}, |
|
|
customPrefix:{ |
|
|
type: String, |
|
|
default: '' |
|
|
} |
|
|
}, |
|
|
data() { |
|
|
return { |
|
|
icons: icons.glyphs |
|
|
} |
|
|
}, |
|
|
computed:{ |
|
|
unicode(){ |
|
|
let code = this.icons.find(v=>v.font_class === this.type) |
|
|
if(code){ |
|
|
return unescape(`%u${code.unicode}`) |
|
|
} |
|
|
return '' |
|
|
}, |
|
|
iconSize(){ |
|
|
return getVal(this.size) |
|
|
} |
|
|
}, |
|
|
methods: { |
|
|
_onClick() { |
|
|
this.$emit('click') |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style lang="scss"> |
|
|
/* #ifndef APP-NVUE */ |
|
|
@import './uniicons.css'; |
|
|
@font-face { |
|
|
font-family: uniicons; |
|
|
src: url('./uniicons.ttf') format('truetype'); |
|
|
} |
|
|
|
|
|
/* #endif */ |
|
|
.uni-icons { |
|
|
font-family: uniicons; |
|
|
text-decoration: none; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
</style>
|
|
|
|
