【vue】原创Vue组件 - Hunit （开发中...）

StudiousTiger

已于 2022-11-13 18:52:22 修改

阅读量2.8k

点赞数

文章标签： vue.js javascript 前端

于 2022-11-12 00:52:03 首次发布

本文链接：https://blog.csdn.net/m0_45067620/article/details/127815051

版权

Tiger の JavaScript-基础同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

Tiger の HTML&CSS

46 篇文章 0 订阅

订阅专栏

对于组件的使用方式，大家有好的建议可以留言奥...

多类型按钮

在这里插入图片描述

<template>
  <div class="box">
    <hu-button type="green" value="按钮" size="mini"/>
    <hu-button type="red" value="按钮" size="small"/>
    <hu-button type="purple" value="按钮" size="big"/>
    <hu-button type="orange" value="按钮" size="max"/>
    <hu-button type="grey" value="按钮（默认）"/>
    <hu-button type="blue" value="按钮"/>
  </div>
</template>

多类文本标签

在这里插入图片描述

<template>
  <div class="box">
    <hu-tag type="grey" value="文本标签（默认）"/>
    <hu-tag type="blue" value="文本标签"/>
    <hu-tag type="green" value="文本标签"/>
    <hu-tag type="orange" value="文本标签"/>
    <hu-tag type="red" value="文本标签"/>
    <hu-tag type="purple" value="文本标签"/>
  </div>
</template>

提示

在这里插入图片描述

<template>
  <div class="box">
    <hu-button @click="dianJi1()" value="成功提示"/>
    <hu-button @click="dianJi2()" value="失败提示"/>
    <hu-button @click="dianJi3()" value="警告提示"/>
    <hu-button @click="dianJi4()" value="通知提示"/>
  </div>
</template>
<script>
    export default {
        methods:{
            dianJi1() {
                this.$huTip_success("操作成功")
            },
            dianJi2() {
                this.$huTip_error(" Cause:java.sql.SQLException: The server time zone value '����˹ TZ 7 ��׼ʱ��' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the 'serverTimezone' configuration property) to use a more specific time zone value if you want to utilize time zone support.")
            },
            dianJi3() {
                this.$huTip_warning("系统繁忙, 请勿多次操作")
            },
            dianJi4() {
                this.$huTip_info("您已经点击")
            },
        }
    }
</script>

dialog

在这里插入图片描述

<template>
  <div class="box">
    <hu-button @click="dianJi()" value="对话框"/>
    <hu-dialog title="对话框"
               ref="huDialog"
               @resHuDialog="resultDialog"
               submit="确认"
               close="关闭"
               width="500px"
               top="15%">
      <div style="width: 100%;height: 200px;line-height: 200px;text-align: center"> [自定义内容]</div>
    </hu-dialog>
  </div>
</template>
<script>
    export default {
        methods:{
            dianJi() {
                this.$refs.huDialog.openDialog()
            },
            resultDialog(val) {
                if (val) {
                    this.$huTip_success("已确认")
                } else {
                    this.$huTip_error("已关闭")
                }
            },
        }
    }
</script>

确认操作

在这里插入图片描述

<template>
  <div class="box">
    <hu-button @click="dianJi()" value="确认操作"/>
  </div>
</template>
<script>
    export default {
        methods:{
            dianJi() {
                this.$huConfirm({
                    onConfirm:() => {
                        this.$huTip({value:"已确认",type:"success"})
                    },
                    onCancel:() => {
                        this.$huTip({value:"已取消",type:"error"})
                    }
                })
            },
        }
    }
</script>

分页器

在这里插入图片描述

<template>
  <div class="box">
    <hu-page :currentPage=1 :totalPage=33 :pageSize=5 @current-page="currentPage"/><br/>
    <hu-page :currentPage=1 :totalPage=33 :pageSize=5 @current-page="currentPage" type="text"/>
  </div>
</template>
<script>
    export default {
        methods:{
            currentPage(page) {
                this.$huTip_warning("第"+page+"页")
            }
        }
    }
