精华内容
下载资源
问答
  • 本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下 要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表 点击父标题栏的勾选图标可以全选或取消子列表 点击...
  • 主要为大家详细介绍了Vue自定义多选组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue 3多选 赞助商 其他图书馆 具有多句柄,工具提示合并和格式化的Vue 3滑块组件。 具有标签,自定义插槽和样式选项的Vue 3切换组件。 多选功能 Vue 2和3支持 没有依赖关系 轻量级(压缩后 < script >...
  • vue 实现多选 方法

    千次阅读 2019-06-18 13:14:43
    vm = new Vue({ el : '#app', data : { activeIndex : 0, listData : [{ text : 'aaa', bOn:false }, { text : 'bbbb', bOn:false }, { text : 'cccc', bOn:...

    https://www.cnblogs.com/mei1234/p/10417600.html 转载 学习

    <div class="flex-h tc_two_tl" v-for="(index,item) in listData" @click="btnActive(index,item)">
    			<div v-if="item.bOn == true"><img src="../../image/yxz.png" />
    						</div>
    						<div v-else><img src="../../image/wxz.png" />
    						</div>
    						<!--<div class="txz" :class=" activeIndex == index ? 'active' : '' "  style="">
    							{{item.text}}
    						</div>-->
    						<div class="txz" :class=" { active:item.bOn } "  style="">
    							{{item.text}}
    						</div>
    					</div>
    vm = new Vue({
    			el : '#app',
    			data : {
    				activeIndex : 0,
    				listData : [{
    					text : 'aaa',
    					bOn:false
    				}, {
    					text : 'bbbb',
    					bOn:false
    				}, {
    					text : 'cccc',
    					bOn:false
    				}, {
    					text : 'dddd',
    					bOn:false
    				}]
    			},
    			methods : {
    				hidden : function(str, frontLen, endLen) {//frontLen: 前面需要保留几位    endLen: 后面需要保留几位
    					var len = str.length - frontLen - endLen;
    					var xing = '';
    					for (var i = 0; i < len; i++) {
    						xing += '*';
    					}
    					return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    				},
    				
    				btnActive : function(index, item) {
     					this.listData[index].bOn = !this.listData[index].bOn;		
    				},
    				
    			}
    		});
    

     

    展开全文
  • 主要为大家详细介绍了vue实现自定义多选按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue-select 多选下拉列表,建议用火狐或者谷歌浏览器打开,低版本IE对vue兼容性不好
  • vue 日期多选插件

    千次阅读 2020-07-23 17:56:29
    安装:npm install v-calendar@next 配置: 使用: <v-date-picker mode="multiple" v-model="dates" /> ... new Date(2018, 0, 1), // Jan 1st, 2018 new Date(2018, 0, 15), // Jan 15th, 2018

    v-calendar:https://vcalendar.io/datepicker.html

    vue 日期多选插件

    安装:npm install v-calendar@next
    配置:
    vue 日期多选插件

    使用:

    <v-date-picker mode="multiple
    展开全文
  • Vue 自定义多选组件

    千次阅读 2020-08-10 10:53:57
    Vue 自定义多选组件 子组件(选项卡) checkBoxCard.vue <template> <div class="checkBoxCard"> <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()"> {{ ...

    Vue 自定义多选组件

    子组件(选项卡)

    checkBoxCard.vue

    <template>
      <div class="checkBoxCard">
        <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()">
          {{ name }}
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "checkBoxCard",
      props: {
        name: String,
        checkIndex: {
          type: Number,
          default: null,
        },
      },
      data() {
        return {
          radio: 0,
          check: false,
          radioName: "",
          list: [],
        };
      },
      methods: {
        checked() {
          if (this.radio == 1) {
            this.check = false;
            this.radio = 0;
          } else if (this.radio == 0) {
            this.check = true;
            this.radio = 1;
          }
        },
        updateData() {
          if (this.radio == 1) {
            this.radioName = this.name;
          } else if (this.radio == 0) {
            this.radioName = "";
          }
          this.$emit("updateSurveyData", this.radioName, this.checkIndex);
        },
      },
      mounted() {},
      created() {},
    };
    </script>
    
    <style  lang="scss" scoped>
    .checkBoxCard {
      margin-right: 15px;
      display: inline-block;
      margin-top: 10px;
    }
    .boxCheck {
      color: rgba(183, 37, 37, 1);
      background: bisque;
    }
    .box {
      border: 0.55px solid #eee;
      padding: 5px 10px;
      font-size: 3.73333vw;
      border-radius: 10px;
    }
    </style>
    

    父组件

    checkBox.vue

    <template>
      <div class="checkBox">
        <div class="title">
          选择
        </div>
    
        <div class="card">    
            <CheckBoxCard
              v-for="item in list"
              :key="item.value"
              :name="item.name"
              :checkIndex="item.value"
              @updateSurveyData="updateSurveyData"
            />
        </div>
      </div>
    </template>
    
    <script>
    import CheckBoxCard from "./checkBoxCard";
    export default {
      name: "checkBox",
      components: {
        CheckBoxCard,
      },
      data: function () {
        return {
          list: [
            { value: 0, name: "选项1" },
            { value: 1, name: "选项2" },
            { value: 2, name: "选项3" },
            { value: 3, name: "选项4" },
            { value: 4, name: "选项5" },
            { value: 5, name: "选项6" },
            { value: 6, name: "其他" },
          ],
          name: "",
           checkList: [],
        };
      },
      methods: {
        updateSurveyData(question, index) {
          this.checkList[index] = question;
           console.log(this.checkList.filter((x) => x != ""));
          console.log(this.checkList.filter((x) => x != "").join());
        },
      },
      created() {},
    };
    </script>
    
    <style scoped>
    .checkBox {
      padding: 5.33333vw 4vw;
      border-bottom: 0.55px solid #eee;
      background: white;
    }
    
    .title {
      text-align: left;
      color: #323233;
      font-size: 3.73333vw;
      padding-bottom: 10px;
      line-height: 30px;
    }
    </style>
    

    效果图

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue实现多选改变样式

    2021-03-10 10:03:45
    vue实现多选改变样式(自己写个小笔记) 欢迎使用Markdown编辑器 直接上代码 // 主要是绑定:class <el-tag :key="tag" v-for="(tag, index) in selectTags" @click="multipleSelect(tag, index)" :class="{ ...

    vue实现多选改变样式(自己写个小笔记)

    欢迎使用Markdown编辑器

    直接上代码

    // 主要是绑定:class
                <el-tag
                  :key="tag"
                  v-for="(tag, index) in selectTags"
                  @click="multipleSelect(tag, index)"
                  :class="{ multipleSelected: multipleList.indexOf(tag) != -1 }"
                >
                  {{ tag }}
                </el-tag>
    //data
    		  data() {
    		    return {
    		      selectTags: ['标签一', '标签二', '标签三'],
    		      multipleList: [],
    		    }
    		  },
    //methods
    		  methods:{
    			  multipleSelect(tag, index) {
    		      // indexOf()方法 没有检索到时返回-1
    		      console.log(this.multipleList.indexOf(tag))
    		      if (this.multipleList.indexOf(tag) !== -1) {
    		        this.multipleList.splice(this.multipleList.indexOf(tag), 1) //取消
    		      } else {
    		        this.multipleList.push(tag) //选中添加到数组里
    		      }
    		      // console.log(this.multipleList)
    		      },
    		  }
    

    效果
    在这里插入图片描述

    展开全文
  • 主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令,非常好用,具体实现过程大家跟随脚本之家小编一起看看吧
  • Vue 实现多选

    2019-10-21 09:41:34
    vue 多选 按钮 先看一下效果吧 内容比较机密 所以打了一下马 ‘不好意思’ HTML代码 js CSS
  • 主要介绍了jQuery+vue.js实现的多选下拉列表功能,涉及jQuery+vue.js数据绑定及事件响应相关操作技巧,需要的朋友可以参考下
  • vue实现多选、全选功能

    千次阅读 2019-08-19 16:10:47
    // 多选 async choosed(index) { var idx = this.checkBox.indexOf(index); if(this.$refs.liId[index].className == 'item-r') { // 添加类--选中状态 this.$refs.liId[index].className = 'item-r choose'; ...
  • vue上传demo,支持多选,拖拽上传
  • vue 下拉框多选

    千次阅读 2020-01-04 08:49:18
    在这里插入代码片<!... <...script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> <script src="https://unpkg.com/vue-select@2.0.0/dist/vue-select.js"><...
  • 上代码 //HTML区域 XXX XXX //方法区 /*获取多选id*/ handleSelectionChange(val){ this.selectRows=val; let selectId=[]; if(val){ val.forEach(function (item,index) { if(item){ selectId.push(item.id); } }) ...
  • vue多选 取消多选

    2021-08-23 14:31:01
    <!-- 选择分类 --> <div class="cell-item"> <div class="item-label">选择分类</div> <div class="item-value" @click="showLabel"> <div class="value">... .
  • 动态生成多选列表的组件封装,数据格式[{'value': '1', 'name': '选项1'},{'value': '2', 'name': '选项2(禁用)', 'disabled': true}, {'value': '3', 'name': '选项3'}]
  • vue 实现多选

    2019-03-26 23:23:00
    v-model <template> <!--用户页面-选择关注--> <div class="follow"> <h4>选择关注</h4> <p>请选择您感兴趣的分类,给您最精准的推荐</p>... ...
  • element实现vue级联多选

    千次阅读 2019-05-06 15:43:00
    element实现vue级联多选 已经有大神完成element的改造github:https://github.com/webCoderJ/ele-multi-cascader#Attributes 已实践可用 posted @ 2019-05-06 15:43 ...
  • 直接上代码 这个是我自己写的示例 比较简单 很容易看懂 <template> <div id="multipleMain" class="fd-main"> <div :class="[{'fd-select-body-buttom': !flag}, {'fd-select-body': flag}]" @...
  • vue 下拉框多选校验问题

    千次阅读 2020-12-21 22:28:17
    最近发现下拉框多选(multiple)时,一开始进页面就会触发验证,显然是不友好的。 解决方案: 在校验规则里加type:"array"; 下拉多选框绑定的变量初始值设置为[] html多选框如下: <el-form-...
  • vue多选组件

    2019-07-08 13:34:07
    在很多h5活动推广页面 都会用到单选或者多选 会结合一些ui框架来做 但是呢 可能因为样式或者其它因素 导致并不是很好用 就得用到手写了 第一种: 废话不多说 先上图 就类似于这样的 代码撸起来 <template&...
  • vue实现多选全选功能(代码简洁)

    千次阅读 2020-05-07 14:16:24
    我们在项目中,很多时候用到自定义的多选,全选的功能,样式也是根据ui图变化的,因此需要手写一个全选功能来实现ui图效果。 我们先理清楚几点: 1,点击一次选中,再点一次取消,再点击选中 2,不排他 3,当选择...
  • Vue城市多选组件

    千次阅读 2019-06-04 14:37:09
    效果DEMO: 组件需求 项目工具需求:给多个城市配置信息,城市选择具体到市,将全国...项目UI库:ant-design-vue 组件实现 组件代码 // selectCitys.vue <template> <div class="abk-select-city" @cl...
  • Vue实现多选、单选的样式切换

    千次阅读 2019-09-30 09:04:48
    vue框架中多选和单选的实现 css选中样式 <li class="select" v-for="(item,index) in leftnav" :class="{active:item.active}" @click="ClickActive(item,index)" >{{item.name}} ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,926
精华内容 3,570
关键字:

vue地址多选

vue 订阅