价格显示问题
This commit is contained in:
liuyuan
2
uni_modules/multiple-choice/changelog.md
Normal file
2
uni_modules/multiple-choice/changelog.md
Normal file
@@ -0,0 +1,2 @@
|
||||
## 1.0.0（2021-05-12）
|
||||
1. 支持uni_modules
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="popupClick" @click="onPopupShow()"><slot></slot></view>
|
||||
<z-popup v-model="currentValue">
|
||||
<view class="multiple_choice_title">
|
||||
<text @click="currentValue = false">取消</text>
|
||||
<view>{{title}}</view>
|
||||
<text @click="onConfirm">确定</text>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="multiple_choice_scroll">
|
||||
<view class="multiple_choice_box">
|
||||
<view class="multiple_choice_content">
|
||||
<view class="multiple_choice_item" v-for="(item,index) of rangeList" :key="index" @click="onSelect(index)">
|
||||
<view class="select" :class="{active: item.select }"></view>
|
||||
<view class="value">{{item[rangeKey]}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</z-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
range: {
|
||||
type: Array,
|
||||
default: function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
rangeKey: {
|
||||
type: String,
|
||||
default: "name"
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (typeof this.value !== 'undefined') {
|
||||
this.currentValue = this.value;
|
||||
}
|
||||
this.rangeList = this.range.map(item => {
|
||||
item.select = false;
|
||||
return item;
|
||||
});
|
||||
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
currentValue(val) {
|
||||
this.$emit(val ? 'on-show' : 'on-hide');
|
||||
this.$emit('input', val);
|
||||
},
|
||||
range(val){
|
||||
this.rangeList = val.map(item => {
|
||||
item.select = false;
|
||||
return item;
|
||||
});
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentValue: false,
|
||||
rangeList: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onPopupShow(){
|
||||
this.currentValue = true;
|
||||
},
|
||||
onSelect(index){
|
||||
let item = this.rangeList[index];
|
||||
item.select = !item.select;
|
||||
this.$set(this.rangeList, index, item);
|
||||
},
|
||||
onConfirm(){
|
||||
let resultList = this.rangeList.filter(item => {
|
||||
if(item.select){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if(resultList.length > 0){
|
||||
this.currentValue = false;
|
||||
this.$emit("change", resultList);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "请选择",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
.multiple_choice_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 88upx;
|
||||
line-height: 88upx;
|
||||
border-bottom: 2upx solid #ebebeb;
|
||||
padding: 0 20upx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.multiple_choice_title view {
|
||||
font-size: 32upx;
|
||||
}
|
||||
.multiple_choice_title text {
|
||||
width: 80upx;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.multiple_choice_title text {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
.multiple_choice_title text:last-child {
|
||||
color: $themeColor;
|
||||
}
|
||||
.multiple_choice_scroll {
|
||||
background-color: #FFF;
|
||||
max-height: 60vh;
|
||||
min-height: 30vh;
|
||||
}
|
||||
.multiple_choice_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 30vh;
|
||||
}
|
||||
.multiple_choice_content {
|
||||
.multiple_choice_item {
|
||||
height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// &:nth-child(2n) {
|
||||
// background-color: #f7f7f7;
|
||||
// }
|
||||
.select {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 15rpx;
|
||||
// background-image: url(../../static/icon/ic_notselected.png);
|
||||
// background-size: 100% 100%;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ccc;
|
||||
&.active {
|
||||
border: 2rpx solid $themeColor;
|
||||
background-color: $themeColor;
|
||||
text-align: center;
|
||||
line-height: 38rpx;
|
||||
transform:rotate(15deg);
|
||||
}
|
||||
&.active::before {
|
||||
content: "√";
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
width: calc(100% - 55rpx);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
uni_modules/multiple-choice/package.json
Normal file
77
uni_modules/multiple-choice/package.json
Normal file
@@ -0,0 +1,77 @@
|
||||
{
|
||||
"id": "multiple-choice",
|
||||
"displayName": "多选组件",
|
||||
"version": "1.0.0",
|
||||
"description": "多选组件",
|
||||
"keywords": [
|
||||
"多选",
|
||||
"多选组件"
|
||||
],
|
||||
"repository": "https://github.com/zhouwei1994/uni-app-demo",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.0.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "465081029"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
uni_modules/multiple-choice/readme.md
Normal file
29
uni_modules/multiple-choice/readme.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 多选组件
|
||||
|
||||
多选组件
|
||||
|
||||
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
|
||||
| ----------------------------|--------------------------- |
|
||||
|||
|
||||
| QQ群号：607391225 |微信号：zhou0612wei|
|
||||
|
||||
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
|
||||
|
||||
### 案例一
|
||||
```
|
||||
<multiple-choice v-model="true" title="选择性别" :range="[{name: '男'}, {name: '女'}]" rangeKey="name"></multiple-choice>
|
||||
```
|
||||
### 案例二
|
||||
```
|
||||
<multiple-choice title="选择性别" :range="[{name: '男'}, {name: '女'}]" rangeKey="name">
|
||||
<button>打开</button>
|
||||
</multiple-choice>
|
||||
```
|
||||
|
||||
### 属性
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
|
||||
| value | Boolean | false | 控制弹窗是否打开 |
|
||||
| title | String | | 弹窗标题|
|
||||
| range | Array | [] | 可选内容 |
|
||||
| rangeKey | String | name | 显示内容的key|
|
||||
Reference in New Issue
Block a user