mycom-vue3 组件文档
mycom-vue3 GitHub
https://github.com/royalknight56/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>
