feat: 首次提交
This commit is contained in:
peerless_hero
86
pages/component/operate/actionsheet/actionsheet.vue
Normal file
86
pages/component/operate/actionsheet/actionsheet.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">ActionSheet</view>
|
||||
<view class="fui-page__desc">ActionSheet 上拉菜单，从底部弹出的模态框，提供和当前场景相关的操作菜单。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<fui-button type="gray" btn-size="medium" text="带提示" bold :margin="['24rpx']"
|
||||
@click="showActionSheet(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="无提示操作" bold @click="showActionSheet(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="暗黑模式" :margin="['24rpx']" bold
|
||||
@click="showActionSheet(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="无取消按钮" bold @click="showActionSheet(4)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-actionsheet :show="show" :tips="tips" :itemList="itemList" :isCancel="isCancel" :theme="theme"
|
||||
@click="itemClick" @cancel="cancel"></fui-actionsheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
tips: '',
|
||||
itemList: [],
|
||||
isCancel: true,
|
||||
theme: 'light'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showActionSheet(type) {
|
||||
this.tips = '';
|
||||
this.isCancel = true;
|
||||
this.theme = 'light';
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.tips = '退出后不会删除任何历史数据，下次登录依然可以使用本账号。';
|
||||
this.itemList = [{
|
||||
text: '退出登录',
|
||||
color: '#FF2B2B'
|
||||
}]
|
||||
break;
|
||||
case 2:
|
||||
this.itemList = ['点赞', '评论', '收藏']
|
||||
break;
|
||||
case 3:
|
||||
this.itemList = ['点赞', '评论', '收藏']
|
||||
this.theme = 'dark'
|
||||
break;
|
||||
case 4:
|
||||
this.tips = '请选择性别';
|
||||
this.itemList = ['男', '女', '未知']
|
||||
this.isCancel = false;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
}, 50)
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(e.text)
|
||||
this.cancel()
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
43
pages/component/operate/backdrop/backdrop.vue
Normal file
43
pages/component/operate/backdrop/backdrop.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 0 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Backdrop</view>
|
||||
<view class="fui-page__desc">Backdrop 遮罩层，在组件中设置显示蒙层。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="打开遮罩层" bold :margin="['24rpx']" @click="open">
|
||||
</fui-button>
|
||||
</view>
|
||||
<!--closable为true时click事件才生效-->
|
||||
<fui-backdrop :show="show" closable @click="close"></fui-backdrop>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.show = true
|
||||
},
|
||||
//关闭遮罩通过show进行控制
|
||||
close() {
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
64
pages/component/operate/dialog/dialog.vue
Normal file
64
pages/component/operate/dialog/dialog.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 14 072 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Dialog</view>
|
||||
<view class="fui-page__desc">Dialog 对话框，在浮层中显示，引导用户进行相关操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
|
||||
@click="showDialog(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="自定义按钮" bold @click="showDialog(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-dialog :show="show" content="弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内" maskClosable @click="onClick"
|
||||
@close="onClose"></fui-dialog>
|
||||
|
||||
<fui-dialog :show="visible" title="我是标题" content="我是自定义的对话框！" :buttons="buttons" @click="onTap"></fui-dialog>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
visible: false,
|
||||
buttons: [{
|
||||
text: '确定',
|
||||
color: '#FF2B2B'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDialog(type) {
|
||||
if (type === 1) {
|
||||
this.show = true
|
||||
} else {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
this.onClose()
|
||||
},
|
||||
//设置maskClosable为true时（点击遮罩可关闭），需要配合@close事件一起使用，通过控制show来达到关闭效果
|
||||
onClose(e) {
|
||||
this.show = false
|
||||
},
|
||||
onTap(e) {
|
||||
console.log(e)
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
176
pages/component/operate/dropdownList/dropdownList.vue
Normal file
176
pages/component/operate/dropdownList/dropdownList.vue
Normal 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>
|
||||
234
pages/component/operate/dropdownMenu/dropdownMenu.vue
Normal file
234
pages/component/operate/dropdownMenu/dropdownMenu.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 407 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">DropdownMenu</view>
|
||||
<view class="fui-page__desc">DropdownMenu 下拉菜单，用于弹出一个下拉菜单给用户选择操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">选择框位置、样式改变</view>
|
||||
<view class="fui-filter__bar">
|
||||
<view class="fui-flex__1">
|
||||
<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options" @click="rangeItemClick"
|
||||
@close="rangeClose" ref="ddmRange">
|
||||
<view class="fui-filter__item" @tap="filterTap(1)">
|
||||
<text>{{range}}</text>
|
||||
<view class="fui-filter__icon" :class="{'fui-icon__ani':rangeShow}">
|
||||
<fui-icon name="turningdown" :size="32"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-dropdown-menu>
|
||||
</view>
|
||||
<view class="fui-flex__1">
|
||||
<fui-dropdown-menu :minWidth="300" right="0" :size="28" selectedColor="#465CFF" isCheckMark
|
||||
checkmarkColor="#465CFF" isReverse :options="options1" @click="sortItemClick" @close="sortClose"
|
||||
ref="ddmSort">
|
||||
<view class="fui-filter__item" @tap="filterTap(2)">
|
||||
<text>{{sort}}</text>
|
||||
<view class="fui-filter__icon" :class="{'fui-icon__ani':sortShow}">
|
||||
<fui-icon name="turningdown" :size="32"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-dropdown-menu>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-section__title">可滚动、改变选择框颜色</view>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__cell fui-flex__center">
|
||||
<text>问题分类：</text>
|
||||
<view class="fui-flex__1">
|
||||
<fui-dropdown-menu checkboxColor="#FFB703" :minWidth="400" splitLine :options="options2"
|
||||
ref="ddmQues" @click="quesItemClick" @close="quesClose">
|
||||
<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>
|
||||
</fui-dropdown-menu>
|
||||
</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-flex__1">
|
||||
<fui-dropdown-menu :isCheckbox="false" selectedColor="#FF2B2B" splitLine :options="options3"
|
||||
ref="ddmTag" direction="up" @click="tagItemClick" @close="tagClose">
|
||||
<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>
|
||||
</fui-dropdown-menu>
|
||||
</view>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
text: '综合推荐',
|
||||
value: 1,
|
||||
checked: true
|
||||
}, {
|
||||
text: '新品优先',
|
||||
value: 2
|
||||
}, {
|
||||
text: '评论数从高到低',
|
||||
value: 3
|
||||
}],
|
||||
options1: [{
|
||||
text: '默认排序',
|
||||
value: 11,
|
||||
checked: true
|
||||
}, {
|
||||
text: '销量排序',
|
||||
value: 12
|
||||
}, {
|
||||
text: '价格排序',
|
||||
value: 13
|
||||
}],
|
||||
range: '综合推荐',
|
||||
rangeShow: false,
|
||||
sort: '默认排序',
|
||||
sortShow: false,
|
||||
//数据格式二
|
||||
options2: ['注册激活', '站长工具', '投递文章', '媒体合作', '素材相关', '报告错误', '论坛事务', '发布软件', '网站排行榜', '其他事务'],
|
||||
question: '',
|
||||
quesShow: false,
|
||||
options3: ['最新车讯', '降价排行', 'SUV', '违章罚单', '提车试驾', '测评体验', '选车指南', '美女车模', '加油优惠卡', '维修保养'],
|
||||
tag: '',
|
||||
tagShow: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterTap(type) {
|
||||
if (type === 1) {
|
||||
this.$refs.ddmRange.show()
|
||||
this.rangeShow = true;
|
||||
} else {
|
||||
this.$refs.ddmSort.show()
|
||||
this.sortShow = true;
|
||||
}
|
||||
},
|
||||
rangeItemClick(e) {
|
||||
console.log(e)
|
||||
this.range = e.text
|
||||
this.rangeClose()
|
||||
},
|
||||
rangeClose() {
|
||||
this.rangeShow = false;
|
||||
},
|
||||
sortItemClick(e) {
|
||||
console.log(e)
|
||||
this.sort = e.text
|
||||
this.sortClose()
|
||||
},
|
||||
sortClose() {
|
||||
this.sortShow = false;
|
||||
},
|
||||
quesTap() {
|
||||
this.$refs.ddmQues.show()
|
||||
this.quesShow = true;
|
||||
},
|
||||
quesItemClick(e) {
|
||||
console.log(e)
|
||||
this.question = e.text
|
||||
this.quesClose()
|
||||
},
|
||||
quesClose() {
|
||||
this.quesShow = false;
|
||||
},
|
||||
tagTap() {
|
||||
this.$refs.ddmTag.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__bar {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.fui-filter__item {
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-filter__icon {
|
||||
transition: all .15s linear;
|
||||
}
|
||||
|
||||
.fui-icon__ani {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.fui-list__cell {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fui-select {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.fui-input {
|
||||
font-size: 32rpx;
|
||||
flex: 1;
|
||||
padding-right: 8rpx;
|
||||
color: #181818;
|
||||
}
|
||||
</style>
|
||||
62
pages/component/operate/gallery/gallery.vue
Normal file
62
pages/component/operate/gallery/gallery.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Gallery <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Gallery 画廊，用于预览图片或其他操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="自定义Gallery" bold :margin="['24rpx']"
|
||||
@click="showGallery"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="原生预览" bold @click="previewImage"></fui-button>
|
||||
</view>
|
||||
<fui-gallery :urls="urls" :show="show" @hide="hideGallery"></fui-gallery>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urls: [{
|
||||
src: '/static/images/common/logo.png',
|
||||
descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
|
||||
}, {
|
||||
src: '/static/images/component/img_goods_3x.jpg'
|
||||
}, {
|
||||
src: '/static/images/component/img_bg_poster.png'
|
||||
}],
|
||||
show: false,
|
||||
resUrl: this.fui.resUrl()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
showGallery() {
|
||||
this.show = true
|
||||
},
|
||||
hideGallery() {
|
||||
this.show = false
|
||||
},
|
||||
previewImage() {
|
||||
uni.previewImage({
|
||||
urls: [`${this.resUrl}/common/logo.png`, `${this.resUrl}/component/img_goods_3x.jpg`]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
114
pages/component/operate/landscape/landscape.vue
Normal file
114
pages/component/operate/landscape/landscape.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Landscape <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Landscape 压屏窗，用于在浮层中显示广告或说明。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="关闭按钮-左上" bold :margin="['24rpx']"
|
||||
@click="showPopup(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="关闭按钮-右上" bold @click="showPopup(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="关闭按钮-中下" bold :margin="['24rpx']"
|
||||
@click="showPopup(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="无关闭按钮" bold @click="showPopup(4)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-landscape :show="show" :closable="closable" :position="position" @close="closePopup">
|
||||
<view class="fui-ani__box">
|
||||
<image class="fui-hd__img" src="/static/images/member/light/img_layer_3x.png" mode="widthFix"></image>
|
||||
<view class="fui-flex__center fui-flex__column">
|
||||
<view class="fui-ani__title">开通会员</view>
|
||||
<view class="fui-desc">会员开通请前往 First UI官网(<text>firstui.cn</text>)，在官网购买开通会员后，前往个人中心订单页即可下载会员源码。
|
||||
</view>
|
||||
<fui-button btn-size="medium" radius="100rpx"
|
||||
background="linear-gradient(180deg, #E3BF82 0%, #997B4A 100%)" borderColor="rgba(0,0,0,0)"
|
||||
border-width="0" @click="btnClick">我知道了</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</fui-landscape>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
position: 3,
|
||||
closable: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
showPopup(type) {
|
||||
this.closable = type !== 4;
|
||||
this.position = type;
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
}, 50);
|
||||
},
|
||||
closePopup() {
|
||||
this.show = false
|
||||
},
|
||||
btnClick(e) {
|
||||
this.fui.toast('您点击了按钮~')
|
||||
//...
|
||||
this.closePopup()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-ani__box {
|
||||
width: 640rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-hd__img {
|
||||
width: 100%;
|
||||
height: 192rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fui-ani__title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
padding: 54rpx 0 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fui-desc {
|
||||
padding: 0 54rpx 82rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-desc text {
|
||||
color: #FF2B2B;
|
||||
}
|
||||
</style>
|
||||
118
pages/component/operate/loadAni/loadAni.vue
Normal file
118
pages/component/operate/loadAni/loadAni.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">LoadAni <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">LoadAni 加载动画，该组件是对Loading组件的扩展。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用、改变颜色</view>
|
||||
<fui-grid>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani color="#FFB703"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani color="-webkit-linear-gradient(top,#FF416C,#6831FF)"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="2"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="2" color="#6831FF"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="2" color="-webkit-linear-gradient(top,#FF416C,#FFB703)"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="3"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="3" color="#09BE4F"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="3" color="#B2B2B2"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="4"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="4" color="#FFB703"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="4" color="#B2B2B2"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="5"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="5" color="#7F7F7F"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-load-ani type="5" color="-webkit-linear-gradient(top,#FF416C,#6831FF)"></fui-load-ani>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-load__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
42
pages/component/operate/loading/loading.vue
Normal file
42
pages/component/operate/loading/loading.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 07 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Loading</view>
|
||||
<view class="fui-page__desc">Loading 加载。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用（type=row）</view>
|
||||
<fui-loading type="row" :isFixed="false"></fui-loading>
|
||||
<view class="fui-section__title">基础使用（type=col）</view>
|
||||
<fui-loading :isFixed="false"></fui-loading>
|
||||
<!-- 居中且显示遮罩，仅 isFixed为true时生效-->
|
||||
<!-- <fui-loading isMask mask-bg-color="rgba(0,0,0,.3)"></fui-loading> -->
|
||||
<view class="fui-section__title">更换图标（type=row）</view>
|
||||
<fui-loading type="row" :isFixed="false" srcRow="/static/images/component/loading_gray.png" text="正在加载...">
|
||||
</fui-loading>
|
||||
<view class="fui-section__title">更换图标（type=col）</view>
|
||||
<fui-loading :isFixed="false" srcCol="/static/images/component/loading_white.png" text="正在加载...">
|
||||
</fui-loading>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
79
pages/component/operate/lottie/lottie.vue
Normal file
79
pages/component/operate/lottie/lottie.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 407 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Lottie <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Lottie 动画，通过读取json文件信息实现动画效果。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">本地json文件</view>
|
||||
<view class="fui-flex__center">
|
||||
<!-- 百度小程序平台path属性目前不支持远程地址，仅支持本地绝对路径 -->
|
||||
<!-- #ifdef MP-BAIDU -->
|
||||
<animation-view class="fui-animation" path="/static/json/nodata.json" loop
|
||||
:action="action"></animation-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<fui-lottie :options="options"></fui-lottie>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view class="fui-section__title">网络地址</view>
|
||||
<view class="fui-flex__center">
|
||||
<fui-lottie :options="option" :action="action"></fui-lottie>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="fui-flex__center fui-flex__column">
|
||||
<fui-button type="gray" btn-size="medium" text="暂停播放" bold :margin="['24rpx']"
|
||||
@click="ani('pause')"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="开始播放" bold @click="ani('play')">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="停止播放" bold :margin="['24rpx']" @click="ani('stop')">
|
||||
</fui-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emptyJson from '@/static/json/nodata.json'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
animationData: emptyJson
|
||||
},
|
||||
option: {
|
||||
path: 'https://res.firstui.cn/static/json/empty.json'
|
||||
},
|
||||
action: 'play'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//销毁隐藏可使用v-if自行控制
|
||||
ani(action) {
|
||||
if (this.action === action) return;
|
||||
this.action = action
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-animation {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
82
pages/component/operate/message/message.vue
Normal file
82
pages/component/operate/message/message.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 0 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Message <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Message 消息提示，用于展现简短的提示信息，在窗口顶部显示。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
|
||||
@click="showMsg(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="自定义背景色" bold @click="showMsg(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="带图标提示" bold :margin="['24rpx']"
|
||||
@click="showMsg(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="设置显示时间" bold @click="showMsg(4)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-message ref="msg" :background="background"></fui-message>
|
||||
<fui-message ref="tips">
|
||||
<view class="fui-icon__box">
|
||||
<fui-icon name="checkbox" color="#fff" :size="48"></fui-icon>
|
||||
</view>
|
||||
</fui-message>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
background: 'rgba(0,0,0,.6)'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
showMsg(type) {
|
||||
this.background = 'rgba(0,0,0,.6)'
|
||||
let options = {}
|
||||
switch (type) {
|
||||
case 1:
|
||||
options.text = 'Hello First UI！'
|
||||
this.$refs.msg.show(options)
|
||||
break;
|
||||
case 2:
|
||||
this.background = '#09BE4F'
|
||||
options.text = '这是一条成功提示消息！'
|
||||
this.$refs.msg.show(options)
|
||||
break;
|
||||
case 3:
|
||||
options.text = '您已操作成功！'
|
||||
this.$refs.tips.show(options)
|
||||
break;
|
||||
case 4:
|
||||
options.duration = 4000
|
||||
options.text = '4s后关闭提示信息！默认2s~'
|
||||
this.$refs.msg.show(options)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-icon__box {
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
</style>
|
||||
177
pages/component/operate/modal/modal.vue
Normal file
177
pages/component/operate/modal/modal.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 140 7 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Modal <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Modal 模态框，在浮层中显示，引导用户进行相关操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
|
||||
@click="showModal(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="单个按钮" bold @click="showModal(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="多个按钮" bold :margin="['24rpx']"
|
||||
@click="showModal(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="设置按钮圆角" bold @click="showModal(4)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="点遮罩可关闭" bold :margin="['24rpx']"
|
||||
@click="showModal(5)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="自定义内容" bold @click="showModal(6)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<!--type=1-->
|
||||
<fui-modal :show="show" title="提示" descr="确定关注 FirstUI 吗？" @click="onClick"></fui-modal>
|
||||
<!--type=2~5-->
|
||||
<fui-modal :show="show2" :descr="descr" :buttons="buttons" :radius="radius" :maskClosable="maskClosable"
|
||||
:direction="direction" @click="onClick2" @cancel="onCancel2"></fui-modal>
|
||||
<!--type=6-->
|
||||
<fui-modal :buttons="[]" width="600" :show="show3">
|
||||
<fui-icon name="checkbox-fill" :size="108" color="#09BE4F"></fui-icon>
|
||||
<text class="fui-title">购买成功</text>
|
||||
<text class="fui-descr">成功购买一张月卡，可免费阅读30天</text>
|
||||
<fui-button text="我知道了" width="240rpx" height="72rpx" :size="28" radius="36rpx" background="#FFB703"
|
||||
borderWidth="0" :margin="['0','0','24rpx']" @click="onCancel3">
|
||||
</fui-button>
|
||||
<view class="fui-icon__close" @tap="onCancel3">
|
||||
<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
|
||||
</view>
|
||||
</fui-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
buttons: [],
|
||||
radius: 16,
|
||||
maskClosable: false,
|
||||
descr: '',
|
||||
direction: 'row',
|
||||
show2: false,
|
||||
show3: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
showModal(type) {
|
||||
this.radius = 16
|
||||
this.maskClosable = false;
|
||||
this.buttons = []
|
||||
this.direction = 'row'
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.show = true;
|
||||
break;
|
||||
case 2:
|
||||
this.descr = '您还未登录，请先登录'
|
||||
this.buttons = ['确定']
|
||||
this.show2 = true;
|
||||
break;
|
||||
case 3:
|
||||
this.descr = '请选择您的身份'
|
||||
this.direction = 'column'
|
||||
this.buttons = [{
|
||||
text: '开发者'
|
||||
}, {
|
||||
text: '运营人员',
|
||||
background: '#FFB703'
|
||||
}, {
|
||||
text: '管理员',
|
||||
background: '#FF2B2B'
|
||||
}]
|
||||
this.show2 = true;
|
||||
break;
|
||||
case 4:
|
||||
this.radius = 80;
|
||||
this.descr = '是否将此次编辑保留？'
|
||||
this.buttons = [{
|
||||
text: '不保留',
|
||||
plain: true,
|
||||
color: '#FFB703',
|
||||
background: '#FFB703'
|
||||
}, {
|
||||
text: '保留',
|
||||
background: '#FFB703'
|
||||
}]
|
||||
this.show2 = true;
|
||||
break;
|
||||
case 5:
|
||||
this.maskClosable = true
|
||||
this.descr = '是否将此次编辑保留？'
|
||||
this.buttons = [{
|
||||
text: '不保留',
|
||||
plain: true,
|
||||
color: '#FF2B2B',
|
||||
background: '#FF2B2B'
|
||||
}, {
|
||||
text: '保留',
|
||||
background: '#FF2B2B'
|
||||
}]
|
||||
this.show2 = true;
|
||||
break;
|
||||
case 6:
|
||||
this.show3 = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(`您点击了${e.text}`)
|
||||
//...
|
||||
this.show = false
|
||||
},
|
||||
onClick2(e) {
|
||||
console.log(e)
|
||||
//...
|
||||
this.onCancel2()
|
||||
},
|
||||
onCancel2(e) {
|
||||
this.show2 = false
|
||||
},
|
||||
onCancel3(e) {
|
||||
this.show3 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-size: 32rpx;
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
font-size: 24rpx;
|
||||
color: #B2B2B2;
|
||||
padding-top: 12rpx;
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.fui-icon__close {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
130
pages/component/operate/spin/spin.vue
Normal file
130
pages/component/operate/spin/spin.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 4 072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Spin <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Spin 旋转动画。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-grid>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>旋转</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<view class="fui-loading"></view>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<view class="fui-loading2"></view>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<fui-icon name="loading" color="#FFB703"></fui-icon>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<fui-icon name="moments" color="#09BE4F"></fui-icon>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<fui-icon name="aftersale" color="#FF2B2B"></fui-icon>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<image src="/static/images/component/loading_gray.png" class="fui-icon__img"></image>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAM1BMVEUAAACPj4+IiIiIiIiIiIiIiIiKioqHh4eHh4eHh4eHh4eIiIiIiIiJiYmIiIiJiYmIiIi8awvKAAAAEHRSTlMAEEDw4NAwwKAgYICQULBwL0wVnQAAAmpJREFUWMPtmOmO4yAQhLlvMO//tDuyjfAaCEcj7UqTT5o/iafSVLcLY/TldyHID8fPH94oir2TLD6QyugdxVoeazAnYPUaFtsws+yNVjR+htolcWz/luHyhL7F55XNQ0Narx+L8TY8bSGTXsiYUB5V8A+zHJ4rud+p3GI+PiwqCXv0Ec+T42awf3L8+iMtzwwp36UEPHR1SIYPKueS+xxJe1CZiYkooNmTvjLHUzHDR7TVgnI2UXR9k/OhQHslieKCcb87reRnB5fCzMeTVp5cUbeY8O6arEYknYs60CJXK21zOvot7DSK4lrR51eA7dQ1y1bFF9MT2Chb358DsLHeLJeKhpZdDgkDFp1jQtRGXiEYOtZU1PLdUt7OFT84gnJUHNE5XOCO2PLnCALDzl21HD2Yam4ZRU9kER8Qs/V7IQ7BIWVqp10TTCFN0gdgwvumJmkcwWDFgigsQtv4Sv8baZ2lt5Pn+n+Wfm+CMsUsHFIJQ7VH+l2hSXsaHFUbEb1l2GRt5zFb/FC1nSfskGam+lSP4cqmks10jyOc1fditiGMXD1G4DekTH5sf14gkTeD1QOdbrRLXodGAKb1hC7gh5nmvzvgI0NoHyswA1niP7WKQE4dmtYHDH4MwzxS3T2MmCWje5OL2aK26j9EC7qkrVIk97XtrM+RYzSoHSZmUCTlLoLNvTs+aFLug+XEu2Mt59boRl9+4vk7gbD79fXnii2dsS6Xc4lb3fx5lX1bfKfPD1HJInetS64lJQnxhkrryV2+INbxeCHXN1PtaGxClUYgvGJ1XY82IA7Fn7IyFO7DIDcYfflN/AFNdjdeDj7M+wAAAABJRU5ErkJggg==" class="fui-icon__img"></image>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item :highlight="false">
|
||||
<view class="fui-load__item">
|
||||
<fui-spin>
|
||||
<image src="/static/images/common/img_logo.png" class="fui-icon__img fui-circle"></image>
|
||||
</fui-spin>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-load__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-loading {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #465CFF;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.fui-loading2{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ccc;
|
||||
border-left-color: #888;
|
||||
}
|
||||
.fui-icon__img{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: block;
|
||||
}
|
||||
.fui-circle{
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
119
pages/component/operate/swipeAction/swipeAction.vue
Normal file
119
pages/component/operate/swipeAction/swipeAction.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186140 7 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SwipeAction <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SwipeAction 滑动菜单，用于滑动操作的组件。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-swipeaction-group>
|
||||
<!--循环中区分可传参索引值：onClick($event,index) ,也可使用param属性值-->
|
||||
<fui-swipe-action @click="onClick" @change="change">
|
||||
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">默认菜单按钮</fui-list-cell>
|
||||
</fui-swipe-action>
|
||||
<fui-swipe-action :buttons="buttons" @click="onClick" @change="change">
|
||||
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">自定义菜单按钮</fui-list-cell>
|
||||
</fui-swipe-action>
|
||||
<fui-swipe-action :buttons="buttons">
|
||||
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">插槽菜单</fui-list-cell>
|
||||
<template v-slot:buttons>
|
||||
<view class="fui-menu__box">
|
||||
<view class="fui-menu__btn">
|
||||
<fui-icon name="delete" :size="44"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-swipe-action>
|
||||
</fui-swipeaction-group>
|
||||
<view class="fui-section__title">禁止滑动</view>
|
||||
<fui-swipeaction-group>
|
||||
<fui-swipe-action disabled>
|
||||
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">不可滑动</fui-list-cell>
|
||||
</fui-swipe-action>
|
||||
</fui-swipeaction-group>
|
||||
<view class="fui-section__title">默认打开</view>
|
||||
<fui-swipeaction-group>
|
||||
<fui-swipe-action :show="show">
|
||||
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">默认打开状态</fui-list-cell>
|
||||
</fui-swipe-action>
|
||||
</fui-swipeaction-group>
|
||||
<view class="fui-section__title">可独立打开，不自动关闭</view>
|
||||
<fui-swipeaction-group>
|
||||
<fui-swipe-action :autoClose="false">
|
||||
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">左滑菜单</fui-list-cell>
|
||||
</fui-swipe-action>
|
||||
<fui-swipe-action :autoClose="false" :buttons="buttons">
|
||||
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">自定义菜单按钮</fui-list-cell>
|
||||
</fui-swipe-action>
|
||||
</fui-swipeaction-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
buttons: [{
|
||||
text: '标为未读',
|
||||
background: '#465CFF'
|
||||
}, {
|
||||
text: '删除',
|
||||
background: '#FF2B2B'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
}, 500)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(e.item.text)
|
||||
},
|
||||
change(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-menu__box {
|
||||
width: 160rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-menu__btn {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
77
pages/component/operate/toast/toast.vue
Normal file
77
pages/component/operate/toast/toast.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Toast</view>
|
||||
<view class="fui-page__desc">Toast 轻提示，一种轻量级反馈/提示，适合用于页面转场、数据交互的等场景中。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<fui-button type="gray" btn-size="medium" text="带图标提示" bold :margin="['24rpx']"
|
||||
@click="showToast(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="无图标提示" bold @click="showToast(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="自定义内容" :margin="['24rpx']" bold
|
||||
@click="showToast(3)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-toast ref="toast"></fui-toast>
|
||||
|
||||
<!--自定义内容-->
|
||||
<fui-toast ref="toast2">
|
||||
<view class="fui-toast__custom">
|
||||
<fui-icon name="checkbox" color="#fff"></fui-icon>
|
||||
<text class="fui-toast__txt">操作成功</text>
|
||||
</view>
|
||||
</fui-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showToast(type) {
|
||||
let options = {}
|
||||
if (type === 3) {
|
||||
this.$refs.toast2.show(options)
|
||||
} else {
|
||||
if (type === 1) {
|
||||
options.src = "/static/images/common/img_logo.png";
|
||||
options.text = 'First UI !';
|
||||
} else if (type === 2) {
|
||||
options.text = '请输入手机号';
|
||||
}
|
||||
|
||||
this.$refs.toast.show(options)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-toast__custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-toast__txt {
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
padding-top: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user