從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>

複製代碼