</script>

输入选择框

在这里插入图片描述

<template>
  <div class="box">
    <hu-input v-model="value1" title="单行文本" placeholder="请输入"/>
    <hu-input-bool v-model="value2" title="布尔选择" :true-key="true" :false-key="false"/>
    <hu-input-count v-model="value3" title="计数器" step="2" />
    <hu-input-password v-model="value4" title="密码框" placeholder="请输入"/>
    <hu-input-interval v-model="valueInterval1" title="区间值"/>
    <hu-input-interval v-model="valueInterval2" title="区间值" link-symbol="至"/>
    <hu-input-textarea v-model="value5" title="文本域" placeholder="请输入"/>
    <hu-select-dict v-model="value6" :selectDic="selectDic" title="下拉选择" placeholder="请选择"/>
    <hu-select-dict v-model="value66" :selectDic="selectDic" title="下拉搜索选择" placeholder="请选择" search/>
    <hu-select-tree v-model="value7" :data="treeData" title="树形选择" placeholder="请选择"/>
    <hu-select-tree v-model="value77" :data="treeData" title="树形搜索选择" placeholder="请选择" search/>
    <hu-select-year v-model="value8" title="年份选择" placeholder="请选择年份"/>
    <hu-select-year v-model="value88" title="年份选择" placeholder="请选择年份" format="yyyy年"/>
    <hu-select-month v-model="value9" title="月份选择" placeholder="请选择月份"/>
    <hu-select-month v-model="value99" title="月份选择" placeholder="请选择月份" format="yyyy年MM月"/>
    <hu-select-datetime v-model="value12" title="日期时间选择" placeholder="请选择日期"/>
    <hu-select-datetime v-model="value13" title="日期时间选择" placeholder="请选择日期" format="yyyy年MM月dd日"/>
    <hu-select-datetime v-model="value10" title="日期时间选择" placeholder="请选择日期时间" format="yyyy-MM-dd HH:mm:ss"/>
    <hu-select-datetime v-model="value11" title="日期时间选择" placeholder="请选择日期时间" format="yyyy年MM月dd日 HH时mm分ss秒"/>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                value1: "Hello, HUnit",
                value2: 1,
                value3: 10,
                value4: "Hello, HUnit",
                value5: "Hello, HUnit",
                value66: "002",
                value6: "003",
                selectDic:[
                    {
                        "value": "001",
                        "label": "Hello,HUnit"
                    }, {
                        "value": "002",
                        "label": "Hi,HUnit",
                        "disable": 1,
                    }, {
                        "value": "003",
                        "label": "Good-morning,HUnit"
                    }, {
                        "value": "004",
                        "label": "Good-afternoon,HUnit"
                    }, {
                        "value": "005",
                        "label": "Good-evening,HUnit"
                    }
                ],
                value77: "005",
                value7: "007",
                treeData:[{
                    "value": "001",
                    "label": "One-HUnit",
                    "disable": 1,
                    "children": [{
                        "value": "002",
                        "label": "Two-HUnit",
                        "children": [{
                            "value": "003",
                            "label": "Three-HUnit"
                        }]
                    }, {
                        "value": "004",
                        "label": "Four-HUnit",
                        "disable": 1,
                        "children": [{
                            "value": "005",
                            "label": "Five-HUnit"
                        }]
                    }]
                },{
                    "value": "006",
                    "label": "Six-HUnit",
                    "children": [{
                        "value": "007",
                        "label": "Serve-HUnit",
                        "children": [{
                            "value": "008",
                            "label": "Eight-HUnit",
                            "children": [{
                                "value": "009",
                                "label": "Nine-HUnit"
                            }]
                        }]
                    }]
                },{
                    "value": "010",
                    "label": "Ten-HUnit",
                }],
                value88: "2022年",
                value8: "2022",
                value9: "2022-10",
                value99: "2022年10月",
                value10: "2022-10-07 12:22:52",
                value11: "2022年10月07日 12时22分52秒",
                value12: "2022-10-07",
                value13: "2022年10月07日",
                valueInterval1: "172~175",
                valueInterval2: "172至175",
            }
        }
    }
