从0开始选择ui-携手之paste-copyUi(部分展现)

时间 2019-11-06

标签开始选择携手 paste copyui 部分展现繁體版

原文原文链接

已经有3个月没有开始写文章了。说说我三个月作了啥吧。（为了德玛西亚我不得不努力💪学习）css

我学习了webpack4.建议你们看看(论看过🐷跑的重要性)，
我写了差很少一半的ui组件库github 效果能够观看后食用线上（暂时不支持）后面会赋上一些插件的截图（但愿看完以后能给小弟点个赞），参考了（react有赞极简样式特别喜欢）antd蚂蚁金服,element饿了么,iviewui样式出众大部都借鉴了它（极其优秀）,飞冰阿里大佬牛逼。我参考了市面几乎全部都开源ui,各有千秋把。若是你要我推荐一款react 我应该会推荐飞冰，一款vue 我应该会推荐antd,element我的观点样式通常，iviewui 时间插件有点难用。以上都是我的观点,有客官老爷有困惑的能够加QQ群人时常不在线（掘金留言比较合适）。
学习了java（进度40%增删改查应该能够），我认为做为一个有理想的前端猿仍是应该学习一门后端语言(说说感觉吧，学习过ts的应该都知道ts和Java特别像可是ts有不少地方我认为没有java里面讲的清楚，并且没有啥视频（官网能够）和数据)，QQ群技术讨论）838293023备注（github进来的）（通常没人回复😂）建议有问题能够本身解决（学会独立解决问题的能力）

游泳健身了解一下：github 技术文档 技术文档会(暂停搁置。当前目标 java)html

内容总结（言归正传）

less（公共的less）以及学会less的函数 less学习
icon的结合
虚线 . 实线，圆角
loading
按钮组
公共跳转

less

<!--公共方法-->
// 当前按钮的padding 大小 形状固定
.button-size(@padding; @font-size; @border-radius) {
  padding: @padding;
  font-size: @font-size;
  border-radius: @border-radius;
}

// 当前按钮的颜色赋值  字体颜色 背景颜色 border 颜色
.button-color(@color; @background; @border){
  color: @color;
  background-color: @background;
  border-color: @border;
  > a:only-child {
    color: currentColor;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: transparent;
    }
  }
}

.btn-color(@color,@name) {
  .button-variant(white; @color; @color);

  // 获取动画
  &-animation {
    .btn-animation(@color,@name);
  }

  // 获取基础的样式
  &:hover{
    .button-color(white;tint(@color, 20%); tint(@color, 20%))
  }

  &:active,
  &.active{
    .button-color(white;shade(@color, 20%); shade(@color, 20%));
  }

  &-plain{
    .button-color(tint(@color, 20%);tint(@color, 90%); tint(@color, 50%))
  }

  &-plain:hover{
    .button-color(white,@color,@color)
  }

  &-plain:active,
  &-plain.active{
    .button-color(white, @color,@color);
  }

  .active-btn-color(@color);
  .btn-text(@color);
  &-disabled{
    .button-color(white,tint(@color,50), tint(@color,50))!important;
    &-@{name}{
      .button-color(tint(@color, 10%);tint(@color, 98%); tint(@color, 60%))!important;
    }
  }
}

// text
.btn-text(@color){
  &-text,
  &-text:hover,
  &-text:active,
  &-text:focus{
    color: @color;
    background: none;
    border: none;
    box-shadow: none;
    animation: none;
  }
  &-text:hover{
    color: tint(@color, 20%);
  }
  &-text:active{
    color: shade(@color, 20%);
  }
  &-text-disabled,
  &-text-disabled:hover,
  &-text-disabled:active,
  &-text-disabled:focus{
    color: tint(@color, 50%);
  }
}
// 基础的按钮
.btn(){
  display: inline-block;
  margin-bottom: 0;
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  // 不换行
  white-space: nowrap;
  line-height: @line-height-base;
  user-select: none;

  // 基础的按钮执行 获取按钮的大小
  .button-size(@btn-padding-base,@btn-font-size,@btn-border-radius);
  // 过分效果
  transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;

  // 按钮下门店icon
  > .@{css-prefix-iconfont} {
    line-height: @line-height-base;
    vertical-align: middle;
  }

  &-icon-only&-circle > .@{css-prefix-iconfont}{
    vertical-align: baseline;
  }

  > span{
    vertical-align: middle;
  }

  // 不要当前按钮的轮廓
  &,
  &:active,
  &:focus {
    outline: 0;
  }
  // 非 disabled 的清除下划线
  &:not([disabled]):hover {
    text-decoration: none;
  }

  // 非 disabled 的清除下划线
  &:not([disabled]):active {
    outline: 0;
    // transition: none;  // 若是不注释此行，那么active会和focus同时触发，此时focus的开始动画transition会无效
  }

  &.disabled,
  &[disabled] {
    cursor: @cursor-disabled;
    > * {
      pointer-events: none;
    }
  }
  &-default-only{
    width: 32px;
    height: 32px;
    padding: 0;
  }
  // 大按钮
  &-large{
    .button-size(@btn-padding-large,@btn-font-size-large,@btn-border-radius);
    &-only{
      width: 38px;
      height: 38px;
      padding: 0;
    }
  }
  &-large-circle{
    height: 36px;
    border-radius: 18px;
  }
  &-default-circle{
    height: 32px;
    border-radius: 16px;
  }

  // 小按钮
  &-small{
    .button-size(@btn-padding-small,@btn-font-size,@btn-border-radius-small);
    &-only{
      width: 24px;
      height: 24px;
      padding: 0;
    }
  }
  &-small-circle{
    height: 24px;
    border-radius: 12px;
  }
}

