初始化万家商超用户端仓库
This commit is contained in:
16
components/fu-star/css/iconfont.css
Normal file
16
components/fu-star/css/iconfont.css
Normal file
@ -0,0 +1,16 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANkAAsAAAAABzwAAAMXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCEIIFATYCJAMMCwgABCAFhG0HShtfBsgekiSCKD+lAEVUSZRAUTz8tx/tvplZ9bSbVJv46YokUUk0kpdGglBoWwJ0b1r/YJ2VhaZrZGWlCxWZaVpnssIB/kJ+AXzBT7gBAkYq+zyX01uJz49RTnMsPuoFGAcU6B7YBg6kQBL0FtlF/E5a8mkCjQbEMduuqGsDtgo0KRDXiCADtiWb0tMc6oXalpVFvGKlPr1IN/BSfj9+mc+WpCZDM3culCtB0deGr2csZqoZPZwgX84Dax0Zk4BCnGj1HWeR5iZZaAx0lv3VtYqQlkr+r5CyUFOL//BIgqiFGpvBqJZPfLWjslwvVxVPXcjwdKLsAe5yuu8eYmhqfM/hCLTdF21eHNW2dqt729aD0e27vNs2nouU7ghv33bBF63f4jW+fqf3gzbUdnRv9N329rYHXeW7JEv6pO3r+J3e+z5CSPp4f8/+DIQ27/Zcz2V/OCj1+nYz4N3xntO/lyTdp7sKLpVm/vfqWLsyJDvkZuHvlydOjY1R98vfheob+z1cCODimpp+j5RFVcXVvx+vzS11uUVF5Vy9XZVNtc+Eh+PDz6onlx+29jz1ta22reLqCytyimqtcmvejD97fpiy62wBTgGoXueP2Qeo7ufDPP3vf2P2nV9POuX9s5UU8OWy73MZqe4XsHqgXgIs/9NyYEcJlcieiy+jsjiQTQE8CVViB1UAhTq9mm7qeZtSqNczIVSn/80C9QZzsnAmUaPJImrVW0OjCZXrm3ShLERpwLh5CkK7A0hafULW7iZZOC9Ro9cX1GrPAo2OhtuOTYYjXCnFMoaVUD4KicKg54mTcUlzCxYGtTJaVEouwlQkSZickFQtVmI9pkvMEYeEFMZ4yFODDlYo52Gt1gCN1KDGCpagYsyYk5jIt70oQWHQAc4WCpNhMCVIbhREKBjo8bw3w9U+3wITDNKSoT2sgTiCUSIyOJQsQRKArNTpQaxHuUQ0RJCCYXgQjzLQgSoUD6bFOQPI2D5MDVNgEqgmZIxyJGrdeKguYXuD7v/2QSM0P0eKHEXbLaIX1EQ2IqQ04iiqiFQWrQAAAA==') format('woff2');
|
||||
}
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.icon-pingjiaxingxing:before {
|
||||
content: "\e662";
|
||||
}
|
||||
.icon-shixinxingxing:before {
|
||||
content: "\e609";
|
||||
}
|
||||
94
components/fu-star/fu-star.vue
Normal file
94
components/fu-star/fu-star.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view class="uni-star">
|
||||
<block v-for="(item, index) in count" :key="index">
|
||||
<text
|
||||
class="fu-iconfont"
|
||||
:style="{ 'margin-right': gutter + 'rpx', 'font-size': size + 'rpx', color: num >= index + 1 ? color : voidColor }"
|
||||
@click="chooseStar(index+1)"
|
||||
>
|
||||

|
||||
</text>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 默认图标
|
||||
icon:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
// 是否可以点击
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//星星间距
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
//字体大小
|
||||
size: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
//点亮星星颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#FD8A07'
|
||||
},
|
||||
//未点亮星星颜色
|
||||
voidColor: {
|
||||
type: String,
|
||||
default: '#DCDCDC'
|
||||
},
|
||||
//总星数
|
||||
count: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
// 默认点亮星星数
|
||||
value:{
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
num(){
|
||||
return this.value;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
//监听总星数改变 默认满星
|
||||
count(newVal,oldVal){
|
||||
this.value = newVal;
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
chooseStar(val){
|
||||
console.log(val)
|
||||
if(!this.readonly) return;
|
||||
// this.num = val;
|
||||
this.$emit('change',val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* @import 'css/iconfont.css'; */
|
||||
.uni-star {
|
||||
display: inline-block;
|
||||
}
|
||||
.fu-iconfont:last-child{
|
||||
margin-right: 0!important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user