背景介绍

ugly 据 Google 翻译，此词意为 #@$%$%$#%$#，emmmmmmmm...，很符合这个ui。

项目介绍

总得写点什么吧

API

button

<template>
  <ugly-button>buttin</ugly-button>
</template>

Button Attributes

参数 |说明 |类型 |可选值 |默认值 ----------|-------------|---------|--------------------------------------------------|-------- type |类型 |String |primary / success / warning / danger / info / text|— size |尺寸 |String |medium / small / mini |— round |是否圆角按钮 |Boolean |— |false disabled |是否禁用状态 |Boolean |— |false nativeType|原生 type 属性 |String |button / submit / reset |button

checkbox

<template>
  <ugly-checkbox v-model="checkbox">checkbox</ugly-checkbox>
  <ugly-checkbox @input="getValue" true-label="1" false-label="2">true-label & false-label</ugly-checkbox>
</template>
<script>
export default {
  data () {
    return {
      checkbox: true
    }
  },
  methods: {
    getValue (value) {
      // value输出1或2
    }
  }
}
</script>

Checkbox Attributes

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- value / v-model|绑定值 |string / number / boolean |— |— true-label |选中时的值 |String / number |— |— false-label |没有选中时的值 |Boolean / number |— |false disabled |是否禁用状态 |Boolean |— |false name |原生 name 属性 |String |— |— checked |当前是否勾选 |Boolean |— |false

radio

<template>
  <ugly-radio v-model="radio" label="2">radio</ugly-radio>
</template>
<script>
export default {
  data () {
    return {
      radio: '1'
    }
  }
}
</script>

Radio Attributes

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- value / v-model|绑定值 |string / number / boolean |— |— disabled |是否禁用状态 |Boolean |— |false name |原生 name 属性 |String |— |—

input

<template>
  <ugly-input v-model="input1" placeholder="请输入内容" size="medium" :maxlength="5" borders radius clearable></ugly-input>
  <ugly-input v-model="textarea1" type="textarea" placeholder="请输入内容"></ugly-input>
</template>
<script>
export default {
  data () {
    return {
      input1: '这是input框',
      textarea1: '这是textarea框'
    }
  }
}
</script>

Input Attributes

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- type |类型 |string |text\textarea |text value / v-model|绑定值 |string / number |— |— disabled |是否禁用状态 |Boolean |— |false name |原生 name 属性 |String |— |— maxlength |最大输入长度 |number |— |— placeholder |输入框占位符 |string |— |— clearable |是否可清空 |boolean |— |false size |text的尺寸 |string |medium / small / mini |— readonly |是否只读 |boolean |— |false form |原生属性 |string |— |false

input-number

<template>
  <ugly-input-number v-model="input_number" :min="1" :max="10" :precision="2" :step="0.1">input-number</ugly-input-number>
</template>
<script>
export default {
  data () {
    return {
      input_number: '1'
    }
  }
}
</script>

Input-number Attributes

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- value / v-model|绑定值 |number |— |— disabled |是否禁用状态 |Boolean |— |false name |原生 name 属性 |String |— |— placeholder |输入框占位符 |string |— |— min |允许的最小值 |number | |-infinity max |允许的最大值 |number | |infinity precision |数值精度 |number | |— step |计数器步长 |number | |1 size |text的尺寸 |string |medium / small / mini |— controls |是否使用控制按钮|boolean | |true controls-position|控制按钮位置 |string |right |true radius |是否圆角 |boolean | |—

select

<template>
  <ugly-select v-model="value" @change="selectChange" @optChange="optionChange" :datas="options" placeholder="请选择"></ugly-select>
