1.前言
最近正好用到组件这块
那就来2个例子吧,一个是评分的 一个是通讯软件分组的
整体上其实
vue还是非常简单易学的,生态也好,学习资料也多,所有关于这个vue写的文章比较少,就挑一点算是重难点的写写了,不像react写的那么细,后续还会有
vue 3版本的文章(这好像又是flag,手动狗头.png)
2. v-model
双向绑定指定大家都比较熟悉了
等价于
v-bind:value+v-on:input在深入的 有机会我们可以自己写个双向绑定 ,后续写分析源码了再说
样式的绑定基础
使用了单文件组件
大概效果
看到简易的效果后 先思考下怎么实现
其实就是叠加了2次星星
其中 ☆ 默认是10个 铺满
然后★ 根据传值 动态计算宽度百分比
3. 组件模板
动态计算 宽度这块方法比较多, 这里选用了 计算属性
computed动态绑定样式
<template> <div class="star-root" :style="rootStyleObj"> <div class="star-empty star-bar"> <!-- span 代表的是 每个星星 点击事件 需要把 当前的星星个数传过去 比如点了第 3个星星 代表 3分 传3 也就是 n --> <span v-for="n in total" :style="spanStyleObj" @click="starClick(n)" @mouseover="starClick(n)" :key="n" >☆</span > </div> <div class="star-full star-bar" :style="fullStarStyle"> <span v-for="n in total" :style="spanStyleObj" @click="starClick(n)" @mouseover="starClick(n)" :key="n" >★</span> </div> </div> </template>
4. vue
这块主要就是计算属性的具体代码
发射
input事件属性传值的验证
重点思考 data和 props区别
props由外面传入 ,大大扩展了组件的灵活性
<script> export default { props: { // 这里必须用 value 接收 v-model 的 属性传值 value: {}, // 星星总数 total: { default: 5, }, // 单个星星的尺寸 size: { default: 20, }, editable: { default: true, }, }, name: "star-component", data: function () { return { }; }, computed: { // 单个星星的样式 spanStyleObj() { return { width: this.size + "px", "font-size": (this.size / 5) * 6 + "px", cursor: this.editable ? "pointer" : "default", }; }, rootStyleObj(){ return { width: this.size * this.total + "px", height: this.size + "px", }; }, // 黑星容器的宽度 fullStarStyle() { return { width: (this.value / this.total) * 100 + "%" // 写法比较多 // width:分数*单个星星的宽度 +"px" // width:this.value*this.size +"px"}; }, }, methods: { starClick(n) { if (this.editable) { // v-model 绑定是 input事件 this.$emit("input", n); } }, }, }; </script>
5. 样式采用 less
主要是采用
less
flex注意
star-barposition: absolute;就是为了2个星星叠加到一起
<style lang="less" scoped> .star-root { display: inline-block; position: relative; .star-bar { position: absolute; left: 0; top: 0; display: flex; span { display: inline-block; flex-shrink: 0; text-align: center; } } .star-full { overflow: hidden; } } </style>
6. 使用组件
- 引入
- 注册
<h1>评分组件</h1> <input type="text" v-model="starScore"> <Component-Star v-model="starScore" :total="10" :size="40" :editable="true" ></Component-Star>
更多组件 ,可以自己探索哦
可以使用
dataset属性 组件内 传值分数哦 ,点击的时候 获取 .
7. 传值 dataset
$event不要忘了
@click="starClick(n,$event)" @mouseover="starClick(n,$event)" :data-id="n"
接收
starClick(n,event){ console.log("------",event.target.dataset) }