</script>

表格

在这里插入图片描述

<template>
  <div class="box">
    <hu-table v-model="tIndex" :tableInfo="tableInfo" checkbox>
      <hu-button @click="chaKan()" value="查看" size="mini"/>
      <hu-button @click="bianJi()" value="编辑" size="mini"/>
      <hu-button @click="shanChu()" value="删除" size="mini"/>
    </hu-table>

    <hu-dialog title="查看" top="20%"
               ref="viewBtn" width="450px"
               @resHuDialog="resultDialog" onlyClose>
      <template v-for="(item,mIndex) in tableInfo.value[tIndex]" >
        <hu-input read-only :value="item" :title="tableInfo.title[mIndex]" :key="mIndex"/>
      </template>
    </hu-dialog>

    <hu-dialog title="编辑" top="20%"
               ref="editBtn" width="450px"
               @resHuDialog="resultDialog">
      <template v-for="(item,mIndex) in tableInfo.value[tIndex]" >
        <hu-input :value="item" :title="tableInfo.title[mIndex]" :key="mIndex"/>
      </template>
    </hu-dialog>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                tIndex: [],
                tableInfo: {
                    title: ["name","age","gender","hobby"],
                    value: [
                        ["HUnit01","eighteen01","man01","football01"],
                        ["HUnit02","eighteen02","man02","football02"],
                        ["HUnit03","eighteen03","man03","football03"],
                        ["HUnit04","eighteen04","man04","football04"],
                        ["HUnit05","eighteen05","man05","football05"],
                    ]
                },
            }
        },
        methods:{
            chaKan() {
                this.$refs.viewBtn.openDialog()
            },
            bianJi() {
                this.$refs.editBtn.openDialog()
            },
            shanChu() {
                this.$huConfirm({
                    title: "确认删除",
                    content: "删除后不可恢复, 是否继续？",
                    onConfirm:() => {
                        this.$huTip({value:"您已确认"})
                    },
                    onCancel:() => {
                        this.$huTip({value:"您已取消"})
                    },
                })
            },
            resultDialog(val) {
                if (val) {
                    this.$huTip({value:"您已确认"})
                } else {
                    this.$huTip({value:"您已取消"})
                }
            },
        }
    }
</script>

轮播图

在这里插入图片描述

<template>
  <div class="box">
    <hu-carousel :imgUrl="imgUrl" :title="title"/>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                title:["标题01","标题02","标题03","标题04","标题05"],
                imgUrl:[
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                ],
            }
        },
    }
</script>

骨架屏

在这里插入图片描述

<template>
  <div class="box">
    <div class="skeleton _a">
      <hu-skeleton size="mini"/>
    </div>
    <div class="skeleton _b">
      <hu-skeleton size="small"/>
    </div>
    <div class="skeleton _c">
      <hu-skeleton size="big"/>
    </div>
    <div class="skeleton _d">
      <hu-skeleton size="max"/>
    </div>
  </div>
</template>

头像

在这里插入图片描述

<template>
  <div class="box">
     <hu-avatar :imgUrl="avatarUrl" title="Hello,HUnit"/>
     <hu-avatar :imgUrl="avatarUrl" type="rectangle" title="Hi,HUnit"/>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                avatarUrl: "https://img2.woyaogexing.com/2022/07/14/84f60540a0b0e616!400x400.jpg",
            }
        },
    }
</script>

加载动画、空、回到顶部

在这里插入图片描述

<template>
  <div class="box">
    <hu-loading type="circular"/> 
    <hu-loading type="rectangle"/>
    <hu-loading type="circular"/>
    
    <hu-empty/>

    <hu-back-top/>
    <hu-back-top type="circular" bottom="120px"/>
  </div>
</template>