vue组件封装：tool-tip &popconfirm

前言

往期基于vue-popper封装了sss-popper组件，用来作为popper组件的基础，现在尝试两个简单的popper组件，分别是tool tip 提示框、popconfirm 气泡确认框。

由于许多props都是直接传入sss-popper组件内部的，所以不过多介绍

展示

tool-tip + popconfirm

正文

tool tip

提示框基本就是popper元素里面放一段文字，因此会多一个prop：title

不设置事件和提供给外部调用的方法

html

<template>

    <sss-popper
        :disabled="disabled"
        :trigger="trigger"
        :placement="placement"
        :dark="dark"
        :maxwidth="maxwidth"
        :transition="transition"
        :gpu-acceleration="gpuAcceleration"
        :offset="offset"
    >

        <span ref="popper" slot="popper">{{ title }}</span>
        <slot slot="reference"></slot>
    </sss-popper>


</template>

js

<script>
export default {
    name: "sss-tool-tip",
    props: {
        placement: {
            type: String,
            default: "top"
        },
        dark: {
            type: Boolean,
            default: false,
        },
        trigger: {
            type: String,
            default: "hover",
            validator(value) {
                return ['hover', 'clickToOpen'].indexOf(value) !== -1;
            }
        },
        disabled: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
        maxwidth: {
            type: String,
            default: "2000px"
        },
        transition: {
            type: String,
            default: "fade"
        },
        gpuAcceleration: {
            type: Boolean,
            default: true
        },
        offset: {
            type: Number,
            default: 10
        }

    },


}
</script>

css

甚至没有css👻

popconfirm

作为气泡确认框，自然应该具有header content footer

• hedaer: 展示图标和标题，图标往往提示用户这个一个什么类型的确认框
• content: 展示用户需要确认的内容， 此组件将内容作为标题
• footer: 展示取消确认按钮

使用

attributes

属性名	描述	类型	可选值	默认值
type	图标类型	string	success / info / warn / error	info
title	确认框的标题	string	—	—
cancelBtnType	取消按钮的类型	string	—	normal
cancelBtnText	取消按钮的文本	string	—	取消
confirmBtnType	确认按钮类型	string	—	main
confirmBtnText	确认按钮文本	string	—	确认

events

事件名	描述	回调参数
cancel	点击取消按钮之后的回调	—
confirm	点击确认按钮之后的回调	—

html

<template>

    <sss-popper
        :disabled="disabled"
        :force-show="vis"
        :trigger="trigger"
        :placement="placement"
        :offset="offset"
        :gpu-acceleration="gpuAcceleration"
        :max-width="maxWidth"
        :minwidth="minWidth"

    >
        <slot slot="reference"></slot>

        <div class="class-popconfirm-popper" slot="popper">
            <!--            标题-->
            <h3 class="sss-popconfirm-title">
                <span class="iconfont" ref="icon"></span>
                {{ title }}
            </h3>

            <!--            按钮-->
            <div class="sss-popconfirm-btn-list">
                <sss-button class="sss-confirm-cancel-btn" style="font-size: 7px"
                            :type="canclBtnType"
                            @click.stop="__cancel()"
                >{{ cancelBtnText }}
                </sss-button>
                <sss-button class="sss-confirm-confirm-btn" style="font-size: 7px"
                            :type="confirmBtnType"
                            @click.stop="__confirm()"

                >{{ confirmBtnText }}
                </sss-button>
            </div>

        </div>


    </sss-popper>

</template>

js

<script>
export default {
    name: "sss-popconfirm",
    props: {
        placement: {
            type: String,
            default: "bottom"
        },
        trigger: {
            type: String,
            default: "clickToOpen",

        },
        offset: {
            type: Number,
            default: 10
        },
        gpuAcceleration: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: "info",
            validator(value) {
                return ['success', 'error', 'warn', 'info'].indexOf(value) !== -1;
            }
        },
        title: {
            type: String,
        },
        canclBtnType: {
            type: String,
            default: "normal"
        },
        cancelBtnText: {
            type: String,
            default: "取消"
        },
        confirmBtnType: {
            type: String,
            default: "main",
        },
        confirmBtnText: {
            type: String,
            default: "确认"
        },
        maxWidth: {
            type: String,
            default: "2000px"
        },
        minWidth: {
            type: String,
            default: '250px'
        }


    },
    data() {
        return {
            vis: false
        }
    },
    methods: {
        __addIcon() {
            if (this.type === 'success') {
                this.$refs.icon.classList.add('icon-chenggong');
                this.$refs.icon.style.color = '#db5b6c';

            } else if (this.type === 'error') {
                this.$refs.icon.classList.add('icon-error-filling');
                this.$refs.icon.style.color = '#e1122a';

            } else if (this.type === 'warn') {
                this.$refs.icon.classList.add('icon-gantanhao1');
                this.$refs.icon.style.color = '#E6A23C';

            } else if (this.type === 'info') {
                this.$refs.icon.classList.add('icon-yiwen');
                this.$refs.icon.style.color = '#1ba784';

            }
        },
        __cancel() {
            this.vis = true;
            this.$nextTick(() => {
                this.vis = false
            })

            this.$emit("cancel");
        },
        __confirm() {
            this.vis = true;
            this.$nextTick(() => {
                this.vis = false
            })

            this.$emit("confirm")
        }

    },
    mounted() {
        this.__addIcon();
    }
}
</script>

css

<style lang="less">
@import "@/assets/style/sss-var.less";

.class-popconfirm-popper {
    & > .sss-popconfirm-title {
        margin-top: 10px;
        margin-bottom: 20px;

        & > .iconfont {
            background: white;
            border-radius: 50%;
            overflow: hidden;


        }
    }

    color: @color-black1;
    display: flex;
    flex-flow: column nowrap;
    align-items: start;

    .sss-popconfirm-btn-list {
        display: flex;
        width: 100%;
        justify-content: end;

    }
}

</style>

写在最后

感谢看到最后😃