vue3组件库-mycom3-vue 组件文档

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>