父页面
<template>
<view>
<evan-form ref="form" :model="info">
<evan-form-item label="是否是vip:" prop="vip">
<view class="form-input"><s-switch style="float: right;"v-model="info.vip"></s-switch></view>
</evan-form-item>
</evan-form>
</view>
</template>
<script>
export default {
data() {
return {
vip:1
}
}
}
</script>
组件 s-switch
<template>
<view class="s-switch-container">
<view class="s-switch-item" v-for="item in switchList" :key="item.key"
:class="[ value == item.key ? 's-switch-selected' : '' ]"
@click="selectItem(item)">
{{item.value}}
</view>
</view>
</template>
<script>
export default {
name: 'switch',
props: {
// 实现v-model必须这么写,原因还没弄懂
value: {
type: Number || String,
default: 0
},
switchList: {
type: Array,
default() {
return [
{
key: 0,
value: '否'
},
{
key: 1,
value: '是'
}
]
}
}
},
data () {
return {
}
},
methods: {
selectItem (info) {
//v-model实现的是v-bind:value 和v-on:input,这句更新父级组件的value
this.$emit("input", info.key);
}
}
}
</script>
<style lang="scss" scoped>
.s-switch-container {
padding: 2upx;
display: flex;
flex-direction: row;
width: 160upx;
height: 60upx;
border-radius: 100upx;
border: 4upx solid #1D8BE8;
}
.s-switch-item {
color: #1D8BE8;
font-size: 30upx;
width: 80upx;
display: flex;
justify-content: center;
align-items: center;
}
.s-switch-selected {
color: #ffffff;
border-radius: 40upx;
background: #1D8BE8;
}
</style>
效果