[抖火客户端]
This commit is contained in:
0
uni_modules/oct-mechanism-picker/changelog.md
Normal file
0
uni_modules/oct-mechanism-picker/changelog.md
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup ref="octMechanismPicker">
|
||||
<view class="mechanism--content">
|
||||
<view class="mechanism--title" v-if="title != null">{{title}}</view>
|
||||
<view class="mechanism--input">
|
||||
<input type="text" placeholder="输入关键字筛选" v-model="searchValue" @input="onSearch($event)">
|
||||
<view class="mechanism--clear" @click="onClear" v-if="searchValue.length > 0">
|
||||
<uni-icons type="clear" size="20" color="#c3c3c3"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="mechanism--scroll" scroll-y show-scrollbar>
|
||||
<block v-if="searchValue.length > 0">
|
||||
<view class="mechanism--item" v-for="(item, index) in searchArr" :key="index" v-if="searchArr.length > 0" @click="onChoose(item, index)">
|
||||
<view class="mechanism--text">{{item.title}}</view>
|
||||
<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
|
||||
</view>
|
||||
<view class="mechanism--null" v-if="searchArr.length <= 0">
|
||||
<view>暂无与<text>[{{searchValue}}]</text>相关的搜索结果</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="mechanism--item" v-for="(item, index) in columns" :key="index" @click="onChoose(item, index)">
|
||||
<view class="mechanism--text">{{item.title}}</view>
|
||||
<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<button class="mechanism--button" @click="clear">取消</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
searchValue: '',
|
||||
searchArr : []
|
||||
}
|
||||
},
|
||||
props : {
|
||||
// 弹出层标题
|
||||
title : {
|
||||
type : String,
|
||||
default : null
|
||||
},
|
||||
// 默认值
|
||||
value : {
|
||||
type : Number,
|
||||
default : 0
|
||||
},
|
||||
// 选项
|
||||
columns : {
|
||||
type : Array,
|
||||
default : () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
// 弹出层
|
||||
open(type){
|
||||
this.$refs.octMechanismPicker.open(type || 'bottom')
|
||||
},
|
||||
// 关闭弹出层
|
||||
clear(){
|
||||
this.$refs.octMechanismPicker.close()
|
||||
this.onClear()
|
||||
},
|
||||
// 选择选项
|
||||
onChoose(val, index){
|
||||
this.$emit('choose', {val, index})
|
||||
this.clear()
|
||||
},
|
||||
// 筛选输入框
|
||||
onSearch(e){
|
||||
let { value } = e.target
|
||||
let columns = this.columns
|
||||
let searchArr = []
|
||||
for(let obj of columns){
|
||||
if(obj.title.includes(value)){
|
||||
searchArr.push(obj)
|
||||
}
|
||||
}
|
||||
this.searchArr = searchArr
|
||||
},
|
||||
// 清理搜索内容
|
||||
onClear(){
|
||||
this.searchValue = ''
|
||||
this.searchArr = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mechanism--content{
|
||||
background: white;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
overflow: hidden;
|
||||
.mechanism--title{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 30rpx 50rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background-image: linear-gradient(0deg, $border-color 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
.mechanism--input{
|
||||
padding: 30rpx 50rpx;
|
||||
position: relative;
|
||||
& > input{
|
||||
background: #f8f8f8;
|
||||
padding: 0 30rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.mechanism--clear{
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 50rpx;
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.mechanism--scroll{
|
||||
padding: 0 50rpx;
|
||||
box-sizing: border-box;
|
||||
height: 50vh;
|
||||
.mechanism--item{
|
||||
line-height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.mechanism--text{
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.mechanism--null{
|
||||
height: 40vh;
|
||||
line-height: 40vh;
|
||||
font-size: 30rpx;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
text{
|
||||
color: #446EFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mechanism--button{
|
||||
margin: 30rpx 50rpx;
|
||||
background: #446EFE;
|
||||
color: white;
|
||||
font-size: 34rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
border-radius: 10rpx;
|
||||
&::after{ display: none; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
uni_modules/oct-mechanism-picker/package.json
Normal file
81
uni_modules/oct-mechanism-picker/package.json
Normal file
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"id": "oct-mechanism-picker",
|
||||
"displayName": "oct-mechanism-picker",
|
||||
"version": "1.0.0",
|
||||
"description": "oct-mechanism-picker",
|
||||
"keywords": [
|
||||
"oct-mechanism-picker"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "",
|
||||
"data": "",
|
||||
"permissions": ""
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "u",
|
||||
"aliyun": "u"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "u",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "u",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
uni_modules/oct-mechanism-picker/readme.md
Normal file
1
uni_modules/oct-mechanism-picker/readme.md
Normal file
@@ -0,0 +1 @@
|
||||
# oct-mechanism-picker
|
||||
Reference in New Issue
Block a user