uibmodal模态框打开另一个模态框_vue3组件库-[mycom-vue3]-从头开发一个组件库-4

mycom-vue3 组件文档

mycom-vue3 主页

mycom-vue3

基本组件

标题

<mc-text width="200px">这是一个大标题</mc-text> <mc-text width="200px" size="small">这是一个标题</mc-text>

链接

<mc-link width="200px">默认链接</mc-link> <mc-link width="200px" type="red">默认链接</mc-link> <mc-link width="200px" type="blue">默认链接</mc-link> <mc-link width="200px" type="yellow">默认链接</mc-link>

分割线

<mc-divider text="分割线"></mc-divider>

文字提示

<mc-tip text="补充说明文字提示"><mc-tag>文字提示</mc-tag></mc-tip> <mc-tip text="补充说明"><mc-tag>文字提示</mc-tag></mc-tip>

标签

<mc-tag>标签</mc-tag> <mc-tag type="red">标签二</mc-tag> <mc-tag type="blue">标签三</mc-tag>

表单组件

输入框

<mc-input v-model:value="inputch" placeholder="请输入密码"></mc-input>

按钮

<mc-button size="small"> 按钮 </mc-button> <mc-button size="small" type="red"> 按钮 </mc-button> <mc-button size="small" type="blue"> 按钮 </mc-button> <mc-button size="large"> 大按钮 </mc-button>

选择器

selectlabel: [ { label: "草莓sdasfsda", value: "a" }, { label: "香蕉", value: "b" }, { label: "草莓", value: "a" }, { label: "香蕉", value: "b" }, { label: "草莓", value: "a" }, { label: "香蕉", value: "b" }, ],

<mc-select width="100px" v-model:value="selectch" :label="selectlabel"> </mc-select>

开关

<mc-switch v-model:value="switchch"> 开关 </mc-switch>

单选按钮

<mc-radio v-model:value="radioch" label="1"> 单选按钮 </mc-radio> <mc-radio v-model:value="radioch" label="2"> 单选按钮 </mc-radio> <mc-radio v-model:value="radioch" label="3"> 单选按钮 </mc-radio>

复选按钮

<mc-checkbox v-model:value="checkch" label="1"> 复选按钮 </mc-checkbox> <mc-checkbox v-model:value="checkch" label="2"> 复选按钮 </mc-checkbox> <mc-checkbox v-model:value="checkch" label="3"> 复选按钮 </mc-checkbox>

数字选择器

<mc-switch v-model:value="switchch"> 开关 </mc-switch>

日期选择器

<mc-date date="2020-10-01" v-model:value="datech"> </mc-date>

滑动条

<mc-slider v-model:value="sliderch"> </mc-slider> <mc-slider :top="1" v-model:value="sliderch"> </mc-slider>

提示组件

滑动解锁

<mc-unlock v-model:value="iflock" width="50%"> <h4>滑动解锁按钮</h4> </mc-unlock>

隐藏显示切换

<mc-unlock2 width="50%"> <h4>显示与隐藏按钮</h4> </mc-unlock2>

提示框

this.$alert({ name: "hello", text: "hellohellohellohellohellohellohello", });

模态对话框

this.$modal_alert( { name: "模态对话框", text: this.count++ }, () => { this.$top_alert("被接受"); }, () => { this.$top_alert("被拒绝"); } );

顶部提示框

this.$top_alert(this.count++);

右部提示框

this.$right_alert(this.count++);

右部提示页

<mc-right-page @close="right_show=false" v-if="right_show"> <mc-articl> 思路就是将scrollArea设定为垂直布局，然后加入按钮和widget，当鼠标点击按钮后，隐藏widget，利用垂直布局，做到自然伸缩，然后为什么要使用scrollArea做容器，因为scrollArea可以实现当容器空间不足，出现进度条进行列表滑动，下面一步一步来实现。 </mc-articl> </mc-right-page>

布局组件

段落

<mc-articl> 思路就是将scrollArea设定为垂直布局，然后加入按钮和widget，当鼠标点击按钮后，隐藏widget，利用垂直布局，做到自然伸缩，然后为什么要使用scrollArea做容器，因为scrollArea可以实现当容器空间不足，出现进度条进行列表滑动，下面一步一步来实现。 </mc-articl>

头部菜单

<mc-header :menu='[{name:"布局",path:"layout"},{name:"提示",path:"unlock"}]'> mycom-vue3 </mc-header>

居中框

<mc-unlock2 width="50%"> <mc-center> 登录框 </mc-center> </mc-unlock2>

居中布局

<mc-middle width="50%"> 居中 </mc-middle>

折叠面板

<mc-collapse :text="{name:'折叠面板',text:'面板内容'}"> </mc-collapse>

卡片

<mc-articl> 思路就是将scrollArea设定为垂直布局，然后加入按钮和widget，当鼠标点击按钮后，隐藏widget，利用垂直布局，做到自然伸缩，然后为什么要使用scrollArea做容器，因为scrollArea可以实现当容器空间不足，出现进度条进行列表滑动，下面一步一步来实现。 </mc-articl>

实用组件

切换轮播图

<mc-tab v-model:value="test" height="200px" width="50%"> <mc-tab-page>1</mc-tab-page> <mc-tab-page>2</mc-tab-page> <mc-tab-page>4</mc-tab-page> </mc-tab>

百分比显示按钮

<mc-percent-button text="加载中" process="0.5"> </mc-percent-button> <mc-percent-button text="加载中.." :process="loading"></mc-percent-button> <mc-percent-button text="加载中.." :process="ctrlloading"></mc-percent-button> <mc-slider :top="1" v-model:value="ctrlloading"></mc-slider>

百分比显示饼图

<mc-percent-pie text="加载中" :process="0.7"> </mc-percent-pie> <mc-percent-pie text="加载中.." :process="loading"> </mc-percent-pie> <mc-percent-pie text="加载中.." :process="ctrlloading"></mc-percent-pie>

百分比显示环图

<mc-percent-ring text="加载中" :process="0.7"> </mc-percent-ring> <mc-percent-ring text="加载中.." :process="loading"> </mc-percent-ring> <mc-percent-ring text="加载中.." :process="ctrlloading"> </mc-percent-ring> <mc-slider :top="1" v-model:value="ctrlloading"></mc-slider>

下拉刷新

<mc-dropdown @refresh="refreshdemo()"></mc-dropdown>