c5_labsci/fapp/ciyon_ap/pages/demo/comview/popmenu.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>