.button-variant(@color; @background; @border){
  .button-color(@color; @background; @border);
  &:hover{
    .button-color(tint(@color, 20%);tint(@background,20); tint(@border, 20%))
  }

  &:active,
  &.active{
    .button-color(shade(@color, 5%); shade(@background, 5%); shade(@border, 5%));
  }
}

// 默认按钮
.btn-default(){
  // 添加默认大 按钮颜色 按钮背景色 按钮 border 默认的hover active
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);

  // 获取基础的样式
  &:hover{
    .button-color(tint(@primary-color, 20%);tint(@primary-color, 90%); tint(@primary-color, 50%))
  }

  &:active,
  &.active{
    .button-color(shade(@primary-color, 20%); tint(@primary-color, 90%); shade(@primary-color, 50%));
  }
  // 获取动画效果
  &-default-animation{
    .btn-animation(@primary-color,default);
  }
  &-default-plain{
    .button-color(tint(@primary-color, 10%);tint(@primary-color, 90%); tint(@primary-color, 50%))
  }
  &-default-plain:hover{
    .button-color(white,@primary-color,@primary-color)
  }

  &-default-plain:active,
  &-default-plain.active{
    .button-color(white, @primary-color,@primary-color);
  }

  // 获取 box-shadow
  .active-btn-color(@primary-color);
  &-default{
    .btn-text(@primary-color);
  }

  &-default-disabled{
    .button-color(tint(@btn-default-color,50),shade(white,2), tint(@btn-default-border,50))!important;
    &-default{
      .button-color(tint(@primary-color, 25%);tint(@primary-color, 95%); tint(@primary-color, 60%))!important;
    }
  }
}

.btn-animation(@color,@name,@index:1) when (@index>0){
  animation:@name .2s linear;
  @keyframes @name
   {
    from   {box-shadow: 0 0 0 2px fade(@color, 20%);}
    to   {box-shadow: 0 0 0 5px fade(@color, 10%);}
    //0%   {box-shadow: 0 0 0 1px fade(@color, 20%)}
    //25%  {box-shadow: 0 0 0 3px fade(@color, 20%)}
    //50%  {box-shadow: 0 0 0 5px fade(@color, 20%)}
    ////75%  {box-shadow: 0 0 0 6px fade(@color, 20%)}
    //100% {box-shadow: 0 0 0 6px fade(@color, 20%)}
   }
}


// Color
// for tabindex
.active-btn-color(@color) {
  &:focus {
    box-shadow: 0 0 0 2px fade(@color, 20%);
  }
}

复制代码

html

<template>
    <component :is="tagName" :class="classes" v-bind="tagProps"
               @click="handleClickLink" :disabled="disabled"
               v-no-more-click="noMoreClickTime"
    >
        <pc-icon :type="loadingType" :size="iconSize" class="pc-icon-loading" v-if="loading"></pc-icon>
        <pc-icon :type="icon" :size="iconSize" :customIcon="customIcon" v-if="(icon||customIcon)&&!loading"></pc-icon>
        <span v-if="showSlot" ><slot ref="slot"></slot></span>
    </component>
