vue复选框组件自定义对勾_Vue自定义单选按钮和复选框组件

“ 做好本身就好了呀 ”

题目

前段时间接到一个使命,须要做一个自定义的单选和多选按钮,然则之前都是用现成的UI框架,都不必本身写款式,直接一套就是干!然则进公司后,发明部门不实用外部UI框架,好吧,那我就本身写呗!

构想

我想到的方法是应用原生的radio和CheckBox,再经由过程款式掩盖的体式格局。

兼容性

因为在写组件时使用了flex规划,so 低版本浏览器不支持的哈,详细有关flex的学问能够进修一下阮大佬的博客:Flex 规划教程:语法篇

空话不多说上代码

:class="{'column':isColumn}">

:key=index

class="check-box"

:class="{'width100':isColumn}"

@click="checkBox(index)"

v-show="!item.isShow">

:style="item.isChecked?propsStyle:''">

:value="item.value">

export default {

name: "checkbox",

data() {

return {

propsStyle: {

border: "1px solid " + this.color,

background: this.color

}

};

},

props: {

/**

items实例:[{name:'选项一',isChecked:false}],

name:能够是html,

须要显现和隐蔽的加上isShow字段,true为隐蔽,以下:

[{name:'选项一',isChecked:false,isShow:false}]

*/

items: {

type: Array,

default: function() {

return [];

}

},

// 已选框的色彩透明度

opacity: {

type: Boolean,

default: false

},

// flex规划纵轴方向

isColumn: {

type: Boolean,

default: false

},

// 最大选项数

limit: {

type: Number,

default: 2

},

// 已选项框的背景色

color: {

type: String,

default: "#65aef7"

}

},

watch: {

color(newval, oldval) {

if (newval != oldval) {

}

}

},

methods: {

checkBox(index) {

let count = 0;

for (let i = 0; i < this.items.length; i++) {

if (this.items[i].isChecked == true) {

count++;

}

}

if (count >= this.limit && !this.items[index].isChecked) {

this.$emit("canNotAdd", false);

return;

}

// 将所选项的value值传出去,并勾选

/* 也可将这句代码放在父组件挪用这个事宜的处所,能够使得复选框智能在特定条件下被选中*/

this.$set(this.items[index], "isChecked", !this.items[index].isChecked);

// this.items[index].isChecked = !this.items[index].isChecked;

this.$emit("checkBox", index);

}

}

};

.check-boxs {

display: flex;

display: -webkit-flex;

justify-content: space-between;

align-items: center;

margin: 5px 0;

color: #545454;

font-size: 12px;

}

.column {

flex-direction: column;

justify-content: flex-start;

}

.width100 {

width: 100%;

display: flex;

display: -webkit-flex;

justify-content: space-between;

height: 24px;

align-items: flex-start;

padding-right: 40px;

box-sizing: border-box;

}

.check-box {

position: relative;

cursor: pointer;

}

.check-box input {

vertical-align: middle;

margin-top: -2px;

margin-bottom: 1px;

/* 前面三行代码是为了让checkbox按钮与笔墨对齐 */

width: 12px;

height: 12px;

appearance: none; /*清晰默许款式*/

-webkit-appearance: none;

opacity: 0;

outline: none;

cursor: pointer;

/* 注重不能设置为display:none*/

}

/* 选项框的款式修正 */

.checkbox-icon {

width: 12px;

height: 12px;

position: absolute;

top: 1px;

z-index: 0;

border-radius: 2px;

background-color: #fff;

border: 1px solid #c9c9c9;

box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);

cursor: pointer;

}

.checkbox-input {

border: 1px solid #65aef7;

background-color: #65aef7;

}

.opacity {

opacity: 0.5;

}

.checkbox-on {

position: absolute;

left: 4px;

top: 1px;

width: 3px;

height: 7px;

border-right: 2px solid #fff;

border-bottom: 2px solid #fff;

transform: rotate(45deg);

}

:key=index

@click="radioOn(index)"

class="single">

v-if="item.isChecked"

:style="item.isChecked?propsStyle:''">

:name="item.name"

:id="item.value"

:value="item.value"

v-model="radio">

export default {

name: "Radio",

data() {

return {

radio: 0,

propsStyle: {

background: this.color

}

};

},

/*itemsRadio: [

{ name: "杭州", value: 0, isChecked: true },

{ name: "上海", value: 1, isChecked: false },

{ name: "北京", value: 2, isChecked: false }

]*/

props: {

items: {

type: Array,

default: function() {

return [];

}

},

color: {

type: String,

default: "#65aef7"

}

},

methods: {

radioOn(index) {

this.items.forEach(key => {

key.isChecked = false;

});

this.items[index].isChecked = true;

this.$emit("radioOn", index);

}

}

};

.radio-container {

display: flex;

display: -webkit-flex;

justify-content: space-between;

align-items: center;

font-size: 12px;

cursor: pointer;

}

.single {

position: relative;

display: flex;

display: -webkit-flex;

align-items: center;

cursor: pointer;

}

input {

width: 12px;

height: 12px;

appearance: none; /*清晰默许款式*/

-webkit-appearance: none;

opacity: 0;

outline: none;

cursor: pointer;

vertical-align: middle;

margin-top: -2px;

margin-bottom: 1px;

}

.outer {

height: 12px;

width: 12px;

display: flex;

display: -webkit-flex;

justify-content: center;

align-items: center;

border: 1px solid #ccc;

border-radius: 999px;

position: absolute;

top: 1px;

z-index: 0;

}

.inner {

background-color: green;

width: 6px;

height: 6px;

border-radius: 999px;

}

以上两个均以组件情势挪用哈,只要在父组件中传入响应数据就能够看到结果哦

代码如有瑕疵,请指出,轻喷。

你可能感兴趣的:(vue复选框组件自定义对勾)