161 lines
5.8 KiB
Vue
161 lines
5.8 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-popmenu组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">上拉弹出菜单</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
类似showActionSheet功能<br />
|
||
支持标题、留白。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">items</view>
|
||
<view class="tip">
|
||
菜单选项[{},{},...]。<br/>
|
||
name: 菜单名<br/>
|
||
icon: 菜单图标svg<br/>
|
||
func: 菜单行为<br/>
|
||
url: func=go跳转的链接<br/>
|
||
data: 关联数据，如果为go添加到ciy_page*<br/>
|
||
特别的:<br/>
|
||
br: 换下一行<br/>
|
||
line: 行间横线<br/>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">rowcount</view>
|
||
<view class="tip">
|
||
菜单列数。<br />
|
||
默认 1
|
||
</view>
|
||
<ciy-input bb v-model="props.rowcount" style="width:4em;"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">one</view>
|
||
<view class="tip">
|
||
只有一个菜单处理方式，true不弹出直达。<br />
|
||
默认 false 不处理
|
||
</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-switch v-model="props.one"></ciy-switch>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">title</view>
|
||
<view class="tip">
|
||
菜单标题。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.title"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">async this.popmenu(opn)</view>
|
||
<view class="tip">
|
||
参数: { items, rowcount, title }<br/>
|
||
items: 菜单项，[{},{}...]。<br/>
|
||
*name: 菜单名称。<br/>
|
||
icon: 菜单图标。<br/>
|
||
br: 换行。<br/>
|
||
line: 换行且加分割线。<br/>
|
||
func: 执行指令。<br/>
|
||
url: 跳转地址。<br/>
|
||
data: 原始数据。<br/>
|
||
返回: item<br/>
|
||
自动处理:<br/>
|
||
func=go 且 url=链接<br/>
|
||
func=edit 且 url=链接 且 data=行数据<br/>
|
||
func=调用this.func，传参item<br/>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="fun">async Open(opn)</view>
|
||
<view class="tip">
|
||
参数: { items, rowcount, title }<br/>
|
||
返回: item<br/>
|
||
</view>
|
||
<button class="btn sm" @tap="pop">弹出菜单</button>
|
||
<view class="ciy-card" v-if="formdata">
|
||
<view class="content">
|
||
<view v-html="tobr(formdata)" class="formdata"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
<ciy-tabbar ref="tabbar"></ciy-tabbar>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
props: {
|
||
title: '',
|
||
rowcount: 1,
|
||
one: false
|
||
},
|
||
item: null
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
async pop(e) {
|
||
var ref = await this.getrefs('popmenu');
|
||
if(!ref)
|
||
return this.alert('no find popmenu');
|
||
var items = [];
|
||
items.push({
|
||
name: '菜单1',
|
||
icon: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M725.3504 908.3904H284.928c-90.2656 0-163.3792-73.1648-163.3792-163.3792V318.464c0-90.2656 73.1648-163.3792 163.3792-163.3792h440.4224c90.2656 0 163.3792 73.1648 163.3792 163.3792v426.496c0 90.2656-73.1136 163.4304-163.3792 163.4304z" fill="#FF5D50"></path><path d="M625.2032 261.0176h-228.352c-30.9248 0-55.9616-25.0368-55.9616-55.9616v-74.24c0-30.9248 25.0368-55.9616 55.9616-55.9616h228.3008c30.9248 0 55.9616 25.0368 55.9616 55.9616v74.24c0.0512 30.8736-24.9856 55.9616-55.9104 55.9616z" fill="#FFDF99"></path><path d="M728.6272 745.6256m-205.4656 0a205.4656 205.4656 0 1 0 410.9312 0 205.4656 205.4656 0 1 0-410.9312 0Z" fill="#FFDF99"></path><path d="M824.4224 827.5968h-110.5408a46.08 46.08 0 0 1-46.08-46.08v-95.744a46.08 46.08 0 0 1 92.16 0v49.664h64.4608a46.08 46.08 0 0 1 0 92.16z" fill="#FF5D50"></path><path d="M564.5312 508.16H291.6864c-31.1296 0-56.32-25.1904-56.32-56.32s25.1904-56.32 56.32-56.32h272.8448c31.1296 0 56.32 25.1904 56.32 56.32s-25.2416 56.32-56.32 56.32zM451.1232 705.2288H291.6864c-31.1296 0-56.32-25.1904-56.32-56.32s25.1904-56.32 56.32-56.32h159.4368c31.1296 0 56.32 25.1904 56.32 56.32 0 31.0784-25.2416 56.32-56.32 56.32z" fill="#FFDF99"></path></svg>',
|
||
url: 'url1'
|
||
});
|
||
items.push({
|
||
name: '菜单2',
|
||
icon: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M508.6208 509.0816m-418.8672 0a418.8672 418.8672 0 1 0 837.7344 0 418.8672 418.8672 0 1 0-837.7344 0Z" fill="#FF5D50"></path><path d="M694.5792 286.5152L413.952 369.5104a60.35456 60.35456 0 0 0-40.6528 40.3968l-86.3744 285.3376c-6.8096 22.5792 15.2576 43.1616 37.2736 34.7136l270.8992-103.5264c16.2304-6.1952 29.0304-19.0976 35.072-35.4304l99.072-267.4688c8.0896-21.8624-12.288-43.6224-34.6624-37.0176z m-180.0704 271.104a53.6064 53.6064 0 0 1-61.8496-61.8496c3.6352-22.1696 21.504-40.0896 43.7248-43.7248a53.6064 53.6064 0 0 1 61.8496 61.8496c-3.6352 22.1696-21.5552 40.0896-43.7248 43.7248z" fill="#FFDF99"></path></svg>',
|
||
url: 'url2'
|
||
});
|
||
items.push({
|
||
name: '菜单3',
|
||
url: 'url3'
|
||
});
|
||
items.push({
|
||
name: '菜单4',
|
||
url: 'url4'
|
||
});
|
||
items.push({
|
||
br: true
|
||
});
|
||
items.push({
|
||
line: true
|
||
});
|
||
items.push({
|
||
name: '新行效果',
|
||
url: 'url5'
|
||
});
|
||
var item = await ref.Open({
|
||
items,
|
||
rowcount: this.props.rowcount,
|
||
title: this.props.title,
|
||
one: this.props.one
|
||
});
|
||
this.formdata = JSON.stringify(item, null, ' ') + '';
|
||
console.log('menu', item);
|
||
}
|
||
}
|
||
}
|
||
</script> |