</template>
<script>
export default {
  data () {
    return {
      options:[
        [
          {value: '2019',label: '2019年'}, {value: '2020',label: '2020年'}
        ],
        [
          {value: '1',label: '1月'},{value: '2',label: '2月'},{value: '3',label: '3月'},{value: '4',label: '4月'},{value: '5',label: '5月'},{value: '6',label: '6月'},{value: '7',label: '7月'},{value: '8',label: '8月'},{value: '9',label: '9月'},{value: '10',label: '10月'},{value: '11',label: '11月'},{value: '12',label: '12月'}
        ],
        [
          {value: '1',label: '1日'},{value: '2',label: '2日'}{value: '3',label: '3日'}{value: '4',label: '4日'}{value: '5',label: '5日'}{value: '6',label: '6日'}{value: '7',label: '7日'}{value: '7',label: '7日'}{value: '8',label: '8日'}{value: '9',label: '9日'}{value: '10',label: '10日'}{value: '11',label: '11日'}{value: '12',label: '12日'}{value: '13',label: '13日'}{value: '14',label: '14日'}{value: '15',label: '15日'}{value: '16',label: '16日'}{value: '17',label: '17日'}{value: '18',label: '19日'}{value: '20',label: '20日'}{value: '21',label: '21日'}{value: '22',label: '22日'}{value: '23',label: '23日'}{value: '24',label: '24日'}{value: '25',label: '25日'}{value: '26',label: '26日'}{value: '27',label: '27日'}{value: '28',label: '28日'}{value: '29',label: '29日'}{value: '30',label: '30日'}{value: '31',label: '31日'}
        ]
      ],
      value: ''
    }
  },
  method: {
    // 年月日联动
    optionChange (type, curIndex, preIndex) {
      let options = this.options
      const days = (y, m) => {
        return new Date(y, m, 0).getDate()
      }
      switch (type) {
        case 1:
          let dayArray1 = []
          const y1 = options[0][curIndex].value
          const m1 = 1
          for (let i = 1; i <= days(y1, m1); i++) {
            dayArray1.push({value: +i, label: i + '日'})
          }
          options[2] = dayArray1
          this.$set(options, 2, dayArray1)
          break
        case 2:
          let dayArray2 = []
          const y2 = options[0][preIndex].value
          const m2 = options[1][curIndex].value
          for (let i = 1; i <= days(y2, m2); i++) {
            dayArray2.push({value: +i, label: i + '日'})
          }
          options[2] = dayArray2
          this.$set(options, 2, dayArray2)
          break
        default: break
      }
      this.options = options
    }
  }
}
</script>

select Attributes

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- value / v-model|绑定值 |string/number |— |— disabled |是否禁用状态 |Boolean |— |false placeholder |输入框占位符 |string |— |— datas |下拉选项 |Array=[Array=[{value: 'string',label: 'label'}],Array,Array]|right|—

message

<template>
  <div>
    <div @click="alertMessage">打开message</div>
    <div @click="closeMessage">关闭message</div>
  </div>
</template>
<script>
export default {
  methods: {
    alertMessage () {
      this.$message({message:'这是message', duration: 5000})
    },
    closeMessage () {
      this.$message.close()
    }
  }
}
</script>

Message options

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- message |信息 |String |— |— duration |显示时间 |number |— |3000

loading

<template>
  <div>
    <div @click="alertLoading">打开Loading</div>
    <div @click="closeLoading">关闭Loading</div>
  </div>
</template>
<script>
export default {
  methods: {
    alertLoading () {
      this.$loading({duration: 5000})
    },
    closeLoading () {
      this.$loading.close()
    }
  }
}
</script>

Loading options

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- duration |显示时间 |number |— |3000

scroll

<template>
  <div class="scroll-exp1">
    <ugly-scroll
      id="thescrollplace2"
      ref="thescrollplace2"
      @pullDownHandle="pullDownHandle2"
      @pullUpHandle="pullUpHandle2"
      :pull-down="true"
      :pull-up="true">
        <ul class="ugly-scroll-ul-y">
          <li v-for="(list, index) in lists2" :key="index">{{list}}</li>
        </ul>
      </div>
      <!-- 重写下拉过程提示 -->
      <template slot="pullDowningText">
        <span>下拉中提示语</span>
      </template>
      <!-- 重写下拉结束提示 -->
      <template slot="pullDownedText">
        <span>下拉结束示语</span>
      </template>
      <!-- 重写上拉过程提示 -->
      <template slot="pullUpingText">
        <span>上拉中提示</span>
      </template>
      <!-- 重写上拉结束提示 -->
      <template slot="pullUpedText">
        <span>上拉结束提示</span>
      </template>
    </ugly-scroll>
  </div>
