网站建设资讯

NEWS

网站建设资讯

基于element-ui组件手动实现单选和上传功能-创新互联

前言

创新互联公司是一家集网站建设,洮南企业网站建设,洮南品牌网站建设,网站定制,洮南网站建设报价,网络营销,网络优化,洮南网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

在用户使用过程中提出一键导入的功能,需求如下:点击导入按钮显示提示框,然后是单选框以及上传按钮。pc端常使用element-ui组件,但是这个项目是vue1的老项目,并且没有element-ui组件。所以需要自己动手实现单选功能和上传功能。

radio 属性及方法

name: 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现)

  • id: 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radio
  • value:单选按钮的值,选中某个单选按钮相当于拿到 value 值 tip:用于识别组中的哪个单选按钮被选中。
  • checked 用于设置默认选中的 radio
  • v-model 创建双向数据绑定。 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
// html
 
// 暂定的数据 data(){ return { weekSelectList: [ { label: '周一', value: '2018-12', id: 1 }, { label: '周二', value: '2018-13', id: 2 }, { label: '周三', value: '2018-14', id: 3 }, { label: '周四', value: '2018-15', id: 4 }, { label: '周五', value: '2018-16', id: 5 } ] }, selectedDay: '2018-12', }

当前题目:基于element-ui组件手动实现单选和上传功能-创新互联
新闻来源:http://njwzjz.com/article/dcpsde.html