<melo-data data-src="{"mainAtext":"{\"atext\":{\"attribs\":\"*0+a*1*0+1*0+l*1*0+1*0+1c*1*0+1*0+17*1*0+5*0+r*1*0+1*0+z*1*0+1*0+e*1*0+1*0+f*1*0+1*0+y*1*0+1*0+t*1*0+1*0+f*1*0+1*0+s*1*0+1*0+1q*1*0+1*0+n*1*0+1*0+d*1*0+5*0+r*1*0+1*0+z*1*0+1*0+e*1*0+1*0+f*1*0+1*0+y*1*0+1*0+1u*1*0+1*0+f*1*0+1*0+s*1*0+1*0+1v*1*0+1*0+1y*1*0+1*0+1w*1*0+1*0+1x*1*0+1*0+n*1*0+1*0+d*1*0+5*0+r*1*0+1*0+z*1*0+1*0+e*1*0+1*0+f*1*0+1*0+y*1*0+1*0+2w*1*0+1*0+f*1*0+1*0+s*1*0+1*0+1p*1*0+1*0+1q*1*0+1*0+1p*1*0+1*0+1s*1*0+1*0+n*1*0+1*0+d*1*0+5*0+r*1*0+1*0+z*1*0+1*0+e*1*0+1*0+f*1*0+1*0+y*1*0+1*0+13*1*0+1*0+f*1*0+1*0+s*1*0+1*0+1p*1*0+1*0+n*1*0+1*0+d*1*0+3*0+i*1*0+5*0+t*1*0+1*0+1l*1*0+1*0+e*1*0+5*0+1z*1*0+1*0+16*1*0+1*0+e*1*0+3*0+2b*1*0+1*0+16*1*0+1*0+e*1*0+5*0+19*1*0+1*0+m*1*0+1*0+u*1*0+1*0+y*1*0+1*0+16*1*0+1*0+e*1*0+5*0+s*1*0+1*0+m*1*0+1*0+x*1*0+1*0+u*1*0+1*0+y*1*0+1*0+16*1*0+1*0+e*1*0+5*0+s*1*0+1*0+m*1*0+1*0+v*1*0+1*0+17*1*0+1*0+u*1*0+1*0+y*1*0+1*0+16*1*0+1*0+e*1*0+5*0+s*1*0+1*0+m*1*0+1*0+z*1*0+1*0+u*1*0+1*0+y*1*0+1*0+16*1*0+1*0+e*1*0+5*0+s*1*0+1*0+m*1*0+1*0+i*1*0+1*0+u*1*0+1*0+y*1*0+1*0+16*1*0+1*0+e*1*0+3*0+9*1*0+1*0+b*1*0+3*0+8*1*0+1*0+1h*1*0+1*0+1c*1*0+1*0+1n*1*0+1*0+1e*1*0+3*0+g*1*0+1*0+n*1*0+1*0+1f*1*0+1*0+a*1*0+1*0+c*1*0+1*0+1d*1*0+1*0+i*1*0+1*0+5*1*0+1*0+4*1*0+1*0+c*1*0+1*0+w*1*0+1*0+10*1*0+1*0+z*1*0+1*0+6*1*0+1*0+g*1*0+1*0+1b*1*0+1*0+6*1*0+1*0+c*1*0+1*0+o*1*0+1*0+j*1*0+1*0+8*1*0+1*0+5*1*0+1*0+3*1*0+1*0+1*1*0+1*0+9*1*0+3*0+e*1*0+1*0+7*1*0+1*0+f*1*0+1*0+a*1*0+1*0+s*1*0+1*0+1*1*0+5*0+9*1*0+1*0+n*1*0+1*0+1*1*0+3*0+f*1*0+1*0+f*1*0+1*0+j*1*0+1*0+i*1*0+1*0+1*1*0+3*0+e*1*0+1*0+e*1*0+1*0+i*1*0+1*0+m*1*0+1*0+1*1*0+5*0+f*1*0+1*0+l*1*0+1*0+l*1*0+1*0+1*1*0+1*0+8*1*0+2*0+1v*1*0+1*0+2g*1*0+1\",\"text\":\"\\n \\n \\n \\n\\n\\n\\n\\n \\n \\n 基本用法\\n \\n \\n 通过 $show 控制弹出层是否展示。\\n \\n \\n 展示弹出层\\n \\n \\n\\n\\n\\n\\n \\n \\n 弹出位置\\n \\n \\n 通过 position 属性设置弹出位置,默认居中弹出,可以设置为 top、bottom、left、right。\\n \\n \\n 顶部弹出\\n 底部弹出\\n 左侧弹出\\n 右侧弹出\\n \\n \\n\\n\\n\\n\\n \\n \\n 关闭图标\\n \\n \\n 设置 closeable 属性后,会在弹出层的右上角显示关闭图标,并且可以通过 close-icon 属性自定义图标,使用 close-icon-position 属性可以自定义图标位置。\\n \\n \\n 关闭图标\\n 自定义图标\\n 图标位置\\n 自定义图标颜色\\n \\n \\n\\n\\n\\n\\n \\n \\n 圆角弹窗\\n \\n \\n 设置round属性后,弹窗会根据弹出位置添加不同的圆角样式\\n \\n \\n 圆角弹窗\\n \\n \\n\\n\\n \\n\\n\\n\\n\\n \\n 内容\\n \\n\\n\\n\\n\\n \\n 内容\\n \\n\\n\\n \\n 内容\\n \\n\\n\\n\\n\\n \\n 内容\\n \\n\\n\\n\\n\\n \\n 内容\\n \\n\\n\\n\\n\\n \\n 内容\\n \\n\\n\\n\\n\\n \\n 内容\\n \\n\\n\\n\\n\\n \\n 内容\\n \\n\\n\\n \\n\\n\\n\\n\\n\\n\\n\\n\\n以上代码来源于github示例代码,存在act a-popup组件 安卓平台 同一界面 多个a-popup只能弹出第一个pop-up\\nhttps://**.**/apicloudcom/act/ed ... p/simple-popup.stml\\n\"},\"apool\":{\"numToAttrib\":{\"0\":[\"author\",\"p.1688854002456385\"],\"1\":[\"textalign\",\"left\"]},\"nextNum\":2}}","storyAtexts":[],"srcGlobalPadId":"w3_AEEA1wbkAPYb48zVNvYTqGBgDE2QO"}" data-version="2.1.0"> <template> <view class="page"> <a-nav-bar title="simple-popup" left-arrow/> <scroll-view style="flex: 1;" scroll-y>
<view class="simple"> <text class="simple-title"> 基本用法 </text> <text class="simple-desc"> 通过 $show 控制弹出层是否展示。 </text> <a-cell-group round> <a-cell is-link @click="showPopup(0)">展示弹出层</a-cell> </a-cell-group> </view>
<view class="simple"> <text class="simple-title"> 弹出位置 </text> <text class="simple-desc"> 通过 position 属性设置弹出位置,默认居中弹出,可以设置为 top、bottom、left、right。 </text> <a-cell-group round> <a-cell is-link @click="showPopup(1,'top')">顶部弹出</a-cell> <a-cell is-link @click="showPopup(1,'bottom')">底部弹出</a-cell> <a-cell is-link @click="showPopup(2,'left')">左侧弹出</a-cell> <a-cell is-link @click="showPopup(2,'right')">右侧弹出</a-cell> </a-cell-group> </view>
<view class="simple"> <text class="simple-title"> 关闭图标 </text> <text class="simple-desc"> 设置 closeable 属性后,会在弹出层的右上角显示关闭图标,并且可以通过 close-icon 属性自定义图标,使用 close-icon-position 属性可以自定义图标位置。 </text> <a-cell-group round> <a-cell is-link @click="showPopup(3)">关闭图标</a-cell> <a-cell is-link @click="showPopup(4)">自定义图标</a-cell> <a-cell is-link @click="showPopup(5)">图标位置</a-cell> <a-cell is-link @click="showPopup(6)">自定义图标颜色</a-cell> </a-cell-group> </view>
<view class="simple"> <text class="simple-title"> 圆角弹窗 </text> <text class="simple-desc"> 设置round属性后,弹窗会根据弹出位置添加不同的圆角样式 </text> <a-cell-group round> <a-cell is-link @click="showPopup(7)">圆角弹窗</a-cell> </a-cell-group> </view>
</scroll-view>
<a-popup $show="show[0]"> <text class="demo-content" @click="test"> 内容</text> </a-popup>
<a-popup $show="show[1]" :position="position" style="height: 30%;"> <text class="demo-content">内容</text> </a-popup>
<a-popup $show="show[2]" :position="position" style="width: 30%;height: 100%;"> <text class="demo-content">内容</text> </a-popup>
<a-popup $show="show[3]" @close="myClose" closeable position="bottom" style="height: 30%;"> <text class="demo-content">内容</text> </a-popup>
<a-popup $show="show[4]" closeable close-icon="success" position="bottom" style="height: 30%;"> <text class="demo-content">内容</text> </a-popup>
<a-popup $show="show[5]" closeable close-icon="close" close-icon-position="top-left" position="bottom" style="height: 30%;"> <text class="demo-content">内容</text> </a-popup>
<a-popup $show="show[6]" closeable close-icon-color="red" position="bottom" style="height: 30%;"> <text class="demo-content">内容</text> </a-popup>
<a-popup $show="show[7]" closeable round position="bottom" style="height: 30%;"> <text class="demo-content">内容</text> </a-popup>
</view> </template>
<script> import ANavBar from "../../components/act/a-nav-bar"; import ACell from "../../components/act/a-cell"; import ACellGroup from "../../components/act/a-cell-group"; import APopup from "../../components/act/a-popup";
export default { name: "simple-popup", components: {APopup, ACellGroup, ACell, ANavBar}, data() { return { show: Array.from({length: 10}).fill(false), position: '' } }, methods: { showPopup(index, position) { this.data.position = position; this.data.show[index] = true; }, myClose(e) { console.log('myClose', JSON.stringify(e)) }, test() { return api.toast({ msg: "测试点击" }) } } } </script>
<style scoped> .page { height: 100%; flex: 1; background-color: #F8F8F8; }
.simple { padding-bottom: 28px; }
.simple-title { margin: 16px; font-weight: 600; font-size: 18px; }
.simple-desc { color: #999; font-size: 14px; margin: 0 16px 16px; }
.demo-content { align-self: center; padding: 30px 50px; } </style>
以上代码来源于github示例代码,存在act a-popup组件 安卓平台 同一界面 多个a-popup只能弹出第一个pop-up bug https://**.**/apicloudcom/act/edit/main/widget/pages/simple-popup/simple-popup.stml
|