</template>
<script>
    import {oneOf} from '../../utils/assist';
    import mixinsLink from '../../mixins/link';
    import borderAnimation from '../../mixins/borderAnimation'
    const prefixCls = 'pc-btn';

    export default {
        name: 'PcButton',
        mixins: [mixinsLink,borderAnimation],
        directives:{
            noMoreClick:{
                inserted(el, binding) {
                    if (binding.value!==0) {
                        el.addEventListener('click', () => {
                            el.classList.add('is-disabled');
                            el.disabled = true;
                            setTimeout(() => {
                                el.disabled = false;
                                el.classList.remove('is-disabled');
                            }, binding.value|200)
                        })
                    }
                }
            }
        },
        props: {
            // 当前按钮类型
            type: {
                validator (value) {
                    return oneOf(value, ['default', 'primary', 'info', 'success', 'warning', 'error']);
                },
                default: 'default'
            },
            // 加载项
            loading: {
                type: Boolean,
                default: false
            },
            // Loading 样式
            loadingType: {
                type: String,
                default(){
                    return 'loading2'
                }
            },
            // icon 的新增class
            customIcon: String,
            // 当前点击间隔时间
            noMoreClickTime: {
                type: Number,
                default: 0
            },
            // icon
            icon: String,
            // 是否可选
            disabled: Boolean,
            // 属性样式
            plain: Boolean,
            // 是否100%
            long: Boolean,
            // 是否虚线
            dashed: Boolean,
            // 是否圆形
            circle: Boolean,
            // 是不是文本
            text: Boolean,
            // 是否幽灵模式
            ghost: Boolean,
            // 当前按钮的大小
            size: {
                type: String,
                validator(value){
                    return oneOf(value,['small', 'large', 'default'])
                },
                // 添加默认的按钮大小
                // this.$PASTE.size 若是有默认注入的按钮大小那么就用默认的
                default(){
                    return !this.$PASTE || this.$PASTE.size === '' ? 'default' : this.$PASTE.size;
                },
            },
            // 默认的button 的值
            htmlButton:{
                type: String,
                validator(value){
                    return oneOf(value, ['button', 'submit', 'reset']);
                },
                default: 'button'
            },

        },
        data(){
            return{
                showSlot: false
            }
        },
        computed: {
            iconSize(){
                let size = 12;
                this.size==='large'? size = 14
                    :this.size==='default'? size = 12
                    :this.size==='small'? size = 12:'';
                return size
            },
            classes(){
                return [
                    `${prefixCls}`,
                    `${prefixCls}-${this.type}`,
                    {
                        [`${prefixCls}-${this.size}`]: this.size !== 'default',
                        [`${prefixCls}-long`]: this.long,
                        [`${prefixCls}-${this.type}-animation`]: this.animation,
                        [`${prefixCls}-${this.type}-plain`]: this.plain,
                        [`${prefixCls}-dashed`]: this.dashed,
                        [`${prefixCls}-ghost`]: this.ghost,
                        [`${prefixCls}-${this.type}-text`]: this.text,
                        [`${prefixCls}-${this.type}-text-disabled`]: this.text&&this.disabled,
                        [`${prefixCls}-${this.size}-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
                        [`${prefixCls}-${this.size}-circle`]: this.circle,
                        [`${prefixCls}-${this.type}-disabled`]: this.disabled&&!this.plain&&!this.text,
                        [`${prefixCls}-${this.type}-disabled-${this.type}`]: this.disabled&&this.plain&&!this.text,
                    }
                ]
            },
            // Point out if it should render as <a> tag
            // !! 等同于 !=null !=undefined !=''
            isHrefPattern() {
                const {to} = this;
                return !!to;
            },
            // 当前标签的名称 若是没有跳转的路径的时候那么就确定是button
            tagName() {
                const {isHrefPattern} = this;
                return isHrefPattern ? 'a' : 'button';
            },
            tagProps(){
                const {isHrefPattern} = this;
                // 当前按钮是a标签的时候
                // 添加 href 调整路径 target 跳转方式
                if (isHrefPattern) {
                    const {linkUrl,target} = this;
                    return {href:linkUrl,target}
                }else {
                    // 当前是按钮的时候添加 type
                    const {htmlButton} = this;
                    return { type: htmlButton }
                }
            },
        },
        methods:{
            handleClickLink(event){
                let that =this;
                that.$emit('click',event);
                if (!that.text) {
                    that.btnAnimation();
                }
                const openInNewWindow = event.ctrlKey || event.metaKey;
                this.handleCheckClick(event, openInNewWindow);
            },

        },
        mounted () {
            this.showSlot = this.$slots.default !== undefined;
        }
    }
</script>

复制代码