leesbutton

<template>
  <button
    class="lees-button-style"
    type="button"
    :class="[
      type ? `lees-button-type-${type}` : '',
      size ? `lees-button-size-${size}` : '',
      color ? `lees-button-color-${color}` : '',
      'lees-button-default',
      {
        'is-plain': plain,
        'is-circle': circle,
      },
    ]"
    @click="handleClick"
  >
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'LeesButton',
  props: {
    size: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['small', 'medium', 'large'].indexOf(value) !== -1
      },
      default: 'small',
    },
    type: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['circle', 'default', 'elliptical'].indexOf(value) !== -1
      },
      default: 'default',
    },
    color: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return (
          ['orange', 'white', 'blue', 'green', 'yellow', 'brown'].indexOf(
            value
          ) !== -1
        )
      },
      default: 'white',
    },
    // 是否为背景白色，边框和字体同颜色的简朴按钮
    plain: Boolean,
    // 是否为圆角按钮
    circle: Boolean,
    text: String,
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt)
    },
  },
}
</script>

<style lang="stylus" scoped>

.lees-button-size-small {

}

.lees-button-size-medium {

}
.lees-button-size-large {

}


.lees-button-default {
  display: inline-block;
  margin: 10px;
  width: 90px;
  height: 45px;
  font-size: 12px;
  position: relative;
}
.lees-button-default::before {
  position: absolute;
  height: 50%;
  content: attr(content);
  overflow: hidden;
  color: sandybrown;
  z-index: 999;
}
.lees-button-default:active::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 5%);
}
.lees-button-color-orange {
  background: linear-gradient(to top, #f55421 0%,#e04c1e 50%,#ff5824 51%,#ff8863 100%);
  border-radius 10px;
  border none;
  color: #ffffff;
}
</style>

<template>
  <div id="leesComment">
    <div class="leesComment-card">
      <div class="leesComment-card-header">
        <img
          class="leesComment-card-header-picture"
          :src="userImgUrl"
          alt="用户头像"
        />
        <div class="leesComment-card-inputbox">
          <div class="leesComment-card-inputName">昵称:</div>
          <input class="leesComment-card-inputContent" type="text" />
        </div>
        <div class="leesComment-card-inputbox">
          <div class="leesComment-card-inputName">邮箱:</div>
          <input class="leesComment-card-inputContent" type="text" />
        </div>
        <div class="leesComment-card-inputbox">
          <div class="leesComment-card-inputName">网址:</div>
          <input class="leesComment-card-inputContent" type="text" />
        </div>
      </div>
      <div class="leesComment-card-content">
        <textarea
          id="leesComment-card-content-textarea"
          name="my-new-comment"
          cols="20"
          rows="10"
          maxlength="200"
          placeholder="最多输入200字哦！"
        >
        </textarea>
      </div>
      <div class="leesComment-card-toolbar">
        <LeesButton
          @click="submitComment"
        ></LeesButton>
      </div>
      <div class="leesComment-card-comments"></div>
    </div>
  </div>
</template>
<script>
import LeesButton from './LeesButton'
export default {
  name: 'LeesComment',
  components: {
    LeesButton,
  },
  data() {
    return {
      userImgUrl:
        'https://thirdqq.qlogo.cn/g?b=sdk&k=ibCiayETkaaEUubh5djEustQ&s=140&t=1642948558',
    }
  },
  mounted() {},
  methods: {
    submitComment() {
      console.log(1)
    },
  },
}
</script>

<style lang="stylus">
.leesComment-card {
  width: 100%;
  height: 200px;
  .leesComment-card-header {
    display flex;
    justify-content center
    align-items center
    .leesComment-card-header-picture{
      width:40px;
      height 40px;
    }
    .leesComment-card-inputbox{
      display flex;
      justify-content center
      align-items center
      .leesComment-card-inputName{
        white-space nowrap
      }
      .leesComment-card-inputContent {
        height: 30px;
        border: 1px solid #eee;
        border-radius: 15px;
        font-size 16px
      }
      .leesComment-card-inputContent:focus{
        outline: none;
        border-color $accentColor
      }
    }
  }
  .leesComment-card-content {
    margin-top 10px
    width:100%
    max-width 100%
    height 100px;
    border: 1px solid #eee;
    border-radius 10px
    display flex
    justify-content center
    align-items center
    #leesComment-card-content-textarea {
      font-family: PT Serif, Serif;
      width:90%
      height 90%;
      outline: none;
      resize:none
      border none
    }
  }
  .leesComment-card-toolbar {
    margin-top 10px
  }
}
</style>