前端vue uni-app基于radio增强单选框组件

原创已于 2023-10-19 08:23:34 修改 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #微信小程序 #vue.js #算法 #uni-app #html5

于 2023-06-10 16:11:23 首次发布

本文介绍了基于Vue的uni-app框架开发的增强型单选框组件，通过组件化方法提高开发效率和降低维护成本。组件支持单独维护和组合使用，提供了详细的使用方法和示例代码，包括HTML模板、JS数据填充和CSS样式。此外，文章还强调了组件化在复杂前端应用中的重要性，涉及到模块拆分策略和交互设计等关键点。

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文给大家介绍的一款组件是：

前端vue uni-app基于radio增强单选框组件,

阅读全文下载完整组件代码请关注微信公众号：前端组件开发

效果图如下:

#### 使用方法

```使用方法

<ccRadioView :radioData="items" :curIndex="current" @change="radioChange"></ccRadioView>

```

#### HTML代码部分

```html

<template>

<view>



<ccRadioView :radioData="items" :curIndex="current" @change="radioChange"></ccRadioView>

<button class="botBtn" type="primary" @click="submitBtnClick">完成</button>



<view style="height: 30px;"></view>

</view>

</template>

```

#### JS代码（引入组件填充数据）

```javascript

<script>

import ccRadioView from '../../components/ccRadioView.vue'

export default {

components:{

ccRadioView

},

data() {

return {

items: [{

value: '1',

name: '事项一'

},

{

value: '2',

name: '事项二',

checked: ''

},

{

value: '3',

name: '事项三'

},

{

value: '4',

name: '事项四'

},

{

value: '5',

name: '事项五'

},

{

value: '6',

name: '事项六'

},

{

value: '7',

name: '事项七'

},

{

value: '8',

name: '事项八'

},

],

current: 0,

};

},

onLoad(e) {

let tmpObj = {};

if (typeof(e.obj) === 'string') {

tmpObj = JSON.parse(e.obj);

// 查找元素位置

this.current = this.items.findIndex((el) => {

return el.name === tmpObj.name

});

}

console.log("序列 = " + this.current);

console.log("正向传值 = " + JSON.stringify(tmpObj));

},

methods: {

radioChange: function(evt) {

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

if (this.items[i].value === evt.target.value) {

this.current = i;

break;

}

}

},

submitBtnClick: function(e) {

console.log("选中的条目 = " + JSON.stringify(this.items[this.current]));

this.$eventHub.$emit('fire', this.items[this.current]);

uni.navigateBack({

delta:1

})

}

}

};

</script>

```

#### CSS

```CSS

<style>

/*每个页面公共css */

.botBtn {

width: 90%;

margin-left: 5%;

margin-top: 80rpx;

height: 92rpx;

/* background-color: #F36526 !important; */

}

</style>