thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
pages/component/operate/dropdownList/dropdownList.vue Normal file
View File

@ -0,0 +1,176 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 0 7 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">DropdownList</view>
<view class="fui-page__desc">DropdownList 下拉菜单，用于弹出一个菜单给用户选择操作，此组件为兼容Nvue端而写，居中弹出。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基础使用</view>
<fui-list-cell :highlight="false">
<view class="fui-list__cell fui-flex__center">
<text>资产类别：</text>
<view class="fui-select fui-flex__between" @tap="assetsTap">
<input placeholder="请选择" :value="assets" class="fui-input" disabled />
<view class="fui-filter__icon" :class="{'fui-icon__ani':assetsShow}">
<fui-icon name="turningdown" :size="32"></fui-icon>
</view>
</view>
</view>
</fui-list-cell>
<view class="fui-section__title">固定高度、宽度 / 可滚动</view>
<fui-list-cell :highlight="false">
<view class="fui-list__cell fui-flex__center">
<text>问题分类：</text>
<view class="fui-select fui-flex__between" @tap="quesTap">
<input placeholder="请选择" :value="question" class="fui-input" disabled />
<view class="fui-filter__icon" :class="{'fui-icon__ani':quesShow}">
<fui-icon name="turningdown" :size="32"></fui-icon>
</view>
</view>
</view>
</fui-list-cell>
<view class="fui-section__title">不显示选择框</view>
<fui-list-cell :highlight="false">
<view class="fui-list__cell fui-flex__center">
<text>问题分类：</text>
<view class="fui-select fui-flex__between" @tap="tagTap">
<input placeholder="请选择" :value="tag" class="fui-input" disabled />
<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
<fui-icon name="turningdown" :size="32"></fui-icon>
</view>
</view>
</view>
</fui-list-cell>
</view>
<fui-dropdown-list :options="options" ref="ddlAssets" @click="assetsItemClick" @close="assetsClose">
</fui-dropdown-list>
<fui-dropdown-list :height="600" :width="480" checkboxColor="#FFB703" :options="options2" ref="ddlQues"
@click="quesItemClick" @close="quesClose"></fui-dropdown-list>
<fui-dropdown-list :isCheckbox="false" selectedColor="#FFB703" splitLine :height="600" :width="400"
:options="options3" ref="ddlTag" @click="tagItemClick" @close="tagClose"></fui-dropdown-list>
</view>
</template>
<script>
export default {
data() {
return {
options: [{
text: '机架式服务器',
value: 1
}, {
text: '笔记本',
value: 2
}, {
text: '平板电脑',
value: 3
}, {
text: '台式机+显示器',
value: 3
}],
assets: '',
assetsShow: false,
options2: ['注册激活', '站长工具', '投递文章', '媒体合作', '素材相关', '报告错误', '论坛事务', '发布软件', '网站排行榜', '其他事务'],
question: '',
quesShow: false,
options3: ['最新车讯', '降价排行', 'SUV', '违章罚单', '提车试驾', '测评体验', '选车指南', '美女车模', '加油优惠卡', '维修保养'],
tag: '',
tagShow: false
}
},
methods: {
assetsTap() {
this.$refs.ddlAssets.show()
this.assetsShow = true;
},
assetsItemClick(e) {
console.log(e)
this.assets = e.text
this.assetsClose()
},
assetsClose() {
this.assetsShow = false;
},
quesTap() {
this.$refs.ddlQues.show()
this.quesShow = true;
},
quesItemClick(e) {
console.log(e)
this.question = e.text
this.quesClose()
},
quesClose() {
this.quesShow = false;
},
tagTap() {
this.$refs.ddlTag.show()
this.tagShow = true;
},
tagItemClick(e) {
console.log(e)
this.tag = e.text
this.tagClose()
},
tagClose() {
this.tagShow = false;
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-filter__icon {
flex-shrink: 0;
transition: all .15s linear;
}
.fui-icon__ani {
transform: rotate(180deg);
}
.fui-list__cell {
width: 100%;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-select {
flex: 1;
height: 80rpx;
padding: 32rpx;
box-sizing: border-box;
position: relative;
}
.fui-input {
font-size: 32rpx;
flex: 1;
padding-right: 8rpx;
}
.fui-select::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid #eee;
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none;
}
</style>