基于vue2.x实现单选框与复选框组件

基于vue2.x实现单选框与复选框组件


w-single-input(单选框)

w-checkbox(多选框)

不是很会录屏,就放几组演示照片吧

多选框选中
单选框

支持模糊查找话不多说,我们现在就开始实现这两个组件,首先你得搭好一个架子,架子具体实现请参考github,这个是我组件库开发的地址,通过修改vue-cli脚手架,将开发与展示放在一块,利于我前期的一个开发,examples下是展示实例,packages是包所在的文件目录,如果你感觉通过修改vue-cli脚手架太麻烦的话,也可以通过链接引入vue,然后对这两个组件进行注册,当然这也是可以的。


我们先来实现单选框组件

  1. 最开始我们需要的数据包含originOptionsselected这两个数据,我们通过方法queryData来添加我们想要的数据,冰鞋我们需要设定一个回掉函数singleCallback,来处理我们子组件返回的值,大概是父组件中需要这样写代码,并且我们父组件的html部分需要这样写。
<script>
export default{
    data(){
      return {
        single:{
          originOptions: [],
          selected: {}
        }
      }
    },
    mounted :function() {
    
        this.queryData();
    },
    methods: {
        queryData: function(){
    
        var mySelf = this
        //do ajax here
        // 单选
        mySelf.single.originOptions = [{
   "id":"1","name":"lemon"},{
   "id":"2","name":"mike"},{
   "id":"3","name":"lara"},{
   "id":"4","name":"zoe"},{
   "id":"5","name":"steve"},{
   "id":"6","name":"nolan"}];
        mySelf.single.selected = {
   "id":"4","name":"zoe"}
        this.$nextTick(function(){
    
            //dom更新之后,执行一些其他操所。
        })
        },
      singleCallback: function(data){
    
        this.single.selected = data;
        console.log('父级元素调用singleCallback 选中的是' + JSON.stringify(data))
      }
    }
  }
</script>
//部分,请自行放在合适位置
<w-single-input v-bind:optionsdata="single.originOptions" 
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以为您设计一个注册会员页面,以下是我提供的代码示例: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>会员注册</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>会员注册</h1> <form id="register-form" action="register.php" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> <br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <br> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <br> <label>性别:</label> <input type="radio" id="male" name="gender" value="male" required> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> <br> <label>爱好:</label> <input type="checkbox" id="reading" name="hobby[]" value="reading"> <label for="reading">阅读</label> <input type="checkbox" id="music" name="hobby[]" value="music"> <label for="music">音乐</label> <input type="checkbox" id="sports" name="hobby[]" value="sports"> <label for="sports">运动</label> <br> <label for="city">城市:</label> <select id="city" name="city" required> <option value="">请选择</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> <br> <input type="submit" value="注册"> <input type="reset" value="重置"> </form> </div> </body> </html> ``` CSS代码: ``` .container { width: 500px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } h1 { text-align: center; } label { display: inline-block; width: 80px; } input[type="text"], input[type="email"], input[type="password"], select { width: 200px; padding: 5px; margin-bottom: 10px; border-radius: 5px; border: 1px solid #ccc; } input[type="radio"], input[type="checkbox"] { margin-right: 10px; } input[type="submit"], input[type="reset"] { display: block; margin: 20px auto; padding: 10px 20px; background-color: #2ecc71; color: #fff; border: none; border-radius: 5px; cursor: pointer; } input[type="submit"]:hover, input[type="reset"]:hover { background-color: #27ae60; } ``` 注释:这里使用了HTML和CSS来实现一个简单的会员注册页面,包括姓名、邮箱、密码、性别、爱好、城市等多种表单控件。其中,必填项添加了required属性。点击注册按钮后,会将用户填写的信息发送至指定的register.php文件进行处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值