当前位置: 首页 > news >正文

设计工作室网站商业网站 模板

设计工作室网站,商业网站 模板,北京大学两学一做网站,做外贸 用国内空间做网站目录 介绍 准备 目标 效果 规定 思路 解答参考 介绍 外卖是现代生活中必备的一环。收到外卖后#xff0c;各大平台软件常常会邀请用户在口味#xff0c;配送速度等多个方面给与评分。在 element-ui 组件中#xff0c;已经有相应的 Rate 组件#xff0c;但是已有组件…目录 介绍 准备 目标 效果 规定 思路 解答参考 介绍 外卖是现代生活中必备的一环。收到外卖后各大平台软件常常会邀请用户在口味配送速度等多个方面给与评分。在 element-ui 组件中已经有相应的 Rate 组件但是已有组件只能对单一维度进行评分在外卖评分这种场景中样式基本上是固定的功能也基本一样。若每写一个页面都要去复制一份类似代码就会产生大量重复的代码既不利于后期的维护代码也不够简洁。为此需要前端工程师对 element-ui 的原 Rate 组件进行二次封装。 准备 开始答题前需要先打开本题的项目代码文件夹目录结构如下 ├── element-ui-2.6.2 │ ├── element-icons.ttf │ ├── element-icons.woff │ ├── element-ui.min.js │ └── element-ui.style.css ├── index.html ├── js │ ├── http-vue-loader.js │ └── vue.min.js ├── my-rate.vue └── effect.gif 其中 index.html 是主页面。element-ui-2.6.2 文件夹中存放的是 element-ui 库相关的脚本文件、样式文件及字体。js 文件夹中存放的是 vue 及 http-vue-loader 库相关文件。my-rate.vue 是待封装的评分组件文件。effect.gif 是完成后的效果图。 注意打开环境后发现缺少项目代码请手动键入下述命令进行下载 cd /home/project wget https://labfile.oss.aliyuncs.com/courses/18213/03.zip unzip 03.zip rm 03.zip 在浏览器中预览 index.html 页面显示如下所示 目标 请在 my-rate.vue 文件中补充代码具体要求如下 my-rate.vue 组件能够对不同的维度进行评分。 my-rate.vue 组件对外抛出 change 事件在三项评分均完成后触发 change 事件change 事件包含一个参数用于传递改变后的分数值其类型是对象包含以下属性 效果 完成后的效果见 effect.gif 提示可以通过 VS Code 或者浏览器预览 gif 图片。 实现该功能所需的 el-rate 组件 api 如下 参数说明类型默认值value/v-model绑定值number0show-score是否显示当前分数show-score 和 show-text 不能同时为真booleanfalsechange(event 事件)分值改变时触发参数是改变后的分值(changed: object) void 规定 请勿修改my-rate.vue文件外的任何内容。 请严格按照考试步骤操作切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等以免造成无法判题通过。自己先做一下吧传送门 思路 这道题目主要是考察Vue以及elementUI的知识点。需要学会通过提供的组件API来实现相应的功能。同时也需要会使用Vue进行自定义事件的绑定来进行数据的传递。若对组件间如何实现通信感兴趣的小伙伴可以这篇文章 解答参考 ul classrate-list li!-- TODO 补全 el-rate 属性 --送餐速度el-rate v-modelspeed show-score changechangeHandler/el-rate/lili!-- TODO 补全 el-rate 属性 --外卖口味el-rate v-modelflavour show-score changechangeHandler/el-rate/lili!-- TODO 补全 el-rate 属性 --外卖包装el-rate v-modelpack show-score changechangeHandler/el-rate/li/ul 对每一个el-rate标签使用v-model来进行绑定获取它对应的数值。同时加上show-score属性让其显示当前分数。并未每一个标签绑定change事件当数值改变时触发。 methods:{changeHandler(){if(this.speed this.flavour this.pack){const rate {speed: this.speed, // 送餐速度flavour: this.flavour, // 外卖口味pack: this.pack, // 外卖包装}this.$emit(change,rate)}}} 当有分值改变时触发changeHandler函数并判断三个属性是否都有对应的值若有则使用$emit对外抛出 change 事件并传入对应的对象数值。 文件整体代码 templatediv classblockspan classdemonstration请为外卖评分: /spanul classrate-list li!-- TODO 补全 el-rate 属性 --送餐速度el-rate v-modelspeed show-score changechangeHandler/el-rate/lili!-- TODO 补全 el-rate 属性 --外卖口味el-rate v-modelflavour show-score changechangeHandler/el-rate/lili!-- TODO 补全 el-rate 属性 --外卖包装el-rate v-modelpack show-score changechangeHandler/el-rate/li/ul/div /template style .block {border: 1px solid #c7c5c5;padding: 10px; } .rate-list {list-style: none;padding-inline-start: 20px;margin-block-start: 10px;margin-block-end: 10px; } .el-rate {display: inline-block; } /stylescript module.exports {data() {return {speed: 0, // 送餐速度flavour: 0, // 外卖口味pack: 0, // 外卖包装};},/* TODO: 考生需要完成以下内容 */methods:{changeHandler(){if(this.speed this.flavour this.pack){const rate {speed: this.speed, // 送餐速度flavour: this.flavour, // 外卖口味pack: this.pack, // 外卖包装}this.$emit(change,rate)}}}}; /script好啦本文就到这里了这道题比较简单就不过多讲解了
http://www.huolong8.cn/news/359581/

相关文章:

  • 窗帘网站建设策划书道客巴巴php网站上传漏洞
  • html网站系统网站制作厂家电话多少
  • 计算机课程网站建设实训报告总结wordpress 悬停 图片 文字
  • wordpress网站源文件太多蝌蚪窝一个释放做网站
  • 做网站最好用的软件南充房管局官网
  • 淘宝客怎么做自己网站推广任丘网站建设价格
  • 为网站网站做代理怎么判天河区门户网站
  • 建设银行网站查开户行免费个人建站系统
  • 个人网站建设方案实施做网站要什么功能
  • 自助建站免费建站五个平台网站推广怎么做关键词
  • 网站模板教程汕头网站建设制作厂家
  • 网站怎么发邮件58同城网
  • 同方云罐网站设计技术教程优化搜索引擎整站
  • 佛山公司做网站刷手机网站关键词
  • 建站之星安装教程安徽专业网站建设检修
  • 企业网银登录呼和浩特网站seo优化方案
  • 苏州建网站的公司网站搭建岗位及要求
  • dedecms的网站如何添加个引导页规模以上工业企业数量
  • c 视频播放网站开发研究生做家教什么网站
  • 网页广告有哪些seo 排名 优化
  • 做视频网站需要多大的带宽软文营销的特点有哪些
  • wordpress防站网站首页快照应该怎么
  • 网站目录层级建设珠宝网站制作的理念
  • 吕梁网站建设公司河北建设厅网站技术电话
  • 新手织梦网建设网站如何引用404做网站
  • 网站建设拍金手指谷哥12手机网站横竖屏
  • 商城类网站开发网站建设业务需求文档
  • 常用的网站类型有哪些类型有哪些网站的内部优化
  • 溧阳做网站哪家好积分支付 WordPress
  • 网络策划方案龙岩优化怎么做搜索