蓝桥杯Vue

el-rate 组件 show-score 属性详解1. 作用show-score是 Element UI 评分el-rate内置布尔属性加上show-score星星右侧实时显示当前打分数字分值不写该属性只展示星星不显示分数数字 默认值false不展示数字!-- 开启星星后面带出分数 -- el-rate v-modelspeed show-score/el-rate !-- 关闭只有星星 -- el-rate v-modelspeed/el-rate2. 搭配效果你代码里送餐速度el-rate v-modelspeed show-score changechange /el-rate页面表现 ⭐⭐⭐☆☆3.0星星打分 右侧同步展示数字分数3. 配套常用拓展属性max10修改最大分值默认满分 5 星el-rate v-modelnum max10 show-score/el-ratetext-template自定义分数文字格式el-rate v-modelspeed show-score text-template{value}分/el-rate展示效果3 分4. 和你报错的关联show-score本身写法没问题不会导致 change is not defined 报错你之前报错纯粹是模板绑定事件名 和 methods 函数名不一致导致的。5. 最终完整无误片段li 送餐速度el-rate v-modelspeed show-score changechange /el-rate /li li 外卖口味el-rate v-modelflavour show-score changechange /el-rate /li li 外卖包装el-rate v-modelpack show-score changechange /el-rate /limethodsmethods:{ change(){ // 三项都打分完毕再向上派发事件 if(this.speed this.flavour this.pack){ this.$emit(change, { speed: this.speed, flavour: this.flavour, pack: this.pack }) } } }Element UI el-rate 评分组件 全部常用属性一、基础分值控制v-model双向绑定存储当前评分数值数字类型el-rate v-modelscore/el-ratemax设置最大分值星星总数默认5el-rate v-modelscore max10/el-rate !-- 10颗星 --allow-half是否允许半星打分默认 falseel-rate v-modelscore allow-half show-score/el-rate !-- 可打出 3.5 这类分数 --二、分数文字展示相关show-score打分右侧显示数字分数默认不开启你正在用的text-template自定义分数文字模板{value}会自动替换为当前分数el-rate v-modelscore show-score text-template{value}分/el-rate !-- 展示4分 --show-text星星下方展示文字评价很差、一般、满意…默认 false 搭配texts可以自定义文字列表el-rate v-modelscore show-text/el-ratetexts自定义分段评价文字数组顺序对应 1 星满星el-rate v-modelscore show-text :texts[极差,较差,一般,满意,超棒] /el-rate三、状态禁用 / 只读disabled禁用评分无法点击修改灰色不可操作el-rate v-modelscore disabled/el-ratereadonly只读模式不能点击但样式正常高亮和 disabled 区别不会变灰el-rate v-modelscore readonly/el-rate四、颜色、图标样式自定义colors自定义不同分段星星激活颜色数组形式el-rate v-modelscore :colors[#ff4d4f,#ff9500,#00b42a] /el-ratevoid-color未选中星星的底色空心星星颜色icon-classes / void-icon-class自定义选中、未选中图标替换星星图标五、事件change分值发生变化时触发回调参数为最新分数el-rate v-modelscore changehandleChange/el-ratemethods:{ handleChange(val){ console.log(最新分数, val) } }六、综合完整示例el-rate v-modelscore max5 allow-half show-score show-text text-template{value}颗星 :texts[糟糕,欠佳,普通,不错,完美] changechange /recursive 参数中文递归的在 nodefs模块经常出现mkdirSync、cpSync、rmSync都有这个配置项。{ recursive: true }1️⃣ fs.mkdirSync 创建文件夹时fs.mkdirSync(path1) // ❌ fs.mkdirSync(path1, { recursive:true }) // ✅recursive: false默认如果父文件夹不存在直接报错。如果文件夹已经存在直接报错。recursive: true自动把全部层级父文件夹一次性创建。文件夹已经存在不会报错静默跳过。脚手架场景必加用户重复运行脚手架脚本不会直接崩溃。示例 路径a/b/ca 文件夹都不存在。不加 recursive报错recursive:true一次性创建 a → a/b → a/b/c。2️⃣ fs.cpSync 复制文件夹你题目里面fs.cpSync(templatePath, path1, { recursive:true })recursive:false默认只能复制单个文件不能复制文件夹。如果你传文件夹直接报错。recursive:true开启递归复制遍历文件夹里面所有子文件夹、子文件全部复制过去。脚手架复制模板文件夹必须写 recursive:true不然复制不了整个 template 文件夹。3️⃣ fs.rmSync 删除fs.rmSync(./demo, {recursive:true, force:true})recursive:true可以删除整个文件夹连同里面全部内容。不加只能删文件不能删文件夹。✨一句话记忆表格APIrecursive:true 作用mkdirSync递归建多级目录目录存在不报错cpSync递归复制整个文件夹含子文件子目录rmSync递归删除整个文件夹⚠️ recursive 是配置对象里面的属性必须放在对象字面量 {} 里面不能直接传 true。//错误写法 fs.mkdirSync(path1, true) //正确写法 fs.mkdirSync(path1, { recursive:true })回到你的脚手架代码//创建项目文件夹防止文件夹已存在报错 fs.mkdirSync(path1, { recursive: true }) //复制整个模板文件夹包括内部所有子文件夹文件 fs.cpSync(templatePath, path1, { recursive:true })考试重点mkdirSync不加recursive:true重复运行脚手架会抛错。cpSync不加recursive:true无法复制文件夹只能复制单个文件。