小组件1.星星评论组件
程序员文章站
2022-03-04 10:44:44
...
一.使用vue.js+element-ui写星星评论组件
当vue.js与element-ui相附使用时,element-ui的icon图标中有星星图案的图标,使用起来比较方便,不需要再使用css写星星的形状。
效果图:
代码如下:
<template>
<div class="score">
<i v-for="i in 5" :key="i" class="el-icon-star-on" :style="{color:i < val ? '#f2c304' : '#cbc9ca'}"></i>
</div>
</template>
<script>
export default {
name:'',
data () {
return {
val:3
};
},
components: {},
mounted() {},
methods: {},
watch: {}
}
</script>
<style lang='scss' scoped>
.score{
border:1px solid red;
width:110px;
height:30px;
font-size: 20px;
}
</style>
上一篇: css3的边框新增加的特性有哪些
推荐阅读
-
微信小程序地图(map)组件点击(tap)获取经纬度的方法
-
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
-
微信小程序非跳转式组件授权登录的方法示例
-
小程序rich-text组件如何改变内部img图片样式的方法
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
微信小程序使用map组件实现解析经纬度功能示例
-
微信小程序使用map组件实现路线规划功能示例
-
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
-
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
-
【微信小程序】采坑之scroll-view组件