</template>
<script>
export default {
  data () {
    return {
      lists2: [1,2,3,4,5,6,7,8]
    }
  },
  methods: {
    pullDownHandle2 () {
      const _this = this
      let lists2 = []
      const times = Math.round((Math.random() * 10))
      for (let i = 0; i <= times; i++) {
        lists2.push(Math.round((Math.random() * 10)))
      }
      setTimeout(() => {
        _this.lists2 = lists2
        _this.$refs.thescrollplace2.pullDownBoolean(false)
      }, 1000)
    },
    pullUpHandle2 () {
      const _this = this
      setTimeout(() => {
        _this.lists2.push(9)
        _this.$refs.thescrollplace2.pullUpBoolean(false)
      }, 1000)
    }
  }
}
</script>
<style>
.scroll-exp2{
  width: 100%;
  height: 400px;
  overflow: auto;
}
.ugly-scroll-ul-y li{
  height: 100px;
  border-bottom: 1px solid #fff;
  background-color: #efefef;
}
</style>

scroll options

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- id |父级id |string |— |必填 ref |滚动内容ref |string |— |必填 pull-down |是否显示下拉 |Boolean |— |false pull-up |是否显示上拉 |Boolean |— |false scroll-type |滚动方向 |String |X\Y |Y

scroll slot

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- pullDowningText |自定义下拉过程提示 |html |— |— pullDownedText |自定义下拉结束提示 |html |— |— pullUpingText |自定义上拉过程提示 |html |— |— pullUpedText |自定义上拉结束提示 |html |— |—

scroll Handle

参数 |说明 |类型 |参数 ---------------|-------------|--------------------------|-------------------------------------- pullDownHandle |下拉操作 |function |— pullUpHandle |下拉操作 |function |— pullDownBoolean |改变下拉状态 |function |Boolean pullUpBoolean |改变下拉状态 |function |Boolean

swiper

<template>
  <div>
    <ugly-swiper
      id="swiper1"
      attr-class="swiper1-height"
      ref="swiper1"
      @swiperHandle="swiperhandles"
      :loop="true"
      :auto-play="4000"
      scroll-type="X"
      :pagination="true">
      <template slot="swiperWrapper">
        <div class="ugly-swiper-wrapper">
          <div v-for="(slide, index) in slides1" :key="index" @click="swiperalert(index)" class="ugly-swiper-slide slides">{{slide}}</div>
        </div>
      </template>
    </ugly-swiper>
  </div>
</template>
<script>
export default {
  data () {
    return {
      slides1: [1,2,3,4,5]
    }
  },
  methods: {
    appendSlide () {
      this.slides.push(2,3,4)
      this.$refs.swiper1.updateWrapper()
    },
    slideToSlides1 (index) {
      this.$refs.swiper1.slideTo(index)
    }
  }
}
</script>
<style>
.swiper1-height{
  height: 200px;
}
</style>

scroll options

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- id |父级id |string |— |必填 ref |滚动内容ref |string |— |必填 attr-class |样式名 |Boolean |— | loop |是无限滚动 |Boolean |— |false auto-play |是否自动滚动 |Boolean, Number | |Y scroll-type |轮播方向 |string |X/Y |X pagination |是否显示分页器 |Boolean | |false

scroll slot

参数 |说明 |类型 |可选值 |默认值 ---------------|-------------|--------------------------|----------------------------|-------- swiperWrapper |轮播内容 |html |— |

scroll Handle

参数 |说明 |类型 |参数 ---------------|-------------|--------------------------|-------------------------------------- swiperHandle |动画结束是回调函数 |function |i-当前的index
updateWrapper |重置轮播函数 |function |-
slideTo |轮播到某索引函数 |function | i-索引